Add Practice Page for Supporting Color Contrast Settings

[mcking65]

Part of the resolution of issue #2864.

Preview Links

• Preview revised practices page in compare branch
• Preview color contrast settings practice page in compare branch

---

WAI Preview Link (Last built on Wed, 19 Aug 2026 17:21:12 GMT).

[jongund]

@mcking65
This is ready for review, I think it would be great if James Nurthen could review it.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed New high contrast practice page.

The full IRC log of that discussion

<Jem> Topic:New high contrast practice page
<Jem> github:PR 2991 - Add Practice Page for Supporting High Contrast
<dmontalvo> s/:New/: New/
<Jem> github:https://github.com//pull/2991
<dmontalvo> Matt_King: Big thanks to jongund, this is great
<dmontalvo> ... In the PR there is a link to the preview
<Jem> https://deploy-preview-315--aria-practices.netlify.app/aria/apg/practices/high-contrast/
<dmontalvo> ... At this point in the drafting process we have very good and useful info. Now I am thinking that we probably want to focus a bit on information architecture
<dmontalvo> ... Think about our audience will learn from this page, we have different audiences
<dmontalvo> ... We have not covered testing techniques here yet
<dmontalvo> ... We had said if there is already a resource in the WAI website we could use
<dmontalvo> Daniel: Maybe Easy Checks, not clear on specific
<dmontalvo> Matt_King: Can we open an issue to that and then link from our pages?
<dmontalvo> Daniel: We could, that's under EO
<dmontalvo> Matt_King: We can start drafting it here, then open an issue to Easy Checks, and based on traction we could eventually remove it from here
<dmontalvo> jongund: I could do that
<dmontalvo> Matt_King: It seems to me there is something really valuable that you learned from James. I don't think EO would have included this information, they have more general contrast testing tools
<dmontalvo> ... I documented how to test this color contrast issues
<dmontalvo> Matt_King: Probably it's on our own wiki under accessibility testing
<Jem> https://github.com/w3c/aria-practices/wiki/Pull-Request-Review-Process
<dmontalvo> Daniel: Probably that's out of scope for Easy Checks, we'd have to include this ourselves
<dmontalvo> CurtBellew: Are we saying this is too complicated?
<dmontalvo> Matt_King: No, just out of sccope for the Easy Checks project
<dmontalvo> jongund: It's not that complicated to put Windows or Linux in high contrast mode
<siri> q+
<dmontalvo> Matt_King: Under operating system, high contrast features, do you know if we could provide links to the Microsoft, Apple, and Google documentation about those features?
<dmontalvo> Jem: Wouldn't it be changing?
<dmontalvo> Matt_King: I'd hope they have stable information about accessibility features
<Jem> https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696#:~:text=Select%20the%20Start%20button%2C%20and,colors%20on%20the%20screen%20change.
<dmontalvo> Matt_King: Our current info is not very useful. Without any documentation to help people turn it on and off, I don't think it's actionable information
<dmontalvo> ... One solution to that is for us to provide a link to their documentation about the feature
<dmontalvo> jongund: Probably these days the accessibility links are more stable than they were
<dmontalvo> Matt_King: Also if a link breaks, our link checker will ick it up
<dmontalvo> Jem: Good idea
<dmontalvo> jongund: I don't have a recent Android device
<dmontalvo> Matt_King: Anybody in this group can find the appropriate info
<dmontalvo> Matt_King: Also, where we are talking about the use of specific CSS properties, it would be great to link to the spec
<dmontalvo> s/to the spec/directly to the spec or to MDN/
<dmontalvo> Matt_King: I am going to spend a bit on time on this PR, to focus on what using these things does, for people to understtand the "Why"
<dmontalvo> jongund: Do you think the screenshots are useful?
<dmontalvo> Matt_King: Love the idea of making things more visual, I can't comment on those though
<Jem> System Colors
<Jem> "The following table identifies the current system colors defined in CSS Color Module Level 4. System colors are supported in all major browsers, but the actual colors they render may vary between browsers and operating systems based on default and user theme and contrast settings."
<dmontalvo> jongund: What about the table on the system colors section that explain how browsers deal with ach of the colors
<dmontalvo> ... In Windows, it changes the colors used by the OS, i mac it just filters them out and transforms the bitmap
<dmontalvo> ... If you are taking a screenshot on the mac you are getting that without high contrast
<dmontalvo> Matt_King: That is actionable information
<dmontalvo> ... For sccreen reader users the sample column is blank. I understand it's just a color in there
<dmontalvo> ... Should be try to put something in there?
<dmontalvo> Matt_King: Should we put an ARIA label on the td?
<dmontalvo> jongund: Sample accent color
<dmontalvo> Matt_King: I think it'd be cool to have the name of the color
<dmontalvo> jongund: The actual color varies depending on the setting
<dmontalvo> Jem: But you have the hex code
<dmontalvo> Matt_King: We don't want hex code in the label, just the name that corresponds to it
<dmontalvo> Jem: I think it's possible
<dmontalvo> rrsagent, draft minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2024/06/04-aria-apg-minutes.html dmontalvo
<dmontalvo> Meeting: ARIA APG Teleconference
<dmontalvo> Chair: Mat
<dmontalvo> rrsagent, draft minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2024/06/04-aria-apg-minutes.html dmontalvo
<dmontalvo> zakim, bye
<Zakim> leaving. As of this point the attendees have been CurtBellew, curt_bellew, Arie
<dmontalvo> rrsagent, bye
<RRSAgent> I'm staying, dmontalvo; no access has been specified for the meeting record
<Jem> rrsagent, make minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2024/06/04-aria-apg-minutes.html Jem
<Jem> regret+ Mike
<Jem> rrsagent, make minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2024/06/04-aria-apg-minutes.html Jem
<Jem> MEETING: ARIA APG

