Skip to content

Instantly share code, notes, and snippets.

@timothywarner
Created April 6, 2025 21:17
Show Gist options
  • Select an option

  • Save timothywarner/8d7ab1f7b2c6629b745ac640f85e2d60 to your computer and use it in GitHub Desktop.

Select an option

Save timothywarner/8d7ab1f7b2c6629b745ac640f85e2d60 to your computer and use it in GitHub Desktop.
VS Code settings to enhance active tab visibility for colorblind users. Uses high-contrast orange borders and semi-transparent background for better tab identification. Works with any theme.

VS Code Active Tab Enhancement for Colorblind Users

A simple VS Code configuration that makes the active editor tab highly visible through color and visual indicators. Perfect for colorblind users or anyone who wants more distinct active tab highlighting.

Quick Setup

  1. Open VS Code
  2. Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac)
  3. Type "Preferences: Open User Settings (JSON)"
  4. Add this configuration:
{
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#ff990044",    // Semi-transparent orange background
    "tab.activeBorder": "#ff9900",          // Solid orange border
    "tab.activeBorderTop": "#ff9900",       // Solid orange top border
    "tab.activeModifiedBorder": "#ff9900",  // Orange border for modified tabs
    "tab.activeForeground": "#ffffff",      // White text for contrast
    "tab.border": "#ffffff10"               // Subtle border between tabs
  },
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.showTabs": true,
  "workbench.editor.tabSizing": "shrink"
}

Customization

  • Change opacity: Modify last two digits of #ff990044 (44 = 68% opacity)
  • Change color: Replace #ff9900 with your preferred color
  • Tab sizing options: Change "shrink" to "fit" or "fixed"

Why This Works

  1. Uses a high-contrast orange that works well for most types of colorblindness
  2. Combines multiple visual indicators (background, borders, and text contrast)
  3. Semi-transparent background maintains readability while being distinct
  4. Works with any VS Code theme

Created by Tim Warner (@TechTrainer Tim) - Making VS Code more accessible, one tab at a time! 🎨

@Pvag
Copy link

Pvag commented Oct 28, 2025

Great! Much appreciated, thank you for sharing! It really makes the selected tab easy to spot, among the others!
One little improvement: "workbench.editor.showTabs": should be either "multiple", "shrink", "fit", not a boolean value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment