WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast - where to measure?

for

From: Patrick H. Lauke
Date: Aug 14, 2023 4:46PM

On 14/08/2023 23:12, Brian Ward via WebAIM-Forum wrote:
> I am in discussions with Canvas LMS accessibility group about color
> contrast of many of their button/icons. When I check them with Color
> Contrast tools (via eyedropper) some of them fail contrast standards. When
> I pointed this out to Canvas, their reply was to show me the coding for the
> color of the text or icon (foreground) and background and that there is
> enough contrast.
>
> So my question is where is the standard applied? On the end user side via
> what their screen perceives, or in the underlying code? Is it what the
> eyedropper pulls up for color or what the programmer entered?
>
> The end user side is affected by font choice, line thickness, aliasing,
> etc., screen resolution, screen zoom settings, etc. I get that, but the
> eyedropper tool seems the best way to objectively pick up on what the
> perception is.
>
> Can anybody provide any documentation on this?

See the note that was added to understanding for 1.4.3 (and 1.4.6)

https://github.com/w3c/wcag/pull/3020/files#diff-f36712c2f81b39397d15f61ca60019fc91e91e6a0e080257a7ca481d667564e3R65

https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

"Because authors do not have control over user settings for font
smoothing/anti-aliasing, when evaluating this Success Criterion, refer
to the foreground and background colors obtained from the user agent, or
the underlying markup and stylesheets, rather than the text as presented
on screen."

Incidentally, this made me realise there's no direct equivalent for this
note in 1.4.11 (which would apply to your case of icons), but the
rationale is the same here...you can't evaluate based on the final
rendered output (as that's outside of the author's control), only based
on what the author actually defined (though you can then make best
practice recommendations in cases where the antialiasing/smoothing
causes text/icons to render with too low contrast in particular situations).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke