WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Colour contrast measurement techniques

for

Number of posts in this thread: 12 (In chronological order)

From: Steve Green
Date: Fri, Feb 17 2023 3:23PM
Subject: Colour contrast measurement techniques
No previous message | Next message →

The Understanding page for WCAG SC 1.4.3 contains a note that says "Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text CAN be evaluated with anti-aliasing turned off."

It says CAN rather than MUST, so there is no "right" way to make the measurement. For many years I used to measure the rendered colour, but I now record the author specified colour. To a large extent that is because anti-aliasing varies across browsers and operating systems and also because the colour you pick is highly arbitrary. If you pick one colour and someone else (usually the developer) picks another colour that gives a different pass/fail result, who is right?

I would be interested to hear how everyone makes the measurement to see if there is any sort of consensus. Do you use the author specified colour? Or pick a colour that approximates to how you perceive the overall colour to be? Or zoom the text so it is no longer anti-aliased? Or something else? What if none of the pixels approximate to how you perceive the overall colour to be?

There are some unusual cases where you probably have to measure the rendered colour, such as when text is viewed through a translucent layer, but I am mostly interested in the ordinary measurements we make every day.

Steve Green
Managing Director
Test Partners Ltd

From: Patrick H. Lauke
Date: Fri, Feb 17 2023 3:36PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

On 17/02/2023 22:23, Steve Green wrote:
> The Understanding page for WCAG SC 1.4.3 contains a note that says "Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text CAN be evaluated with anti-aliasing turned off."
>
> It says CAN rather than MUST, so there is no "right" way to make the measurement.

I believe that what that sentence is getting as is that this is a
possible way that can help an auditor test this SC...specifically to
make it easier to use something like a color picker to see the
unadulterated, not-anti-aliased color (instead of diving into the CSS to
see what the color is). A long-winded way to say that antialiasing is
not taken into account for the normative requirement (because it varies
by user agent, platform, user settings).

> For many years I used to measure the rendered colour, but I now record the author specified colour. To a large extent that is because anti-aliasing varies across browsers and operating systems and also because the colour you pick is highly arbitrary. If you pick one colour and someone else (usually the developer) picks another colour that gives a different pass/fail result, who is right?

You go by what's defined in the CSS.

> I would be interested to hear how everyone makes the measurement to see if there is any sort of consensus. Do you use the author specified colour? Or pick a colour that approximates to how you perceive the overall colour to be? Or zoom the text so it is no longer anti-aliased? Or something else? What if none of the pixels approximate to how you perceive the overall colour to be?

I usually zoom up the page a bit then use a color picker, but often
cross-check back in the CSS when I get results that are just on the cusp
(4.48:1 or something). And obviously I need to jump into devtools anyway
in cases where the text *might* be classed as large text, to see what
the exact computer font-weight and font-size are.

> There are some unusual cases where you probably have to measure the rendered colour, such as when text is viewed through a translucent layer, but I am mostly interested in the ordinary measurements we make every day.

The fact that what counts is the declared value in CSS is possibly not
explicitly clear in the understanding. I might add something to this to
that effect ... https://github.com/w3c/wcag/pull/3020

P
--
Patrick H. Lauke

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

From: Steve Green
Date: Fri, Feb 17 2023 3:54PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

Thanks Patrick. I now use the same process as you. However, I suspect that a lot of people don't.

If the intention of the success criterion is that we are supposed to use the author specified colour, I would say that it totally fails to convey that. In fact, the normative text starts with "The visual presentation of text...", which could easily be interpreted as meaning the rendered appearance.

Steve


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: 17 February 2023 22:37
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Colour contrast measurement techniques

On 17/02/2023 22:23, Steve Green wrote:
> The Understanding page for WCAG SC 1.4.3 contains a note that says "Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text CAN be evaluated with anti-aliasing turned off."
>
> It says CAN rather than MUST, so there is no "right" way to make the measurement.

I believe that what that sentence is getting as is that this is a possible way that can help an auditor test this SC...specifically to make it easier to use something like a color picker to see the unadulterated, not-anti-aliased color (instead of diving into the CSS to see what the color is). A long-winded way to say that antialiasing is not taken into account for the normative requirement (because it varies by user agent, platform, user settings).

> For many years I used to measure the rendered colour, but I now record the author specified colour. To a large extent that is because anti-aliasing varies across browsers and operating systems and also because the colour you pick is highly arbitrary. If you pick one colour and someone else (usually the developer) picks another colour that gives a different pass/fail result, who is right?

You go by what's defined in the CSS.

> I would be interested to hear how everyone makes the measurement to see if there is any sort of consensus. Do you use the author specified colour? Or pick a colour that approximates to how you perceive the overall colour to be? Or zoom the text so it is no longer anti-aliased? Or something else? What if none of the pixels approximate to how you perceive the overall colour to be?

I usually zoom up the page a bit then use a color picker, but often cross-check back in the CSS when I get results that are just on the cusp
(4.48:1 or something). And obviously I need to jump into devtools anyway in cases where the text *might* be classed as large text, to see what the exact computer font-weight and font-size are.

> There are some unusual cases where you probably have to measure the rendered colour, such as when text is viewed through a translucent layer, but I am mostly interested in the ordinary measurements we make every day.

The fact that what counts is the declared value in CSS is possibly not explicitly clear in the understanding. I might add something to this to that effect ... https://github.com/w3c/wcag/pull/3020

P
--
Patrick H. Lauke

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

From: Patrick H. Lauke
Date: Fri, Feb 17 2023 4:09PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

