Add Practice Page for Supporting Color Contrast Settings - #2991
Add Practice Page for Supporting Color Contrast Settings#2991mcking65 wants to merge 293 commits into
Conversation
|
@mcking65 |
mcking65
added this to the
2024-06-25 APG publication pull requests for June 25, 2024 milestone
|
The ARIA Authoring Practices (APG) Task Force just discussed 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 |
|
@mcking65 |
|
The ARIA Authoring Practices (APG) Task Force just discussed 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 |
|
I have been doing more investigation on supporting user high contrast settings. There needs to be a little bit of a deep dive on this issue in the working group. I added some feature tables to the current draft for high contrast support to help identify some of the issues we need to address in the practice and examples.
I will be out of town on June 25th, but I should be there for the July 9th meeting. |
|
@mcking65 Should I add another column with Firefox and Windows rendering? |
…r contrast schemes
…practices into high-contrast-practice
|
@mcking65 |
Simplify instructions for supporting color schemes. Remove link to medium article.
| <tr> | ||
| <th>System Color</th> | ||
| <th>Contrast Theme Color</th> | ||
| <th>Computed Color (Chromium)</th> |
There was a problem hiding this comment.
Could we make two changes to this table?
-
Add a column for Firefox custom contrast that shows the name of the Firefox setting that corresponds to the system color.
-
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.
|
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? |
… better describe it as a web platform feature
| The following table shows the twenty-three system color keywords and indicates which are supported in the Windows, Firefox, and Chromium implementations. | ||
| </p> | ||
| <table class="data"> | ||
| <caption>System Colors Supported by Various Contrast Theme Implementations</caption> |
There was a problem hiding this comment.
@jongund
This table is now moved and has its full context. Could you please complete this table as described by its new context?
| <li><a href="../../patterns/slider/examples/slider-rating.html">Rating Slider</a></li> | ||
| </ul> | ||
|
|
||
| <h3>Supporting Contrast Themes</h3> |
There was a problem hiding this comment.
This section was missing. Could you please draft content for it that is similar in form to the section on supporting color schemes?
|
The ARIA Authoring Practices (APG) Task Force just discussed 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 |
…hemes among Windows, Firefox, and Chrome.
It does not appear that Windows has an accessibility setting that will set prefers contrast more. Also corrected URL for windows contrast themes
…stent List desktop in order mac, win, linux The mobile in order iOS, Android
| <th>ActiveText</th> | ||
| <td>Hyperlink</td> | ||
| <td> | ||
| <div role="img" class="sample" aria-label="Active text is red" style="background-color: activetext;"> |
There was a problem hiding this comment.
@jongund is it OK to change `activetext` to `activeText`, or do we need to add `activetext` to the cspell config?
| <div role="img" class="sample" aria-label="Button border is black" style="background-color: buttonborder;"></div> | ||
| <div class="color">#000000</div> |
There was a problem hiding this comment.
@jongundis it OK to change buttonborder to buttonBorder, or do we need to add buttonborder to the cspell config?
11 participants
Part of the resolution of issue #2864.
Preview Links
WAI Preview Link (Last built on Fri, 21 Aug 2026 05:52:26 GMT).