What the contrast ratio means
The contrast ratio compares how bright two colours are, from 1:1 (the same colour twice) to 21:1 (black on white). It comes from the Web Content Accessibility Guidelines (WCAG), the standard most accessibility laws and audits point to.
The maths uses relative luminance, which weights green far more than blue because our eyes are more sensitive to it. That's why yellow text on white is hard to read even though yellow looks bright, and why two colours that look different can still fail.
WCAG AA and AAA requirements
WCAG 2 sets different minimums for normal and large text. Large text is at least 24px (18pt) regular, or at least 18.66px (14pt) bold. AA is the level most laws and policies ask for; AAA is stricter.
- AA, normal text: 4.5:1
- AA, large text: 3:1
- AAA, normal text: 7:1
- AAA, large text: 4.5:1
- Icons, input borders and other interface parts: 3:1 against the colours next to them
How to fix colours that fail
The quickest fix is to change lightness and keep the hue. Darken the text or lighten the background, or the other way round on a dark design, until it passes. This tool searches in small steps for the nearest lightness that reaches 4.5:1 and 7:1, so your brand colour still looks like itself.
If your brand colour can't pass as text, use it for large shapes, borders and buttons with a dark or white label, and keep body text close to black or white. Mid-tones like orange, light green and sky blue rarely pass with white text at small sizes.
Watch out for text on photos and gradients. The ratio changes across the image, so check the lightest area behind your words, or add a solid or semi-transparent band behind the text.
Where contrast matters for creators
Small screens, bright sunlight and fast scrolling all make low contrast harder to read. Check the text on thumbnails, story overlays and link-in-bio buttons, where a pale label on a pastel button is one of the most common problems.
About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, and contrast also matters as eyesight changes with age. Good contrast helps more of your audience than you might expect.
Frequently asked questions
What is a good contrast ratio?
For body text, at least 4.5:1 meets WCAG AA, and 7:1 or more meets AAA. Large text needs 3:1 for AA and 4.5:1 for AAA.
Does 4.49:1 pass AA?
No. WCAG doesn't allow rounding up, so the ratio has to be 4.5:1 or higher. This tool cuts the ratio to two decimals instead of rounding, so a near miss never shows as a pass.
What counts as large text?
Text that is at least 24px (18pt) regular, or at least 18.66px (14pt) bold. Bigger, heavier letters are easier to read, so they need less contrast.
Do logos need to meet contrast rules?
No. WCAG exempts logos, brand names and purely decorative text. Text inside images that people need to read still counts.
Should I check dark mode separately?
Yes. Every text and background pair is its own check, so colours that pass in light mode can fail once the background turns dark.