Color Contrast Checker
Put a foreground and a background in as hex, rgb(), hsl() or a CSS colour name and read the WCAG 2.1 contrast ratio with all four verdicts at once: AA and AAA, for normal and for large text. The stage shows the pair as real text both ways round, so you can see what the number means rather than take it on trust, and when a pair falls short the checker offers the nearest shade of either colour that reaches the threshold, holding the hue and the saturation so it is still your colour. It checks one pair, not a page, and every part of it runs in your browser.
Sample
Large text, 24px boldNormal text at sixteen pixels, the size most body copy is set at.
Ratio
AA at both sizes, AAA large only
- passAA normal text, needs 4.5
- passAA large text, needs 3.0
- failAAA normal text, needs 7.0
- passAAA large text, needs 4.5
This pair passes AA for normal text at 5.08:1. Large text means 24px, or 18.66px bold.
Pairs worth knowing
The WCAG 2.1 formula, not an approximation. Each channel is taken out of its sRGB gamma, weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue into a relative luminance, and the ratio is the lighter of the two plus 0.05 divided by the darker plus 0.05. That puts every pair between 1:1 and 21:1. AA asks for 4.5:1 on normal text and 3:1 on large text, AAA for 7:1 and 4.5:1, where large means 24px, or 18.66px bold. The pass and fail chips are decided on the exact ratio, not on the two decimal places shown, so a pair that reads 4.50 and still fails is a pair sitting just under the line.
Common questions
- What contrast ratio does text need?
- WCAG 2.1 asks for 4.5:1 on normal text and 3:1 on large text at level AA, and 7:1 and 4.5:1 at level AAA. The scale runs from 1:1, which is a colour on itself and invisible, to 21:1, which is black on white and the highest ratio there is. All four verdicts are shown at the same time, so you can see how much room a pair has rather than one pass or fail.
- What counts as large text?
- WCAG defines it as 18pt, or 14pt bold, which is about 24px, or 18.66px bold, on a normal screen. Anything smaller is normal text and takes the stricter threshold. The Text size toggle does not change the ratio, which is a property of the two colours alone: it chooses which threshold the nearest passing shade aims at, and which pair of rows is highlighted.
- Why is AAA so much stricter than AA?
- AA is the level most policies and procurement rules adopt, and it is set so that text stays readable for most people with moderately low vision. AAA is aimed at people with a 20/80 acuity or worse reading without assistive technology, which is why it climbs from 4.5:1 to 7:1. WCAG itself does not expect whole sites to reach AAA, so failing AAA on body copy is common and not the same as failing an accessibility requirement.
- Can it check a whole page or a URL?
- No. It takes two colours and gives you the ratio between them. Nothing is fetched here and no address is read, which is why it works offline and instantly. For a live page, pull the two colours out with your browser's element inspector, or with the image colour picker on this site, and check them here. A tool that crawled a page would still have to guess which text sits on which background once opacity, gradients and images are involved, and the guess is the part that goes wrong.
- What do I do when a pair fails?
- Use one of the two nearest passing buttons. Each walks the lightness of one colour in HSL in tenths of a percent, outward from where it sits, and stops at the first shade that reaches the threshold for the text size you picked. Hue and saturation are held, so the suggestion is a lighter or darker version of your own colour and not a different one. If no shade of that colour can reach the target, the button says so instead of offering something that does not work: a mid grey background, for example, tops out at 5.32:1 against black, so nothing on it reaches AAA for normal text.
- Which colour formats can I type?
- Hex in three, four, six or eight digits, with or without the hash, rgb() and rgba(), hsl() and hsla(), and all 148 CSS colour keywords including rebeccapurple and both spellings of grey. An alpha value is read and then ignored, with a note saying so, because a contrast ratio is only defined between two opaque colours: if your text sits at 60% opacity, work out the colour it composites to and check that instead. The swatch picker beside each field writes a hex code into the same box.
- Is anything sent anywhere?
- No. The colours are converted and compared in the page itself, with no account and no upload. The last pair you checked and the text size you chose are kept in your own browser's storage so the tool opens where you left it, and clearing your browser data clears them.
The exact WCAG 2.1 contrast ratio for the two colours you enter, with the AA and AAA verdicts for normal and large text. It cannot know how the colours render on a given screen, font or overlay, and it does not judge a whole page.