[jongund]

@mcking65
I added labels to the cells in the sample column of the System Colors table.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed New high contrast practice page.

The full IRC log of that discussion

<jugglinmike> Topic: New high contrast practice page
<jugglinmike> github: https://github.com//pull/2991
<jugglinmike> jongund: In the table, under the "sample color" column, I added colors which are computed based on HTML standard color names
<jugglinmike> jongund: If it doesn't match a known color, it will tell you which color it is closest to
<siri> can you add link to system colors here?
<jugglinmike> jongund: This is all computed because the colors are different for each browser
<siri> https://deploy-preview-315--aria-practices.netlify.app/aria/apg/practices/high-contrast/
<jugglinmike> Matt_King: I think the "sample" column--it might be cool to label that "computed sample" or something like that, just to indicate that this is computed specifically for the current browser
<jugglinmike> jongund: It also detects grayscale. If all of the RGB values are the same, it will report "light gray", "gray", or "dark gray"
<jugglinmike> jongund: I also tried to work on testing for high-contrast support
<jugglinmike> jongund: Mostly what I have there is links to instructions for testing high-contrast settings
<jugglinmike> jongund: For the Chrome browser, I have a link for how to configure the DOM inspector (where you can add a "render" tab to one of the toolbars and use that to force certain colors)
<jugglinmike> jongund: I'm still working on this section, so it's not very well-organized, yet
<jugglinmike> Matt_King: It will be helpful to understand which ways of coding must be used in order to support high-contrast
<jugglinmike> jongund: I was thinking about using a button that's made from an image, a button that's made with a "<div>" whose "role" is "button", and then a button made from an SVG...
<jugglinmike> Matt_King: Anyone care to weigh in on what would be useful for them?
<jugglinmike> CurtBellew: I'd have to think about this a bit; I don't know off-hand
<jugglinmike> arigilmroe: I need to take a closer look
<jugglinmike> s/arigilmroe/arigilmore/g
<jugglinmike> Matt_King: We avoid anti-patterns, but in a case like this, maybe we could have a "do's and don't's" kind of section
<jugglinmike> jongund: When you're using current color, you can't necessarily set the background color. It's not like the "force colors" media query where you can set whatever you want
<jugglinmike> jongund: If you're not careful, and the background color changes to the current color, you could end up with black-on-black. Clearly, you won't see anything in that case
<jugglinmike> jongund: There are also considerations around images
<jugglinmike> Matt_King: Well those are two cautions right there. We could use different wording, like "recommendations" and "cautions" instead of "do's and don't's"
<jugglinmike> Matt_King: I'm super-excited about getting all this information together in once place. It feels like it could be extremely valuable
<jugglinmike> Matt_King: It would be great if the other folks in attendance could give jongund feedback about what's good and/or what's missing
<jugglinmike> Matt_King: If anyone knows someone who might have advice, you can share a link to the preview https://deploy-preview-315--aria-practices.netlify.app/aria/apg/practices/high-contrast/
<jugglinmike> And they can add comments to jongund's pull request
<jugglinmike> CurtBellew: I think high-contrast testing is under-served with accessibility testing. I agree that there's potentially a lot of value here
<jugglinmike> jongund: I'll try to work on this more today and tomorrow. I may not be present on the call next Tuesday; I'll be camping
<jugglinmike> Matt_King: Thank you for all the really awesome hard work on this, jongund
<jugglinmike> Zakim, end the meeting

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2991: Add Practice Page for Supporting Color Contrast Settings.

