WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Color contrast for graphical objects

for

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

From: Colleen Gratzer
Date: Sun, Jan 26 2020 11:10AM
Subject: Color contrast for graphical objects
No previous message | Next message →

I am trying to confirm color contrast requirements for graphical
objects.

This WebAIM color checker page at
https://webaim.org/resources/contrastchecker/ says:

"WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and
user interface components (such as form input borders)."

But this W3C page
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)#Notes_on_how_the_contrast_and_thickness_were_derived

says:

"Graphics that are very thin are harder to perceive, therefore have a
higher contrast requirement of 4.5:1. Graphics that are thicker or are
solid shapes have a lower requirement of 3:1."

Is it just that the WebAIM page does not go into detail about this, and
that, yes, form field borders, buttons and icons that are thin do in
fact need to meet a 4.5:1 ratio?

Thank you!

Colleen Gratzer
Certified Branding Expert + Accessibility Specialist, Gratzer Graphics
LLC
https://gratzergraphics.com
Design Mentor and Host of the Design Domination podcast
http://creative-boost.com

From: Patrick H. Lauke
Date: Sun, Jan 26 2020 11:42AM
Subject: Re: Color contrast for graphical objects
← Previous message | Next message →

On 26/01/2020 18:10, Colleen Gratzer wrote:
> I am trying to confirm color contrast requirements for graphical objects.
>
> This WebAIM color checker page at
> https://webaim.org/resources/contrastchecker/ says:
>
> "WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and
> user interface components (such as form input borders)."
>
> But this W3C page
> https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)#Notes_on_how_the_contrast_and_thickness_were_derived
>
>
> says:
>
> "Graphics that are very thin are harder to perceive, therefore have a
> higher contrast requirement of 4.5:1. Graphics that are thicker or are
> solid shapes have a lower requirement of 3:1."
>
> Is it just that the WebAIM page does not go into detail about this, and
> that, yes, form field borders, buttons and icons that are thin do in
> fact need to meet a 4.5:1 ratio?

That wiki page is not the official normative specification. It was last
updated in Feb 2017, before WCAG 2.1's final version. The normative
requirement for SC 1.4.11 is 3:1. And even in the understanding document
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
there's no mention of any stricter ratio requirements.

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: Colleen Gratzer
Date: Sun, Jan 26 2020 1:37PM
Subject: Re: Color contrast for graphical objects
← Previous message | No next message

Thank you, Patrick. That's what I thought and what I had been going by,
and then I came across that page and got confused.

I appreciate the clarification.

Colleen


> That wiki page is not the official normative specification. It was
> last updated in Feb 2017, before WCAG 2.1's final version. The
> normative requirement for SC 1.4.11 is 3:1. And even in the
> understanding document
> https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
> there's no mention of any stricter ratio requirements.
>
> P