Add `forced-colors` media feature
meduzen opened this issue · comments
From the very insightful MDN page about forced-colors
:
The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.
Naming proposition:
--forced-colors
forforced-colors: active
;--no-forced-colors
forforced-colors: none
.
This is different from the prefers-contrast
feature, which for example responds to macOS “Increase contrast” setting and is already available in Double Dash.
Related resources:
- Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties
- CurrentColor SVG in forced colors modes
It’s currently only supported in Windows high contrast mode (Windows 10 provides 4 customizable themes: 2 dark, 2 light). However, it’s still good to consider improving UIs when @media (forced-colors: active)
:
- you can remove your theme switcher because nothing will visually change;
- you might need some tuning of some SVGs: for example, on block.sunappu.net, the border of the 2nd block (you have to tap on it 100 times to unlock it 😅) remains black, and becomes invisible because the high contrast background is now also black
- buttons color are now the same as text color (white) while links has now a very contrasted accentued color (yellow): it might be disturbing if buttons without border now looks like regular text.
These ideas have not been validated by any accessibility export.