Color Contrast
The luminance difference between foreground and background.
Color contrast is the difference in brightness between text (or UI elements) and their background. Sufficient contrast is essential for legibility — especially for users with low vision — and is governed by WCAG ratios (4.5:1 for normal text).
Beyond accessibility, contrast is a core tool of visual hierarchy: high contrast draws attention, low contrast recedes.
Key characteristics
- The luminance difference between foreground (usually text) and background.
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components.
- Critical for low-vision users, colour blindness and bright-sunlight readability.
- Checkable with tools that compute the ratio from two colour values.
Example
Light grey text on a white card may look elegant but fail at 2:1 contrast — bumping it to a darker grey reaches 4.5:1 and becomes readable for everyone.
Frequently asked questions
What contrast ratio do I need for accessibility?
WCAG 2.2 AA requires at least 4.5:1 for normal text, 3:1 for large text (24px, or 19px bold) and 3:1 for meaningful UI elements and graphics.
Does colour contrast only matter for text?
No. Icons, form borders, focus indicators and other meaningful UI elements also need sufficient contrast (typically 3:1) so all users can perceive them.