WebAIM - Web Accessibility In Mind

E-mail List Archives

Color contrast for graphical objects


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

I am trying to confirm color contrast requirements for graphical

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


"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
Design Mentor and Host of the Design Domination podcast