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 Sun, 23 Feb 2025 19:22:01 GMT).

[jongund]

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

[howard-e]

@howard-e The preview is not showing latest commits again. Is that because of the failing checks?

@mcking65 The expected changes are there now without my needing to do anything. It may have been a one-off error at the time last checked. These present lint errors don't impact the preview build

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2991 - Practice Page for Supporting color settings.

The full IRC log of that discussion

<jugglinmike> Topic: PR 2991 - Practice Page for Supporting color settings
<jugglinmike> github: https://github.com//pull/2991
<jugglinmike> Matt_King: Several people have looked at this, and it has changed a fair amount based on their reviews
<jugglinmike> Matt_King: There is new content that jongunderson added within the last week--change which I have not reviewed from an editorial perspective, yet.
<jugglinmike> Matt_King: But I still think it would be good to have more people to review before next week
<jugglinmike> Matt_King: To look for both editorial and accuracy problems of any kind
<jugglinmike> Matt_King: Adam_Page is the only person to submit a formal review so far--thank you, Adam_Page
<jugglinmike> Adam_Page: And I can look again in the next week
<jugglinmike> CurtBellew: I'd like to take a crack at this, too
<jugglinmike> Matt_King: It would be great if you could get to it before next week's meeting
<jugglinmike> Matt_King: There's a lot of content here, so I expect we'll be revising it until just a few days before publication
<jugglinmike> Matt_King: But I get the feeling that this is already in a very high-value state

[adampage]

Heya @jongund, just finished reviewing the reworked Contrast Themes section. Lots of great new info. 👍🏻 I added a few new suggestions.

[mcking65]

@howard-e

The preview timestamp updates, but the preview page is still not reliably updating.

[mcking65]

This doesn't seem clear to me. The author doesn't know the user's chosen color. Shouldn't this say which system color to use?

[mcking65]

This is the first mention of currentcolor. It seems out of place. At this point, we have some explanation of the fact that the browser uses system colors for replacement colors, but no understanding of how currentcolor is relevant to authors. We don't have any explanation of currentcolor, and we don't seem to have a link to MDN for it.

[howard-e]

@howard-e

The preview timestamp updates, but the preview page is still not reliably updating.

@mcking65 there was bad netlify cache in the generated build that needed a refresh. It's resolved now

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2991 - Practice Page for Supporting color settings.

The full IRC log of that discussion

