Closed BillGoldstein closed 4 years ago
I agree, and was suprised to find that our current spec text for system colors only talks about forced color mode. The system colors are also useful for light/dark theming.
Do you have more details about your test results? Which browsers are not updating the used values for their System Color keywords to match their default styles when dark mode is active?
Tested with Chromium, and Gecko (with an autoland build with new system color support - it's been backed out for now). Neither adjusted Canvas / CanvasText in dark mode. Same for LinkText / VisitedText / ActiveText. They have less than WCAG-specified contrast ratios even in light mode, but it's worse in dark mode.
Agenda+ to confirm that the intention is that system colors will adapt to the used color scheme, whether it is forced or not. And to find out if there are implementation obstacles to make this so.
Note that the resolution to https://github.com/w3c/csswg-drafts/issues/4608#issuecomment-578151377 implies that system color values will adjust to color scheme
I'd also want a resolution that User Agent stylesheets should use system colors, so that an HTML file with a <meta name="color-scheme" content="dark">
command is readable by default if CSS doesn't load.
We already have text about using “legible” pairs of colors in the default browser/system color schemes, although I'd prefer a more explicit requirement for WCAG AA contrast, unless the colors are user-selected.
The css-color-adjust spec[1] says in a couple of places that system colors are affected by the used color-scheme.
Safari ships color-scheme dependent system colors. In Chrome it's currently behind the same runtime flag as for dark themed forms (--enable-blink-features=CSSColorSchemeUARendering).
I agree with AmeliaBR about the WCAG AA 4.5:1 contrast ratio requirement for legible "pairs"...as default.
Later, when implementing https://drafts.csswg.org/mediaqueries-5/#prefers-contrast:
when @prefers-contrast:high (or "increased") applies, use WCAG AAA 7:1 contrast ratio, when @prefers-contrast:no-preference, keep using the WCAG AA 4.5:1 contrast ratio, when @prefers-contrast:low applies, use WCAG's 3:1 minimum contrast ratio. @prefers-contrast "extremely high" could use maximum possible contrast.
An example of what it might look like: https://codepen.io/a-ja/pen/qBdwEoq
The CSS Working Group just discussed [css-color-4] system colors when NOT forced-colors:active
, and agreed to the following:
RESOLVED: The system colors should have meaning outside of forced-colors and reflect dark and light mode changes
RESOLVED: Requirement on legible background/foreground colors should be made a should to reflecting WCAGcontrast ratio but with exception that it only applies when browser generates default colors
RESOLVED: Add to previous resolution that user contrast preference must take precedence
All three resolutions have now been incorporated.
I've been doing some testing of system colors when NOT forced-colors:active, and have a few ideas: 1) UA's should use dark color (black-ish) for Canvas, and light color (white-ish) for CanvasText, when prefers-color-scheme:dark 2) UA's should use colors with sufficient contrast for LinkText, VisitedText, and ActiveText, lighter in dark mode, darker when not in dark mode