WebAIM - Web Accessibility In Mind

E-mail List Archives

Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements

for

From: Gijs Veyfeyken
Date: Dec 4, 2018 2:07AM

Great resource for designers that tries to sum up everything you need to know about color and WCAG on https://webaim.org/articles/contrast/ <https://webaim.org/articles/contrast/>.

The section "Color-only identification of links" explains how difficult it is to come up with color combinations that suffice if links aren't underlined.
If I understand WCAG correctly, this is the case for all user interface components now, if a color change alone is used to indicate a state (hover or focus).

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html <https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html>
> If a control's indicator of state (e.g., button background) varies only by color this is acceptable if the luminosity contrast ratio between the colors of the states differ by at least 3:1, or if there is another indicator of state.

For example, if a button's background color changes on hover/focus and there's no border change or other visual difference, there are 4 contrast ratio requirements.

1. button text vs background color (4,5)
2. default background color vs surrounding color (3)
3. hover background color vs surrounding color (3)
4. default background color vs hover background color (3)

Perhaps it would be useful to emphasise this in the article?

Kind regards,

Gijs

---
Gijs Veyfeyken
AnySurfer - towards an accessible internet
http://www.anysurfer.be/en
Brussels - Belgium