WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast - where to measure?

for

From: Mobley, Mary Lou
Date: Aug 16, 2023 8:09AM

It depends on the context. If there is a photo or graphic underlying the text, then the eye dropper tool is more accurate than the hex codes or RBG, as those will not accurately calculate the foreground-to-background contrast as they cannot discern the background color in these contexts (this is why automated color contrast checkers are often wrong). But if there is a white background or a colored background available in the code, then the coded RGB / hex codes provide a more accurate way of measuring contrast.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Wednesday, August 16, 2023 7:44 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Color Contrast - where to measure?

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Someone else might be able to explain this better.



My understanding is that using the coded RGB values is more accurate than using the eye dropper.



The reason for this is that sometimes the colors you see on the screen are created by combining pixels of various other colors. What the human eye perceives is the color of the combined pixels as a whole and not the individual pixel colors. The problem with the eye dropper is that it might only be sampling some of those individual pixels and thus is not reporting back the true color that is perceived by the human eye.



AT least that is my understanding. Hopefully someone else might be able to shed more light on this topic.



Thanks!

Tim

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Kevin Prince
Sent: Tuesday, August 15, 2023 4:45 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Color Contrast - where to measure?



Exactly my understanding too. You can advise that the colours chosen are sufficient but, due to smoothing etc the apparent effect makes it hard to read so a heavier/darker/different font treatment would help provide better accessibility and usability but not fail WCAG.

Kevin


Kevin Prince


Product Accessibility & Usability Consultant





Foster Moore


A Teranet Company






E <mailto: <EMAIL REMOVED> > <EMAIL REMOVED>


Christchurch


<http://www.fostermoore.com/>; fostermoore.com


-----Original Message-----
From: WebAIM-Forum < <mailto: <EMAIL REMOVED> >
<EMAIL REMOVED> > On Behalf Of Patrick H. Lauke
Sent: Tuesday, August 15, 2023 10:46 AM
To: <mailto: <EMAIL REMOVED> > <EMAIL REMOVED>
Subject: Re: [WebAIM] Color Contrast - where to measure?



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-f36712c2f81b39397d15f61ca6
0019fc91e91e6a0e080257a7ca481d667564e3R65>
https://github.com/w3c/wcag/pull/3020/files#diff-f36712c2f81b39397d15f61ca60
019fc91e91e6a0e080257a7ca481d667564e3R65

<https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html>
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://www.splintered.co.uk/ | <https://github.com/patrickhlauke> https://github.com/patrickhlauke <https://flickr.com/photos/redux/> https://flickr.com/photos/redux/ | <https://www.deviantart.com/redux> https://www.deviantart.com/redux <https://mastodon.social/@patrick_h_lauke>
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke http://webaim.org/discussion/archives
<EMAIL REMOVED>