Non-text Contrast of 3:1 Might Be Too Restrictive

[alflennik]

I am a contributor to the WAI website and am currently working on the ARIA Practices Guide, and I recently received feedback that the border of a table I was working on did not have a sufficient contrast level of 3:1.

Instead of fixing it for the individual table I was working on, I decided to create an issue in order to fix the contrast across the entire ARIA Practices website. Maybe you can see where this is going, but I quickly found that the issue actually extends beyond the ARIA Practices website, because those styles are originating inside the overall WAI website. And since WCAG is part of the WAI website, this issue actually extends to the WCAG website itself.

Here are two examples that I want to highlight:

• Most if not all of the tables on the WAI website fail the guidance, for example the table on this page has borders of #BCCBD3, which have 1.66:1 contrast: https://www.w3.org/WAI/test-evaluate/
• On the WCAG quick guide, where it describes the non-text contrast guidance (!), there is an "Understanding WCAG 1.4.11" button which has a border color of #CCC, which has 1.6:1 contrast: https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast

Also, as I was checking the contrast, I noticed that even Webaim's contrast checker failed the guidance with the color of the border surrounding the foreground and background boxes being #CCC, which has a 1.6:1 contrast level: https://webaim.org/resources/contrastchecker/

It seems to me that if WAI, WCAG, ARIA and ARIA Practices do not follow their own guidance, the issue should be corrected immediately because it is an example of, arguably, hypocrisy.

But instead of rushing to update all the UI elements across the entire W3C accessibility infrastructure, including WCAG, perhaps it makes sense to pause and consider whether the guidance itself might be too restrictive. Many people have created these accessibility-oriented sites and prioritized contrast in their design, implementation and review. Contributing to the ARIA Practices Guide, I can anecdotally report that I have heard contrast mentioned many times. Maybe the failure of the WCAG specification website is not an embarrassing failure but a hint.

I think a contrast value of 1.5:1 makes sense, because it seems to be the implicit value the WCAG website itself treats as sufficient. This would mean a border of #CCC would be acceptable but #DDD would not.

And if we decide that a level of 3:1 is something we want to stand behind, we should actually stand behind that value in practice rather than just in words.

[patrickhlauke]

note that 1.4.1 Non-text Contrast doesn't require that every non-text element must have a contrast of 3:1. Only the ones that are required for understanding/convey meaning. taking the two examples you gave:

• the table on https://www.w3.org/WAI/test-evaluate/ - assuming you mean the Summary one at the top ... even without borders, its meaning/content is clear, so it does not need to meet the contrast requirement. it's just a bit of non-essential eye candy for those who can perceive it
• the "Understanding..." buttons https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast ... even without their border, their position/spacing gives a visual clue that they're most likely actionable things rather than just plain text, so again the border is not essential

so those two things you mentioned are not actually falling under the normative requirements of the SC, in my view.

And if we decide...

Also, note that this isn't just a "hey, can we just decide to change this?" set of guidelines. they're referenced by other standards and legislations, not just something we can change willy-nilly. normative changes to the standard need to be thoroughly discussed, decided upon by the working group, etc.

[patrickhlauke]

for the buttons, see for instance the explanation in the actual understanding document under the "Boundaries" heading https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[alastc]

A good rule of thumb here is: If you removed those graphical elements, can you still understand it?
(That's a re-stating of the "Visual information required to identify..." and "required to understand the content...".)

@alflennik is Patrick's response above reasonable? If you don't have any other questions we can close this thread.

[alflennik]

Thanks for the quick and helpful replies @patrickhlauke and @alastc. The link Patrick sent goes into depth about the 3:1 requirement, and I see that buttons are explicitly not required to conform to the 3:1 requirement and tables are not mentioned as examples of the requirement either. I think this clears it up for me. Thank you!