By the end of this lesson you can
- Apply WCAG contrast requirements to text and interface elements.
- Measure contrast with tools.
- Avoid relying on colour alone to convey meaning.
The idea
Contrast requirements (WCAG AA)
- Normal text: at least 4.5:1 against its background.
- Large text (about 24px regular or 18.66px bold and above): at least 3:1.
- Non-text elements such as input borders, icons and focus indicators: at least 3:1 against adjacent colours.
Level AAA asks for 7:1 for normal text. Disabled controls and pure decoration are exempt, but consider whether low-contrast disabled states are still understandable.
Measuring
Use a contrast checker or plugin in your design tool. Check text over images and gradients at the worst point, and check every theme, including dark mode and hover states.
Colour independence
WCAG 1.4.1 says colour must not be the only way to convey information. Pair colour with text, icons, patterns or position:
- Errors: red border plus icon and message.
- Charts: colours plus labels or patterns.
- Links in text: colour plus underline.
- Status: coloured dot plus a text label.
Why it matters in real projects
Low contrast affects people with low vision, older people (contrast sensitivity declines with age) and anyone using a phone in sunlight. About 1 in 12 men and 1 in 200 women have a colour vision deficiency, so colour-only cues exclude millions. Good contrast and colour independence also make interfaces faster for everyone to scan.
A realistic example
A project management tool shows task status with coloured dots only: green, amber and red. A colour-blind team lead cannot tell "on track" from "at risk", and light grey text on white fails contrast at 2.6:1.
The designer adds text labels ("On track", "At risk", "Blocked"), distinct icons and darkens the grey to meet 4.5:1. Testing with a colour blindness simulator confirms everything is distinguishable.
Step by step
Install a checker
Add a contrast plugin to your design tool.
Check text
Measure every text colour against its background.
Check UI elements
Measure borders, icons and focus indicators against neighbours.
Check every theme and state
Include dark mode, hover and disabled.
Find colour-only cues
Look for meaning conveyed only by colour.
Simulate
Use a colour blindness simulator and fix problems.
Common mistakes
Mistake Light grey text for secondary information.
Instead Check it meets 4.5:1.
Mistake Charts distinguished by colour only.
Instead Add labels or patterns.
Mistake Checking light theme only.
Instead Check every theme and state.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Contrast audit
Audit contrast and colour use on a dashboard.
Steps
- Measure contrast for all text and UI elements.
- List colour-only cues.
- Simulate colour blindness.
- Redesign failing elements.
Deliverable
A contrast table and redesigned elements.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Normal text needs 4.5:1, large text and UI elements 3:1.
- Measure with tools in every theme and state.
- Never rely on colour alone.
- Good contrast helps everyone.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.