Contrast Grid / Colour wall
WCAG Contrast Ratio Explained
Understand relative luminance, 4.5:1 and 3:1 thresholds, large-text rules and why a passing ratio is necessary but not sufficient.
Contrast ratio compares the relative luminance of two colours on a scale from 1:1 to 21:1. It is a property of the rendered colour pair, not a score for an entire brand or page. Use it with the intended text size, weight and component role.
Linearise sRGB before comparing
Hex channels are encoded values, not direct light output. The WCAG calculation converts each sRGB channel to a linear value, applies weighted luminance coefficients and compares the lighter and darker luminance with a small offset.
Attach thresholds to content
WCAG AA commonly uses 4.5:1 for normal text and 3:1 for qualifying large text. The large-text definition includes size and boldness; a marketing label does not become large merely because it feels prominent in a layout.
Check non-text contrast separately
Meaningful icons, controls, focus indicators and graphical objects can have a 3:1 adjacent-colour requirement. Decorative shapes and disabled controls may be treated differently, so identify the component purpose before applying a rule.
Inspect the actual rendering
Gradients, images, anti-aliasing, transparency, thin fonts and dynamic backgrounds can produce pixels unlike the entered hex pair. Sample the worst credible background and test zoom, high contrast modes and interactive states in the rendered interface.
Field checks
- Record foreground, background and intended role.
- Use the correct normal or large text category.
- Evaluate meaningful non-text boundaries.
- Resolve transparency against the real backing colour.
- Visually inspect the rendered component and states.
This guide summarises WCAG 2 contrast concepts and is not a certification. Conformance depends on the complete rendered experience and the applicable WCAG version and level.
| Signal | Record | Decision use |
|---|---|---|
| Normal text | ratio + font context | 4.5:1 AA target |
| Large text | size + weight evidence | 3:1 AA target |
| Non-text | adjacent component colours | 3:1 where applicable |