Provide guidance and examples that promote using media queries to set colors when high contrast settings are enabled

[jongund]

There seems to be good support for the forced-colors media query.

I am using this approach in the proposed updated rating slider example.

I think we should update examples that are relying only on currentColor to provide a more modern and flexible way to support high contrast user preferences. The use of only currentColor is not very practical in most production settings where branding colors would limit the ability to rely on currentColor. The media query would allow us to specify system color values like canvas, canvastext and linktext.

More information on system colors.

I think we should update the other slider examples and review other APG example where the media query would be useful in other APG examples.

We need some guidance on supporting high contrast settings in general under the practices.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Issue 2864 - High contrast support practices.

The full IRC log of that discussion

<jugglinmike> Topic: Issue 2864 - High contrast support practices
<jugglinmike> github: https://github.com//issues/2864
<jugglinmike> jongund: We have a lot of examples which are just using the current color value. As a result, we're kind of relying on the background color being managed by the page
<jugglinmike> Matt_King: As for the approach, we could just start changing individual patterns one-by-one
<jugglinmike> s/start/start randomly/
<jugglinmike> Matt_King: Or we could create a project to track the work across the site
<jugglinmike> Matt_King: It might also touch on the idea we've discussed about a code quality report
<jugglinmike> Jem: It sounds like support for CSS4 has improved since we last considered forced colors. Do you know anything about this, jongund?
<jugglinmike> jongund: I tried using it, and it seems to be better-supported, now
<jugglinmike> ariellagilmore: We use media queries in Carbon, though I don't think we've used forced colors, yet
<jugglinmike> jongund: I think a new practice would be a good place to collect the ways people successfully use the technology
<jugglinmike> Matt_King: Something like this could fit into a practice
<jugglinmike> Matt_King: jongund, do you want me to set up a pull request for a new "practices" page about high contrast?
<jugglinmike> jongund: Yeah, that would be helpful
<jugglinmike> Matt_King: Is this something that you could test for in the code quality report?
<jugglinmike> jongund: Yeah, we could check for the presence of the media query
<jugglinmike> jongund: At this point, we could just look at the the examples which are using "current-color". Those would be the high-priority one
<jugglinmike> s/one/ones/
<jugglinmike> Matt_King: Okay, I'll start a pull request for a "high-contrast support" practice. And jongund, you can start a pull request for the code quality report
<jugglinmike> Zakim, end the meeting

[mcking65]

• Track support in examples in the coverage and quality report (PR Coverage and Quality Report: add information about use of forced-colors media query in examples #2902)
• Add practices page for supporting high contrast (PR Add Practice Page for Supporting Color Contrast Settings #2991)

[mcking65]

Related:
#3062
#3063

[mcking65]

@jongund

Based on discussion in Sep 3 meeting, please provide pros and cons for users of invert colors vs force colors (themes).

[jongund]

I think we are conflating the concepts of user color preferences and high contrast support. What we support in the APG from a programmatic perspective is the user color preference through theforced-colors media query. The main limitation of the "forced-colors" media query it is currently only supported in Windows operating system.

There are other OS features for providing authors with users need for more contrast "prefers-contrast" media query and the users desire for a light or dark theme to the rendering of web content through the "prefers-color-theme" media query.

The third option the user has is to invert colors, which the author will have no knowledge of.

I think the APG guidance should provide guidance on how to support "forced-colors" media query and help developers understand the difference between the other media queries and the invert colors OS feature.

OS Feature	Author Guidance
Invert Colors	No author guidance other than meeting WCAG requirements
prefers-contrast	Use media queries to try to meet WCAG 4.1.6 Contrast Enhanced Requirements, eliminate background images and gradients
prefers-color-scheme	Create content that is primarily light colors on a dark background when dark mode is enabled.
forced-colors	See our best practices

[mcking65]

Useful references:

1. Assistive technology: Operating System and Browser Accessibility Display Modes - The A11Y Project
2. Styling for Windows high contrast with new standards for forced colors - Microsoft Edge Blog
3. Quick Tips for High Contrast Mode | Sarah Higley
4. WHCM and System Colors — Adrian Roselli