On 17/02/2023 22:54, Steve Green wrote:
> Thanks Patrick. I now use the same process as you. However, I suspect that a lot of people don't.
>
> If the intention of the success criterion is that we are supposed to use the author specified colour, I would say that it totally fails to convey that. In fact, the normative text starts with "The visual presentation of text...", which could easily be interpreted as meaning the rendered appearance.

"WCAG in 'fails to convey what it actually means' shocker..." :D

P
--
Patrick H. Lauke

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

From: glen walker
Date: Fri, Feb 17 2023 4:41PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

If available, I always go to the CSS to get the real color value. However,
if the CSS color also uses opacity (the 4th parm when using rgba) (I think
Steve alluded to this when he said "text is viewed through a translucent
layer"), then I'll look at the rendered color.

Sometimes I'll use a color picker if I'm in a hurry and just need a rough
estimate of the ratio. As Patrick inferred, if the ratio is way off from
4.5:1 (or 3:1), then it doesn't matter if I have it exactly right. Only
the borderline cases need a more exact number, although in border cases, if
the contrast was 4.4, which technically fails, making the color 4.5 will
probably not make much of a visual difference.

When trying to snag the color from the rendered text, I often zoom to 200%
or bigger and try to get a "straight line" character that has less
anti-aliasing. For example, a capital H or the left side of B or b. Any
letter that has a long straight section. I never snag from the curved part
of a letter because that has the most anti-aliasing.

From: Patrick H. Lauke
Date: Fri, Feb 17 2023 4:45PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

Closing the loop here, I've snuck in a further proposed addition/change
to the understanding document (mainly because changing the definition
itself will be considered a normative change which needs a lot more
process to get through)

https://github.com/w3c/wcag/pull/3020#issuecomment-1435399458

P
--
Patrick H. Lauke

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

From: jeffgutsell@fuse.net
Date: Sat, Feb 18 2023 1:37PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

This thread has me wondering whether I have been checking contrast ineffectively.
I have not been able to see an eye dropper tool for 10 years or more. When I have doubts about color combinations these days, I just plug them into the Webaim tool.
Is that an incomplete means of monitoring contrast?

Jeff Gutsell

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Friday, February 17, 2023 6:45 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Colour contrast measurement techniques

Closing the loop here, I've snuck in a further proposed addition/change to the understanding document (mainly because changing the definition itself will be considered a normative change which needs a lot more process to get through)

https://github.com/w3c/wcag/pull/3020#issuecomment-1435399458

P
--
Patrick H. Lauke

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

From: glen walker
Date: Sat, Feb 18 2023 1:44PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

I mainly use an eyedropper tool out of laziness. I bring up the code
inspector for the element I want to inspect and look at the CSS color for
the text. But rather than type the RGB value from the CSS into a contrast
checker, I use an eyedropper to choose the CSS color sample that's shown in
the code inspector. That's just a minor variation of what you are doing,
Jeff. We're bothing using a contrast tool. Whether you type the RGB value
or use a color picker shouldn't matter (assuming the color picker is used
on a solid color from the CSS and not an anti-aliased color).


On Sat, Feb 18, 2023 at 1:38 PM < = EMAIL ADDRESS REMOVED = > wrote:

> This thread has me wondering whether I have been checking contrast
> ineffectively.
> I have not been able to see an eye dropper tool for 10 years or more. When
> I have doubts about color combinations these days, I just plug them into
> the Webaim tool.
> Is that an incomplete means of monitoring contrast?
>
> Jeff Gutsell
>
>

From: Kevin Prince
Date: Mon, Feb 20 2023 3:51PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

I measure the colours as specified (i.e. as delivered by the code. Without checking again that's my recall of the checkpoint) for pass/fail but if that produces an effect that is apparently less than ideal I will mention that the font styling could be an issue and suggest changing font/weight/colour as an observation.

Kevin


Kevin Prince
Product Accessibility & Usability Consultant

From: Patrick H. Lauke
Date: Mon, Feb 20 2023 3:58PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

On 20/02/2023 22:51, Kevin Prince wrote:
> I measure the colours as specified (i.e. as delivered by the code.
> Without checking again that's my recall of the checkpoint) for pass/fail

It's not been made quite explicit, but hoping to strengthen that aspect
in the understanding...
https://github.com/w3c/wcag/pull/3020#issuecomment-1435399458

--
Patrick H. Lauke

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

From: Kevin Prince
Date: Mon, Feb 20 2023 3:58PM
Subject: Re: Colour contrast measurement techniques
← Previous message | Next message →

If I'm really unsure about the rendered effect I often change the resolution of the colour picker to cover say 2x2 or 3x3 pixels which gives an averaged value. But that's food for a comment not the normative pass/fail. Actually, looks like that option isn't available anymore in the CCA (Which is a shame). It's been a while since I used it.

Kevin
Kevin Prince
Product Accessibility & Usability Consultant

From: Kevin Prince
Date: Tue, Feb 21 2023 1:51PM
Subject: Re: Colour contrast measurement techniques
← Previous message | No next message

My memory was that it was explicit but I haven't referred back in a while. I suspect I'd mulled it over a bit and arrived at that understanding. I think your proposal is spot on. I guess there's two levels to my thought:
1. Does it pass the technical requirement (Sadly that's what some customers want/need)
2. Does it effectively work in the real world (hence including the observation )

Thanks for that comment on the guidance.

K
Kevin Prince
Product Accessibility & Usability Consultant