Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add forced-colors media feature #17

Closed
meduzen opened this issue Aug 27, 2022 · 0 comments · Fixed by #18
Closed

Add forced-colors media feature #17

meduzen opened this issue Aug 27, 2022 · 0 comments · Fixed by #18
Labels
--enhancement New feature or request --good-first-issue Good for newcomers

Comments

@meduzen
Copy link
Owner

meduzen commented Aug 27, 2022

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 for forced-colors: active;
  • --no-forced-colors for forced-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):

  • 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
    normal mode: the boundaries of the block are visible high contrast mode: there’s no visible boundaries between the block and the background
  • 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.

@meduzen meduzen added --enhancement New feature or request --good-first-issue Good for newcomers labels Aug 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
--enhancement New feature or request --good-first-issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant