CodePenMay 17, 2023

Accessible Color - @prefers-color-scheme + @forced-colors + @inverted-colors

CodePen pattern demonstrating user-choice color accessibility with prefers-color-scheme, forced-colors, and inverted-colors media queries.

patternAccessibilityCSSWCAG

Last updated: Jul 19, 2023

CodePen snippet: Accessible Color - @prefers-color-scheme + @forced-colors + @inverted-colors.

Resources

Accessible Color - @prefers-color-scheme + @forced-colors + @inverted-colors CodePen demo (opens in new tab)
Accessible User Preferences CodePen collection (opens in new tab)
CSS + accessibility: Inclusion through user choice (SmashingConf SF) (opens in new tab)