colour tool
Contrast checker
Set two colours and the page becomes a type specimen in them, with the WCAG ratio and a pass or fail attached to each line, so you judge the pair by looking at it rather than by trusting one number.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Set the two colours
Use the swatches, or type a hex value, an rgb(), an hsl() or a CSS name. The specimen repaints as you type and there is nothing to submit.
- 2
Look at the specimen, not just the number
Six sizes from thirty pixels down to thirteen, each with its own verdict, because the same pair can be comfortable in a heading and unreadable in a caption.
- 3
Read the line at the top
It tells you the smallest size that still passes, which is the answer you were actually looking for.
- 4
Fix it without losing the colour
Advanced options walk the lightness in OKLCH, keeping the hue and chroma, and offer the nearest shade that clears your target.
- 5
Check the whole palette at once
Paste a list of pairs, one per line, and get a table. Faded text is flattened onto its background first, which is the only correct way to score it.
Why the specimen is the interface
A single ratio hides the thing that matters. The standard asks for four and a half to one for body text and three to one for large text, so one pair of colours has two different answers depending on what you set in them, and most tools make you hold that in your head. Here each line of the specimen is judged at its own size and weight, the verdict sits next to the words, and the line at the top tells you the smallest size that still passes.
Large text is a size, not a feeling
Large means at least eighteen point, which is twenty four pixels, or fourteen point bold, which is about 18.66 pixels. The specimen deliberately includes nineteen pixel bold, which counts, and eighteen pixel bold, which does not, because that one pixel is where most surprises live. A brand colour that looks fine in a heading and fails in the paragraph beneath it is the normal case, and the fix is a darker variant for body copy rather than abandoning the colour.
What the WCAG formula gets wrong
The ratio divides two relative luminance figures after adding 0.05 to each, and that constant, meant to model screen flare, distorts the dark end badly. Dark on dark pairs can pass while being unreadable, and light on dark pairs can fail while being perfectly comfortable, which is why dark mode is where the formula is weakest. It also ignores size and weight entirely inside the ratio itself. Treat it as a legal floor you must clear, and treat the specimen above as the evidence.
The perceived lightness gap, and APCA
Advanced options show the gap between your two colours in OKLab lightness, from nought to one hundred. It is not a standard and nothing requires it, but it is a straight perceptual reading that does not carry the flare constant, so a dark mode pair with a healthy gap and a mediocre ratio is usually fine. APCA, the measure proposed for WCAG 3, does this far more carefully and is worth reading at apcacontrast.com. Its reference implementation is not licensed for commercial use, so it is not computed here.
Nothing leaves this page
The arithmetic runs in your browser and no request is made after the page loads. The two colours are written into the address bar, so a link reopens exactly the pair you are looking at and you can send it to whoever disagrees with you.
Limits
- It compares two solid colours. Text over a photograph or a gradient varies across the image, so sample the lightest and darkest points behind it and check both.
- The ratio takes no account of typeface or weight, so a hairline face that passes can still be hard work.
- The vision simulation uses the Machado 2009 matrices at full severity, which is an approximation of the shift, not a medical model.
- The ratio is a floor set by a standard, not a design goal. Comfortable reading usually sits well above it.
What it does not do
- It does not scan a whole page or a live URL.
- It does not compute APCA, the perceptual measure proposed for WCAG 3. Its reference implementation is not licensed for commercial use, so the page shows a perceived lightness gap instead and says what that is.
- It does not know which text in your design is large and which is body. You do.
Questions people ask
What ratio do I actually need?
Four and a half to one for body text and three to one for large text meets AA, which is the level named in most legal and contractual accessibility requirements. Seven and four and a half meet AAA. Interface parts that are not text, such as a border, an icon or a focus ring, need three to one under WCAG 2.1 success criterion 1.4.11.
What counts as large text?
At least eighteen point, which is twenty four pixels at the browser default, or fourteen point bold, which is about 18.66 pixels. Below that the body threshold applies. It is worth checking your real sizes rather than assuming, because a heading set at sixteen pixels bold is still ordinary body text as far as the standard is concerned.
My brand colour fails. What now?
Open advanced options and take the suggestion. It walks the lightness of your colour in OKLCH while holding the hue and chroma, so what comes back is a darker or lighter version of the same colour rather than a different one. Keep the original for large elements and use the adjusted value for body copy, which is what most brand palettes already do.
Does this work for text on a photograph?
Not directly, because the background changes across the picture. Sample the lightest and the darkest point behind your text with the colour picker and check both here. If they land either side of the threshold, the answer is a scrim, a solid panel or a text shadow rather than a different text colour.
Why does a dark pair pass that I cannot read?
Because the WCAG formula adds 0.05 to both luminance figures before dividing, which was meant to model screen flare and instead flatters dark colours. It is the best known weakness of the measure and the reason dark mode work is so frustrating. Look at the specimen, and check the perceived lightness gap in advanced options as a second opinion.
How does the colour vision simulation work?
The two colours are converted to linear light and passed through the Machado 2009 matrices at full severity for the three common types, plus a luminance conversion for complete colour blindness. Each panel shows the resulting pair and its ratio. It is an approximation and it will not tell you a design is safe, but it shows quickly when a pair relies on hue alone.
Why is APCA not shown?
APCA is the polarity aware, size aware measure proposed for WCAG 3, and it disagrees with WCAG 2 on purpose, particularly on dark backgrounds. Its reference implementation is published under a licence that prohibits commercial use without a signed agreement, so it is not computed here. Use the calculator at apcacontrast.com when you want the number.
Is anything sent anywhere?
No. The calculation is arithmetic in this page and no request is made after it loads. The pair is written into the address bar so a link reopens the same check, which is handy in a review, but nothing is transmitted unless you copy that link and send it.
Build something with these colours
Take what you made here into forms.
Create a form with OneCraftRelated tools
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Palette extractorCluster a photograph in CIE Lab and get the colours it is made of, each with its share of the pixels and a suggested design role. Runs in your browser.
- Colour picker from imageDrag a magnifier across a picture and read the pixel under it as hex, RGB, HSL and OKLCH, with sample averaging, arrow key nudging and a history of picks.
- Aspect ratio calculatorType a size and see your shape drawn against any target: the bars if you fit it whole, the crop if you fill it. Presets for print, screen and social.
Written and checked by the OneCraft team. Last checked .