Colour Contrast
Colour contrast describes the visual difference between foreground and background colours.
In accessibility, contrast requirements help ensure that text and important interface elements remain distinguishable for people with low vision or reduced contrast sensitivity.
What It Measures
WCAG expresses contrast as a ratio between two colours.
For WCAG Level AA, normal text generally needs a contrast ratio of at least 4.5:1, while large text generally needs at least 3:1.
Important non-text interface components and graphical objects can have separate contrast requirements.
How It Is Measured
Contrast tools compare the relative luminance of foreground and background colours and return a ratio.
Testing should use the actual colours displayed together rather than judging contrast by eye.
Different states also matter. A button may pass in its normal state but become difficult to distinguish when focused, hovered, selected, or disabled.
Why It Matters
Text can technically exist on the page while still being difficult or impossible for someone to read.
Low contrast particularly affects people with low vision, colour-vision differences, aging-related vision changes, and people using screens in difficult viewing conditions.
Common Problems
Common contrast issues include:
- Light grey body text
- Text placed over photographs
- Brand colours used together without testing
- Placeholder text with weak contrast
- Focus states that disappear against some backgrounds
- Buttons whose states are distinguished only by subtle colour changes
How to Improve
Define accessible colour combinations as part of the design system rather than testing every use from scratch.
Check text, controls, icons, boundaries, and interactive states during both design and accessibility auditing.