The full IRC log of that discussion

<Zakim> agendum 5 -- PR 2991: Add Practice Page for Supporting Color Contrast Settings -- taken up [from agendabot]
<jugglinmike> github: https://github.com//pull/2991
<jugglinmike> Matt_King: I've been doing a lot of work on this. It's been reviewed by multiple people, and I think jongund has addressed the older comments but not some of the newer comments
<jugglinmike> Matt_King: The biggest change that I would like the group to consider right now is that I made some of the changes we discussed about a month ago related to table structure
<jugglinmike> Matt_King: I've simplified the table structure. Now the table headers are present in a single row
<jugglinmike> Matt_King: I did this without any knowledge of how the table headers will visually flow, now
<jugglinmike> Matt_King: The preview is now working, so I'd appreciate if people can look at it and report on how it appears visually
<jugglinmike> jongund: I think the table headings look fine
<jugglinmike> Matt_King: The first one on the page that I made changes to is under the heading "color schemes light and dark modes"
<jugglinmike> Matt_King: There is a table there captioned as "color scheme changes"
<jugglinmike> jongund: Yeah, that looks fine
<jugglinmike> Matt_King: I left the word "ratio" out of the fourth column heading (and also the final column heading)
<jugglinmike> Matt_King: I don't think that word is necessary. If there's any ambiguity there, we could say something in the caption, but I think everyone in this community is going to understand what those numbers are
<jugglinmike> Jem_: Are you sure?
<jugglinmike> Matt_King: That's my opinion
<jugglinmike> Matt_King: If you add another word to those column headers, I was guessing that it might make them unusually tall or cluttered-looking. I can add them if people think that's fine
<jugglinmike> Jem_: Maybe in the table caption, we could write "Color scheme changes with ratio", instead
<jugglinmike> Matt_King: Okay. Any other comments on that?
<jugglinmike> jongund: Yeah, that sounds good to me
<jugglinmike> Matt_King: Good. I'm glad those work
<jugglinmike> Matt_King: I think there are a total of four tables where I made that kind of change
<jugglinmike> Matt_King: The next one is a little bit different. It's the Windows 11 themes. In this case, I just added the word "theme" to each
<jugglinmike> Matt_King: (Interestingly, JAWS pronounces "desert" as "dessert". I'm using Eloquence.)
<jugglinmike> Matt_King: On the table before the system colors, there was an aria-labeled-by pointing to the body of the table. I removed that because it made the table unreadable
<jugglinmike> Matt_King: Underneath the "system colors" title, there is a list that is generated via JavaScript. My comment in the pull request is simply asking why it is dynamically-generated
<Daniel> q+
<jugglinmike> Jem_: If I look at the code, it's still LI and UL code, it looks fine semantically. Why does it matter whether we generate it dynamically?
<jugglinmike> jongund: We wrote this code a long time ago. I don't remember why it is generated
<jugglinmike> ack Daniel
<jugglinmike> Daniel: Thanks for raising this, Matt_King. There's already another instance of this (I think with the banner). The WAI website doesn't have anything rendered in this manner; it's all built server-side.
<jugglinmike> Matt_King: The one in the banner is different. It's more like skipTo, where we're dynamically inserting into template content
<jugglinmike> Matt_King: This one only appears on one page
<jugglinmike> Jem_: But again, why is this discouraged?
<jugglinmike> Daniel: It wouldn't work if you had JavaScript disabled
<jugglinmike> Daniel: We could talk about why one might want to have JavaScript disabled these days, but that's a separate conversation
<jugglinmike> Daniel: We were motivated to avoid this for the use-case of JavaScript being disabled
<jugglinmike> Matt_King: This is static content, so it doesn't seem necessary
<jugglinmike> jongund: It's fed by a JSON object. I guess I coded it in this way because that JSON object could change
<jugglinmike> Matt_King: We're not dynamically retrieving the JSON from anywhere. It's hard-coded, so it's like prose written in JSON and rendered with JavaScript.
<jugglinmike> Matt_King: We have a preference for static content to be expressed directly in the HTML
<jugglinmike> Matt_King: We have a few dynamic things that change based on the browser. Those are justifiable
<jugglinmike> Matt_King: I made a list of thirty-eight or so image files that are in the pull request but are not use. We need to get rid of those
<jugglinmike> Zakim, next item

[mcking65]

@jongund

I am working on clarifying text in the section about testing contrast themes. I read the referenced chrome developer documentation about emulating CSS media features.

If you emulate forced-colors active in Chrome, which theme is rendered? Does that emulation work on platforms other than Windows? If so, what theme does it use?

[mcking65]

@jongund
This line is a sentence fragment. Could you please complete this thought. Once the author has designed the color scheme, I assume step 2 is supporting it in code and that is what this is about.

[jongund]

@mcking65
Updated the pull request to use only static content in the tables.
The computed color in the system color table is now static content based on macOS and Chromium browser rendering.

Should I add another column with Firefox and Windows rendering?

[jongund]

@mcking65
Removed unused images

[mcking65]

@jongund

Could we make two changes to this table?

1. Add a column for Firefox custom contrast that shows the name of the Firefox setting that corresponds to the system color.

2. Add rows for the other system colors so we have all colors in one table and can show the ones that are mapped in only one of the 3 (windows, chrome, or firefox) and which colors, if any, are not mapped to any of the 3.

[mcking65]

@jongund

As I read more about contrast themes, given both the Firefox and Chrome support for forced colors, it no longer seems accurate to call this a Windows operating system feature. The Firefox support, especially with its ability to mirror Linux operating system settings and its customizability on macOS, is really bringing this feature to the web platform. Our content is not doing that work justice.

So, I am going to revise how we describe this feature. One part that I'd really like your help with is the table of system colors and how they are mapped by Windows, Firefox, and Chrome. I added a comment on the table itself. Can you do that? Is what I am suggesting clear and sensible?

[mcking65]

@jongund
This table is now moved and has its full context. Could you please complete this table as described by its new context?

[mcking65]

@jongund

This section was missing. Could you please draft content for it that is similar in form to the section on supporting color schemes?

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2991: Add Practice Page for Supporting Color Contrast Settings.

The full IRC log of that discussion

<Zakim> agendum 5 -- PR 2991: Add Practice Page for Supporting Color Contrast Settings -- taken up [from agendabot]
<jugglinmike> github: https://github.com//pull/2991
<jugglinmike> jongund: I don't think Firefox is a special case. the force colors only work on Windows regardless of browser
<jugglinmike> jongund: There is now a custom-colors setting. The most concerning part is that setting is off. If you use the default Firefox, you set custom colors in Windows, then Firefox will not automatically adapt to them. That is not how Chrome behaves. By default, Chrome will use the operating system settings
<jugglinmike> jongund: That's a gotcha to me because most people aren't going to know how to do that
<jugglinmike> Matt_King: Firefox tried to make this a web-platform setting so that you can use it on any operating system. But it's not on by default
<jugglinmike> jongund: The only thing it does on other operating systems is give you black characters on a white background
<jugglinmike> Matt_King: It's a four-color scheme instead of an eight-color scheme
<jugglinmike> Matt_King: Windows has an eight-color scheme
<jugglinmike> jongund: Right. I think it's separate from what Windows does.
<jugglinmike> jugglinmike: We're at time
<jugglinmike> Matt_King: More discussion is necessary!
<jugglinmike> Zakim, end the meeting