Giters

meduzen / --media.scss

Tomorrow’s media queries workflow, since 2019.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add `forced-colors` media feature

meduzen opened this issue · comments

commented

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.