Accessible colours: WCAG contrast explained

Why contrast matters

Millions of people have low vision or colour blindness, or simply read their phone in bright sunlight. Light grey text on white may look elegant on the designer's monitor and be unreadable for many users. The WCAG guidelines define a measurable minimum so that doesn't happen.

What 4.5:1 means

The contrast ratio compares the relative luminance of two colours and runs from 1:1 (the same colour) to 21:1 (black on white). WCAG 2.x sets:

• AA, normal text: at least 4.5:1.
• AA, large text (about 24 px, or 19 px bold): at least 3:1.
• AAA, normal text: at least 7:1.
• UI components and graphics (field borders, icons): at least 3:1 against their surroundings.

Common mistakes

• Text on mid-tones: a medium-saturation purple or blue has low contrast with both white and black.
• Grey placeholders used as the only label: they're usually below 4.5:1 and disappear as you type.
• Conveying information through colour alone, like a red field with no message: people who can't see red miss it. Always add text or an icon.
• Checking only the light theme: a dark theme needs its own colours, not the same ones inverted.

How to build an accessible palette

Start from your brand colour and generate lightness variations: very light tints work as backgrounds and very dark shades as text. Keep mid-tones for large or decorative elements. Before accepting a combination, check its contrast ratio with a tool rather than trusting your eye.

Our palette generator shows, for each colour, whether it reads better with white or black text and whether it passes AA, and the checker lets you validate any text/background pair.