E-mail List Archives
Thread: Color Contrast - where to measure?
Number of posts in this thread: 7 (In chronological order)
From: Brian Ward
Date: Mon, Aug 14 2023 4:12PM
Subject: Color Contrast - where to measure?
No previous message | Next message →
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?
Thanks,
Brian
*Brian Ward*
Instructional Technologist
Instructional Design and Technology
208-467-8359
Book a Meeting With Me <https://calendar.app.google/ecJNrPLxvaKMBjMY7>
*IDT Resources*
NNU Teaching Toolkit <https://nnu.instructure.com/courses/29924>
Canvas Guides <https://community.canvaslms.com/t5/Guides/ct-p/guides>
TA Request Form: Course Help
<https://docs.google.com/forms/d/e/1FAIpQLSfl5LRsJiVFpeTDZW2pihnUXMLO7WKMec-Mwj3noOz723b6Kg/viewform?usp=sf_link>
TA Request Form: Test Building
<https://docs.google.com/forms/d/e/1FAIpQLScAw_pB0UGP55Kw_0g1CajYktfVCTlirN1JC7mER8wauE0zTQ/viewform?usp=sf_link>
<https://www.nnu.edu?utm_source=signature&utm_medium=email&utm_campaign=nnu>
--
This e-mail message (including any attachments) is for the sole use of the
intended recipient(s) and may contain confidential, privileged, and/or
proprietary information. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this message (including any attachments) is strictly prohibited.
If you have received this message in error, please contact the sender by
reply e-mail message and destroy all copies of the original message
(including attachments).
From: Patrick H. Lauke
Date: Mon, Aug 14 2023 4:46PM
Subject: Re: Color Contrast - where to measure?
← Previous message | Next message →
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
From: Brian Ward
Date: Mon, Aug 14 2023 5:01PM
Subject: Re: Color Contrast - where to measure?
← Previous message | Next message →
Schalk,
That documentation definitely helps. It does seem to give priority to the
colors placed in the code over how the anti-aliasing creates a new color on
the user's screen. I would have hoped the priority would be the other way
around. I have a case where the color contrast between foreground and
background is at 5.5 according to the code, but in actuality, its about 2.5
as measured by the eyedropper in WCAG Color Contrast tool. That's due to
the very thin lines and anti-aliasing. The software vender says they are in
compliance. I was hoping to force to the issue and say no they are not, but
according to this documentation, they meet the letter of the law, but not
the spirit.
Brian
*Brian Ward*
Instructional Technologist
Instructional Design and Technology
208-467-8359
Book a Meeting With Me <https://calendar.app.google/ecJNrPLxvaKMBjMY7>
*IDT Resources*
NNU Teaching Toolkit <https://nnu.instructure.com/courses/29924>
Canvas Guides <https://community.canvaslms.com/t5/Guides/ct-p/guides>
TA Request Form: Course Help
<https://docs.google.com/forms/d/e/1FAIpQLSfl5LRsJiVFpeTDZW2pihnUXMLO7WKMec-Mwj3noOz723b6Kg/viewform?usp=sf_link>
TA Request Form: Test Building
<https://docs.google.com/forms/d/e/1FAIpQLScAw_pB0UGP55Kw_0g1CajYktfVCTlirN1JC7mER8wauE0zTQ/viewform?usp=sf_link>
<https://www.nnu.edu?utm_source=signature&utm_medium=email&utm_campaign=nnu>
On Mon, Aug 14, 2023 at 4:40â¯PM Schalk Neethling < = EMAIL ADDRESS REMOVED = >
wrote:
> Hey Brian,
>
> The following note from the web content accessibility guidelines page on
> color contrast for text makes for some interesting reading.
>
> "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."
>
> https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
>
> > refer to the foreground and background colors obtained from the user
> agent
>
> I assume this means getting the color values using the browser's developer
> tools, but perhaps picking the colors using a color picker from the page as
> displayed in the user agent also counts. I would be curious to know what
> others think.
>
> The above then also only covers text contrast, but there are also images
> of text and non-text contrast that are detailed separately.
>
> --Schalk Neethling
> Founder, Teacher, Frontend Engineer
> Mechanical Ink
> https://mechanical.ink
>
> ---
>
> Mechanical Ink Studio Podcasts
>
> The Mechanical Ink podcast
> https://pod.link/1657505237
>
>
> Join me in taking actionable steps to help the climate:
> http://bit.ly/3uDVT1c
>
> Sent with Proton Mail secure email.
>
> ------- Original Message -------
> On Tuesday, August 15th, 2023 at 00:12, Brian Ward via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > 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?
> >
> > Thanks,
> >
> > Brian
> >
> > Brian Ward
> > Instructional Technologist
> > Instructional Design and Technology
> > 208-467-8359
> > Book a Meeting With Me https://calendar.app.google/ecJNrPLxvaKMBjMY7
> >
> >
> > IDT Resources
> >
> > NNU Teaching Toolkit https://nnu.instructure.com/courses/29924
> >
> >
> > Canvas Guides https://community.canvaslms.com/t5/Guides/ct-p/guides
> >
> >
> > TA Request Form: Course Help
> >
> https://docs.google.com/forms/d/e/1FAIpQLSfl5LRsJiVFpeTDZW2pihnUXMLO7WKMec-Mwj3noOz723b6Kg/viewform?usp=sf_link
> >
> >
> > TA Request Form: Test Building
> >
> https://docs.google.com/forms/d/e/1FAIpQLScAw_pB0UGP55Kw_0g1CajYktfVCTlirN1JC7mER8wauE0zTQ/viewform?usp=sf_link
> >
> >
> >
> >
> https://www.nnu.edu?utm_source=signature&utm_medium=email&utm_campaign=nnu
> >
> >
> > --
> > This e-mail message (including any attachments) is for the sole use of
> the
> > intended recipient(s) and may contain confidential, privileged, and/or
> > proprietary information. If the reader of this message is not the
> intended
> > recipient, you are hereby notified that any dissemination, distribution
> or
> > copying of this message (including any attachments) is strictly
> prohibited.
> >
> > If you have received this message in error, please contact the sender by
> > reply e-mail message and destroy all copies of the original message
> > (including attachments).
> > > > > > > > >
--
This e-mail message (including any attachments) is for the sole use of the
intended recipient(s) and may contain confidential, privileged, and/or
proprietary information. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this message (including any attachments) is strictly prohibited.
If you have received this message in error, please contact the sender by
reply e-mail message and destroy all copies of the original message
(including attachments).
From: Kevin Prince
Date: Tue, Aug 15 2023 3:45PM
Subject: Re: Color Contrast - where to measure?
← Previous message | Next message →
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
From: tim.harshbarger@deque.com
Date: Wed, Aug 16 2023 7:43AM
Subject: Re: Color Contrast - where to measure?
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Kevin
Prince
Sent: Tuesday, August 15, 2023 4:45 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED =
Christchurch
<http://www.fostermoore.com/>; fostermoore.com
-----Original Message-----
From: WebAIM-Forum < <mailto: = EMAIL ADDRESS REMOVED = >
= EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Tuesday, August 15, 2023 10:46 AM
To: <mailto: = EMAIL ADDRESS REMOVED = > = EMAIL ADDRESS 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://list.webaim.org/
List archives at <http://webaim.org/discussion/archives>;
http://webaim.org/discussion/archives
= EMAIL ADDRESS REMOVED =
From: Mobley, Mary Lou
Date: Wed, Aug 16 2023 8:09AM
Subject: Re: Color Contrast - where to measure?
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Wednesday, August 16, 2023 7:44 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Kevin Prince
Sent: Tuesday, August 15, 2023 4:45 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED =
Christchurch
<http://www.fostermoore.com/>; fostermoore.com
-----Original Message-----
From: WebAIM-Forum < <mailto: = EMAIL ADDRESS REMOVED = >
= EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Tuesday, August 15, 2023 10:46 AM
To: <mailto: = EMAIL ADDRESS REMOVED = > = EMAIL ADDRESS 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 ADDRESS REMOVED =
From: Patrick H. Lauke
Date: Wed, Aug 16 2023 8:47AM
Subject: Re: Color Contrast - where to measure?
← Previous message | No next message
On 16/08/2023 15:09, Mobley, Mary Lou via WebAIM-Forum wrote:
> 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.
Yes, the difference here is that if it's text that is part of a bitmap
image, it's "baked into" the image, so not at the mercy of the user's
antialiasing/font-smoothing settings, nor is it zoom/size dependent (to
an extent anyway). Whereas for actual HTML (and SVG) text, all those
factors can play a role.
Not to mention potential issues with colour profiles set by the user
(depending on how the colour picker works, it may pick the colour
*before* the profile is applied, or *after*, and the latter then makes
it even more subjective/variable to make a pass/fail assessment)
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