Repository navigation
[Bug]: [Accessibility / UI]: Active vs. inactive tabs lack visual contrast across light and dark modes (WCAG 1.4.11) #21225
Description
Operating system
Windows
Orca version
1.4.205
Details
Problem or Use Case:
In both Light and Dark modes, active and inactive tabs in the top tab bar are nearly indistinguishable:
- Light Mode: Active tab (
#FFFFFF) against inactive tab (~#F2F2F2) yields an insufficient contrast ratio of ~1.15:1. - Dark Mode: Active tab (
~#18181B) against inactive tab (~#222226) yields an insufficient contrast ratio of ~1.1:1.
major usability and accessibility barrier:
- WCAG Violation: [WCAG 2.1/2.2 Success Criterion 1.4.11 (Non-text Contrast)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requires at least a 3:1 contrast ratio for user interface components and state indicators (active vs. inactive).
- Users cannot quickly scan or identify which tab (code file, terminal, or agent session) currently has focus without looking for tiny secondary indicators (like an 'x' icon or preview italics).
Proposed Solution:
Adopt standard IDE/browser active-tab treatments to clearly delineate state:
- Prominent Active Indicator Line: Add a 2–3px accent bar along the top or bottom of the active tab (similar to VS Code, Chrome, or Windows Terminal).
- Increase Background Contrast: Adjust the palette tokens so inactive tab surfaces have meaningful background contrast (targeting 3:1) relative to the active tab.
- Tab Borders / Dividers: Add subtle vertical dividing lines between tabs or a distinct perimeter outline around the active tab.
- (Optional) High-Contrast Setting: Add an option under
Settings → Appearance(e.g., “High-contrast tab bar” or customizable active-tab highlight color) for users who need enhanced visibility.
Screenshots / Evidence:
Attached Light & Dark Screenshots
Activity
AmethystLiang commentedon Sep 17, 2026
Valid point. For now does the bottom bar help?
Fayiette commentedon Sep 17, 2026
It does, thank you
AmethystLiang commentedon Sep 17, 2026
thanks for reporting. looking into it
nwparker commentedon Oct 22, 2026
Verified completed on current main. The active tab now has a persistent 2px foreground line along its bottom edge, shared by terminal, editor and browser tabs (
tab-bar/drop-indicator.ts, delivered in #25078). This implements the prominent indicator proposed here and the treatment the reporter accepted above.I checked the actual rebuilt Electron UI in a hidden, disposable profile: the line is present only on the selected tab and moves when selection changes. Light mode uses a dark line on the light tab (about 17.4:1 contrast); dark mode uses a light line on the dark tab (about 14.8:1), both above the requested 3:1 state-indicator contrast. The subtle background tint is supplemented by this high-contrast indicator.
Light and dark verification screenshots:
Closing as completed.