Use of color quiz
Use of color practice
Swipe right if it passes WCAG, left if it fails. Or use the buttons or your arrow keys.
The rule in plain words
WCAG 1.4.1 Use of Color
Color can support meaning, but it cannot be the only way something is shown. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency.
If removing color would hide information, like which field has an error or which line is which in a chart, add text, an icon, a pattern or an underline.
| What | Needs |
|---|---|
| Links in text without underline | 3:1 vs body text, plus a cue on hover and focus |
| Everything else | A non-color cue |
Exceptions people miss
- Color that is purely decorative and carries no meaning.
- Information that is also given in text right next to it.
Common mistakes
- Links that are only a different color from the paragraph.
- Form errors shown only as a red border.
- "Fields in red are required" instructions.
- Red and green chart lines with a color dot legend.
- Status dots without a word next to them.
Your turn
Is your own site accessible or not?
Axeazy scans your real pages for WCAG issues like the ones in this deck and opens code fixes, not an overlay. Free scan in 60 seconds, no credit card.
Questions
Use of color, answered
Do links have to be underlined?
Underlines are the simplest fix. Without one, a link needs 3:1 contrast against the surrounding text plus an extra cue on hover and focus.
Is a red error border enough?
No. Add an icon and a text message that says what is wrong and how to fix it.
Is 1.4.1 the same as contrast?
No. Contrast is about how light or dark things are. 1.4.1 is about color being the only signal.