You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The forced-colors CSSmedia 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.
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.
The text was updated successfully, but these errors were encountered:
From the very insightful MDN page about
forced-colors
: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:
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)
:These ideas have not been validated by any accessibility export.
The text was updated successfully, but these errors were encountered: