Colour Contrast Requirements
Colour contrast is the difference in brightness between text and the background behind it. When contrast is too low, text becomes hard or impossible to read — especially for people with low vision, colour blindness, or anyone using a phone outdoors.
WCAG sets clear, measurable contrast ratios, which makes this one of the easiest accessibility wins to check and fix.
The Minimum Ratios
Contrast is expressed as a ratio between the lightest and darkest colours. The required ratio depends on text size and whether the element is essential.
| Content | AA ratio | AAA ratio |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 19px bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
Frequently Asked Questions
How do you check contrast?
We use automated contrast checkers during design and development, comparing each text colour against its background to confirm it meets the target ratio.
Does this limit our brand colours?
Rarely. We can usually keep your brand palette and simply adjust shades or pair colours carefully so text stays readable.
If you need a hand with any of this, your Progressive Robot delivery team is ready to help. Raise a ticket from the Support area of your client portal or speak to your account manager and we will guide you through the next steps.