UX Glossary · C
Contrast ratio
The measured difference in relative luminance between two colours, and the basis of WCAG text requirements.
Contrast ratio expresses the difference in relative luminance between two colours as a figure between 1:1 (identical) and 21:1 (pure black on pure white). It is calculated from luminance, not from how different the colours look, which is why two colours that feel distinct can still fail.
The thresholds that matter
WCAG 2.2 success criterion 1.4.3 requires, at level AA:
- 4.5:1 for normal text
- 3:1 for large text, meaning at least 18pt, or 14pt bold
Success criterion 1.4.11 requires 3:1 for user interface components and meaningful graphics, which covers input borders, icons carrying meaning, and focus indicators. Level AAA raises text to 7:1.
The traps
Brand colours frequently fail. A mid-tone brand colour is often fine as a background behind dark text and unusable as text on white. The fix is a darker variant reserved for text rather than an exception to the rule.
Placeholder text is text. Grey-on-grey placeholders are one of the most common failures, and they are worse than they look because the placeholder often carries the only instruction.
Disabled controls are exempt, and that is not permission. A disabled control nobody can read is still a control nobody can read.
In practice
Check at design time, not at handoff. Contrast failures found after a palette has been signed off are the most expensive kind, because the argument is no longer technical.