Colour & Contrast

Colour contrast refers to the difference in luminance between foreground text
and its background. Sufficient contrast ensures that text is readable by users
with low vision, colour blindness, or those viewing screens in bright conditions.
^[1]

---

Contrast ratios

WCAG defines contrast as a ratio between the relative luminance of the lightest
and darkest colours being compared.
^[1]

Criterion	Minimum ratio	Applies to
1.4.3 AA (normal text)	4.5:1	Text under 18pt or 14pt bold
1.4.3 AA (large text)	3:1	Text 18pt+ or 14pt+ bold
1.4.11 (UI components)	3:1	Focus indicators, form borders, icons
1.4.6 AAA	7:1	Enhanced contrast for normal text

---

What is excluded

The following do not have contrast requirements:

• Decorative text that conveys no information
• Text in logos or brand wordmarks
• Disabled interface components
• Incidental text in images

^[2]

---

Colour alone

WCAG 1.4.1 requires that colour is not used as the only visual means of
conveying information, indicating an action, prompting a response, or
distinguishing a visual element.
^[3]

Common failures include:

• Error messages shown only in red with no icon or text label
• Required fields indicated only with a colour change
• Links distinguished from surrounding text only by colour with no underline

Always pair colour with a secondary indicator — an icon, a pattern, a text
label, or an underline.

---

Non-text contrast

WCAG 1.4.11 extends contrast requirements to user interface components and
graphical objects. This includes:

• Form input borders (must contrast 3:1 against the background)
• Focus indicators
• Chart data points and graph lines
• Icons that convey meaning

^[2]

---

Testing contrast

Use a colour contrast analyser to test foreground/background combinations.
The W3C provides a contrast checking algorithm, and tools such as the WebAIM
Contrast Checker or browser DevTools accessibility panels can calculate ratios
directly from inspected elements.

Test in context — gradients, image backgrounds, and semi-transparent overlays
require checking the actual rendered colours, not the CSS values alone.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.3: Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.11: Non-text Contrast. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html ↑
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.1: Use of Colour. https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html ↑