How to Check Colour Contrast for Accessible Text
Contrast is the difference in lightness between text and its background. It is one of the few accessibility checks you can make with a number, and one of the easiest to get wrong when you choose colours by eye.
The Colour Palette Generator runs in the browser and reports the contrast ratio for a pair of colours. Use it on the colours that actually appear on screen, not on the swatches in a brand guide.
Quick answer
For normal-sized text, aim for a contrast ratio of at least 4.5:1. For large text and for user-interface components such as buttons and focus outlines, 3:1 is the usual minimum. These figures come from the WCAG guidelines. They are a useful baseline with exceptions, not a guarantee that a page is accessible.
What the ratios mean
A contrast ratio compares the relative luminance of two colours and runs from 1:1, which is no contrast at all, to 21:1, which is black on white. The ratio is not a measure of hue, so a bright red and a bright green can have the same ratio against white.
The thresholds are minimums, not targets. Passing 4.5:1 means the pair is likely to be legible for many people; it does not mean the text is comfortable, well sized, or suitable for a long read.
Check the colours that actually render
Design files often show a flat swatch, while the page shows something else. Opacity, overlays, gradients, and background images all change the final colour. Text over a photo is the common failure: the ratio depends on the part of the image behind each letter, and that can vary across a single word.
Check the states as well as the default: hover, focus, visited links, placeholders, disabled controls, and error messages. Then check dark mode separately, because a palette that passes on white may fail on near-black. If a colour has transparency, flatten it against the real background before measuring.
Fix the pairing, not just the text
When a pair fails, darken the text or lighten the background. Small adjustments often do more than a complete redesign. If the text sits on an image, add a solid or semi-transparent panel behind it rather than hoping the busiest part of the photo stays clear.
Do not use colour alone to distinguish a link from body text, and do not assume bold text makes a failing colour acceptable; large text has a lower threshold, but the size must genuinely be large. Check the final pair after any change, since a new shade can affect several components at once.
What contrast cannot tell you
Contrast does not cover colour blindness, focus order, keyboard access, alt text, captions, or plain language. A page can pass every ratio and still be difficult to use. It also cannot tell you whether a colour combination is meaningful: red and green may have plenty of contrast and still be a poor choice for a status indicator.
The WCAG figures are guidelines with exceptions, including logos, decorative text, and inactive controls. Use them as a baseline, test with real content, and treat a pass as one check rather than a guarantee of accessibility.
Measure the pairs you actually use with the Colour Palette Generator, then fix the ones that fail and recheck the final page. For the wider method, read How to Build a Colour Palette from a Photo. If you are choosing the palette itself, see Colour Harmony: Complementary, Analogous, and Triadic Palettes.
Common questions
What is a good contrast ratio for body text?
Aim for at least 4.5:1 for normal-sized text. Larger text and interface components have a lower usual minimum of 3:1. These are WCAG baseline figures, and some situations have exceptions, so treat them as a starting point rather than proof of accessibility.
Why does a contrast checker disagree with my design tool?
The two may be measuring different colours, especially if transparency, overlays, or colour profiles are involved. Check the final rendered colours rather than the swatches in the file. A slightly different background shade can change the ratio.
Can contrast alone make a page accessible?
No. Contrast helps with legibility, but accessibility also depends on text size, keyboard focus, labels, alt text, colour combinations that work for colour-blind readers, and clear error messages. Use contrast as one check among several.