WebAIM - Web Accessibility In Mind

E-mail List Archives

Color contrast for graphical objects

for

From: Colleen Gratzer
Date: Jan 26, 2020 11:10AM

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