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.

tab-visibility-enhancement.md

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! 🎨