[Win][HCM] Tab labels are unreadable in Windows 10 built-in HCM themes
Categories
(Firefox :: Theme, defect)
Tracking
()
People
(Reporter: aminomancer, Unassigned)
Details
Attachments
(2 files)
STR
- Open Windows 10 Settings
- Turn on high contrast
- Under Choose a theme, select High Contrast Black
- Open Firefox
Expected
Tab labels should be visible
Actual
The active tab is 100% unreadable because the background color and text color are both #fff.
A similar problem exists for the other built-in Windows 10 HCM themes. If you choose High Contrast #1 instead, you get yellow text on a white background. The contrast value is 1.07 which is extremely low (white on white is 1.0). An ideal contrast ratio for such an important element would be 7 or higher. The most minimal WCAG guidelines (AA) require 4.5. Switching to HCM should probably give you a contrast ratio of at least 7 for all text, but in this case it actually drastically reduces the contrast.
More importantly, High Contrast #1 makes inactive tabs completely illegible while the window is inactive (i.e. another window is in front). They have black text on a black background (1.0).
The High Contrast #2 theme yields green on white for the active tab, which is better (1.37) but still far from sufficient contrast. This theme has an even worse problem than High Contrast #1 though: inactive tabs are black on black when the window is active. They change to white on black when the window is inactive, but readability is probably more important in the window active state than in the window inactive state.
Finally, there's one more built-in HCM theme on Windows 10 — High Contrast White. Enabling this yields black on white for the active tab, which is a perfect contrast ratio (21), but it also causes the inactive tabs to be white on white (1.0), completely illegible. Again, they become visible when the window is inactive.
That means every built-in HCM theme on Windows 10 causes tabs to be completely illegible, and some of them cause all tabs to be effectively illegible due to very poor combos like yellow on white.
Regarding the window inactive state, I'm not sure there is any benefit to changing the text color in HCM. The window already gains an extremely thick border when active in HCM. And there aren't enough colors to work with in HCM for there to be any contrast. With the dark HCM themes, everything is designed to either be black or have good contrast with black. So if the tab background is white, the only text color that will work is black. Which means there's nothing to change the color to except near-white colors like neon yellow or green. So I would propose just disabling the :-moz-window-inactive rules in HCM, at least for Windows 10.
This problem doesn't exist for the built-in contrast themes on Windows 11, so maybe the issue is that the HCM styles were tested on Windows 11 but not on Windows 10. The default HCM implementation on Windows 11 is very different from Windows 10, so maybe it makes sense to bifurcate the HCM styles by OS version. That would greatly complicate many stylesheets, but with Windows 10's popularity and how catastrophic this bug is for accessibility, maybe it's worth considering.
Reporter | ||
Comment 1•2 years ago
|
||
Here's the High Contrast #2 theme
Reporter | ||
Comment 2•2 years ago
|
||
I think this is just something wrong in my system's registry. For some reason it's reporting the color values from the Windows HCM theme, which are displayed correctly through system colors, but the prefers-contrast media query is not working, so the HCM-specific styles are not applying. The colors look correct on my other Windows 10 system so I think this is just an issue on my end. I'll close it for now to avoid wasting anyone's time but if I can't determine the cause, I'll file a new bug for the high contrast reporting issue.
Description
•