<jugglinmike> topic: PR 2991 - Practice Page for Supporting color settings
<jugglinmike> github: https://github.com//pull/2991
<jugglinmike> Matt_King: Please open the "preview" link which is listed at the top of the pull request
<Jem> https://deploy-preview-380--aria-practices.netlify.app/aria/apg/practices/color-settings/
<Matt_King> link to preview of practice page:
<Matt_King> https://deploy-preview-380--aria-practices.netlify.app/aria/apg/practices/color-settings/
<jugglinmike> howard-e: There was a bug with the Netlify cache which impacted this pull request and a few others from around the same time. I have since logged in to the Netlify account and manually refreshed it
<jugglinmike> Matt_King: There is a section titled "Contrast themes forced colors"
<jugglinmike> Matt_King: This is primarily about what Microsoft Windows does
<jugglinmike> Matt_King: This has turned into a really long section
<jugglinmike> Matt_King: There's a lot of really good information here, but I'm really kind of worried about the primary messages getting lost or not being clear from the top
<jugglinmike> Matt_King: I'm kind of wondering what the primary messaging should be--that's the question I put into today's agenda
<jugglinmike> Matt_King: At a high level, I feel like the structure might not support the messaging
<jugglinmike> Matt_King: One of the first questions I have is, if somebody is using all native HTML and no ARIA at all, is it the case that these contrast themes will just work well with the way browsers use system colors? In general, is that the simplest way to support the contrast themes?
<jugglinmike> Adam_Page: When you said, "no ARIA", did you also mean "no custom CSS"
<jugglinmike> Matt_King: I didn't mean that, but maybe when we talk about CSS, we talk about the changes to hover, etc.
<jugglinmike> Adam_Page: I heard "no ARIA", and my instant reaction was "how can ARIA even effect this, anyway?"
<jugglinmike> sarah4: That was also my question
<lola4> ditto
<jugglinmike> Matt_King: If somebody makes a "div" with a "role" of "button", that button is going to end up looking like text because the browser does nothing with the semantics of that button (e.g. it won't give it the system colors that are related to buttons)
<jugglinmike> Matt_King: So I'm wondering, is "message number 1". Is it true that if you don't use ARIA, you will automatically get a page that works well with contrast themes?
<jugglinmike> sarah4: Yes, there are other ways to break it. You can break it with CSS, as well.
<jugglinmike> Matt_King: Okay, so I guess we don't want to give the primary message of "just use native elements, and you're better off"
<jugglinmike> Matt_King: I wonder if we even address these issues in this content...
<jugglinmike> sarah4: There could be meaningful color. Imagine that you have icons with people that are accompanied by a colored dot whose color describes each person's status
<jugglinmike> sarah4: You could easily design something whose focus outline is not super-visible in high-contrast mode
<lola4> q+
<jugglinmike> sarah4: There are a lot of cases where you actively need to design things to be visible in high-contrast mode
<jugglinmike> Matt_King: Some of those sound like they would be related to customized widgets
<jugglinmike> sarah4: I don't remember if "select" adopts actual colors from Windows high-contrast themes...
<jugglinmike> sarah4: If you're building a menu, for instance, you could build it with "button". That would give it slightly different border colors in high-contrast mode
<jugglinmike> Matt_King: I guess what I feel like we're missing here in terms of high-level messaging is, we don't even have a recipe for people to follow. This is for a "practice" page, after all.
<sarah4> q+
<jugglinmike> Matt_King: It feels like what we don't have anywhere in this section is like a recipe. "Add this many cups of flour and this many cups of sugar, and you'll get there"
<jugglinmike> Matt_King: Is a simple five-step recipe a way to support forced-colors--surely that has to be a feasible idea. We can do that, right?
<jugglinmike> lola4: Why are we not relying on the current accessibility advice when it comes to color?
<jugglinmike> lola4: Is there something in that advice which doesn't apply here?
<jugglinmike> Matt_King: We are relying on the standard color advice; it's linked here like ten times
<jugglinmike> Matt_King: The list of things you need to do or consider in order for a contrast theme to work well with your page
<jugglinmike> Matt_King: When I read this section, now, it reads to me like a ton of confusing information
<jugglinmike> sarah4: Another way to screw up is using the wrong background color or a box-shadow to differentiate the boundaries, and when you enable high-contrast mode, that becomes imperceptible
<sarah4> ack me
<sarah4> ack lola
<jugglinmike> sarah4: I think the problem is the way to design for high-contrast mode is similar to designing for everything else--you really need to turn it on and audit everything to make sure it all looks good
<lola4> Sarah got to what I was trying to say lol
<jugglinmike> CurtBellew: The question is, "do I see everything the way that I should?"
<jugglinmike> Matt_King: Yeah. If you could share a link to your tips in the minutes, sarah4, along with a link to Melanie's article...
<jugglinmike> Matt_King: One of the things that jon had been talking a lot about were the advantages of using system color over current color, but this copy right now addresses current color, first
<jugglinmike> sarah4: I think I threw something in about svg's for icons with current-color
<jugglinmike> Matt_King: Adam_Page raised a point (and made a couple suggestions that got committed) that were related to "current color" camel-casing
<sarah4> Dropping the zoom comment on article links here too:
<sarah4> Melanie’s Edge blog: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
<sarah4> My tips: https://sarahmhigley.com/writing/whcm-quick-tips/
<sarah4> Adrian has a post too: https://adrianroselli.com/2021/02/whcm-and-system-colors.html
<jugglinmike> Adam_Page: It was pretty editorial, but I found different instances of capitalization, and I lost track of what Jon was communicating
<jugglinmike> Matt_King: Is there a difference between "current color" as a concept and using "current-color" keyword as a technique
<jugglinmike> Adam_Page: It's really a technical writing question. I don't think there is a concept which is distinct from the keyword
<jugglinmike> Matt_King: Right now, just getting it consistent on this page would be good
<jugglinmike> Matt_King: I looked at the MDN article, and I don't remember seeing it camel-cased there
<jugglinmike> sarah4: Functionally, you can type either, and it will work. I use camel-case because it's what's in the CSS spec and it seems more pedantically correct
<jugglinmike> Matt_King: If there's no such thing as a clear concept where I would use "current color", then I'm going to adjust the phrasings so we're consistently talking about the "currentColor" keyword, and I will camel-case it
<jugglinmike> Matt_King: Adam_Page also made a suggestion related to nested CSS which was beyond me
<jugglinmike> Matt_King: Jon said that it was an editorial decision which he would leave to me
<jugglinmike> Adam_Page: That was a super-soft suggestion and also not specifically related to high-contrast (the content of this effort)
<jugglinmike> Adam_Page: It's only because I'm still new to the APG that I find myself having these ideas during code reviews
<jugglinmike> Adam_Page: Where I am seeing opportunities to modernize the language and make it easier for folks to understand
<jugglinmike> Adam_Page: I've had similar suggestions in other PRs
<jugglinmike> Adam_Page: This is one where, to me eyes, using native nested CSS would make it cleaner and more readable, as a reference
<jugglinmike> Adam_Page: There are five or so code blocks. I picked on just one knowing that this would be a much bigger conversation
<jugglinmike> Matt_King: Well, just because we make THIS page more readable... In the pages of the APG itself, you don't see any CSS. This is a very exceptional page
<jugglinmike> Matt_King: Of course, if you go to the examples, you see CSS. But that would be a separate conversation--one that would involve the code guide
<jugglinmike> Matt_King: We don't have to get into the code guide if we're only discussing the code samples that are present on this page
<jugglinmike> Matt_King: Anybody think it would be a problem if we accepted Adam_Page's suggestion?
<jugglinmike> howard-e: No problems, here. I'm also in support. For what it's worth, I've been using styled components in post-processors in Motion et. al for some time. I'll always support the approach that Adam_Page suggested here
<jugglinmike> Matt_King: If we accept the one commit that you made there, would you be up for making similar suggestions for the other examples on the page
<jugglinmike> Adam_Page: I'm up for that
<jugglinmike> Adam_Page: I'm glad you mentioned the code guide. I was aware that it existed, but I haven't reviewed it very thoroughly. I've had an itch in the back of my head about what APG supports in terms of browser versions
<jugglinmike> Adam_Page: I feel like we should conform to that code guide throughout the APG
<jugglinmike> Matt_King: With a large project like this, it can be had to evolve all the code at once
<jugglinmike> Matt_King: Right now, we make the code guide be our aspirational bar--it's what we use for anything new that comes in.
<jugglinmike> Matt_King: If you think we need some changes to the CSS part of the code guide, Adam_Page, we'd gladly take a look at those, as well
<jugglinmike> Adam_Page: Great! One other thought I had along those lines was that now that Baseline is a thing, maybe we can start to reference it.
<jugglinmike> Matt_King: Could you raise an issue about this? And include an intro to Baseline?
<jugglinmike> Adam_Page: Absolutely
<jugglinmike> Matt_King: I feel like the best use of people's time right now might be to go off and read the two resources that sarah4 has shared. That might help shape this content better. It also might add to the timeline, but I think it's probably worth it
<jugglinmike> Matt_King: Any further questions or comments on this topic before we move on?
<jugglinmike> Matt_King: Hearing none, we'll move on. I really appreciate all the input!
<jugglinmike> s/lola4/lola/g
<jugglinmike> Matt_King: Our goal is to deliver something that's really practical and really useful to the community. I want to avoid falling into any rabbit holes, but at least give readers pointers to the rabbit holes

[adampage]

Hi @mcking65, here are suggestions for the remaining CSS blocks as we chatted about in today’s APG meeting.

[mcking65]

@jongund

After reviewing the resources that @smhigley mentioned in our last meeting, I think we need some more revisions before publishing. There are some important ways in which the current draft is incomplete or potentially incorrect.

For example, the section on invert colors incorrectly states that authors cannot detect the setting. However, one of the pages referenced in Sarah's article mentions inverted-colors - CSS: Cascading Style Sheets | MDN.

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