Check colour contrast before someone cannot read it
Put in a text colour and a background, get the ratio between them, and see which of the four published WCAG thresholds it clears — each one stated separately, because passing at one text size says nothing about the other. Real text is shown at both sizes, because a number on its own does not tell you whether anyone can read it. Runs in your browser; nothing is uploaded or saved.
- Nothing is uploaded or saved
- Works offline
The two colours
Try a pair
Comfortable
Clears every threshold with room to spare. This is what body text should look like.
Right at the line
Passes the AA minimum for body text and fails AAA. Fine to ship, and worth knowing it has no margin left.
Large text only
Clears the threshold for headings and fails it for paragraphs. The same pair, two different answers — which is why the verdicts are listed separately.
The classic mistake
Looks fine to a designer on a bright screen in a dark room. Stops being readable on a phone outdoors, or to anyone over about fifty.
Different colour, same brightness
The most useful pair on this page. They look nothing alike, and the ratio is close to 1:1 — because hue plays no part in it. To a black-and-white printer, or to red-green colour blindness, they genuinely are the same.
Contrast ratio
4.54: 1
4.54:1 passes AA at any size and AAA for large text. Body text is fine; headline-sized text has room to spare.
Large text, 24px — the AA floor here is 3:1
Normal text, 13px. This is the size most of a page is actually set at, and the size the 4.5:1 threshold was written for. Read this paragraph at arm’s length: if the letters start to blur into the background before you finish the sentence, the number above is telling you something real.
Small print, 11px — footnotes, captions and legal lines. Nothing in WCAG gives small text an easier threshold than normal text, and ink spread on paper closes up thin letterforms further.
How it works
- 1
Put in the two colours
The text colour and the background behind it. Paste a hex code, type rgb() or hsl(), or use the swatch. The order does not matter — the ratio between two colours is the same whichever way round you read it, which is why there is a swap button rather than two different answers.
- 2
Read the ratio, then read the verdicts
The ratio runs from 1:1 (identical) to 21:1 (black on white). Underneath it, each of the four thresholds is marked passed or failed on its own line rather than collapsed into a single grade, because “passes AA” is true at one text size and false at another for the same pair of colours.
- 3
Look at the sample text
The same two colours are drawn as real sentences at both sizes. A ratio of 4.6:1 passes and can still be uncomfortable to read for a paragraph; a ratio of 3.2:1 fails for body text and is fine for a heading. The number tells you the rule; the sample tells you the truth.
- 4
Adjust the one you can afford to move
Usually that is the text, not the brand colour behind it. Darkening text is almost always cheaper than changing a background, and it moves the ratio faster, because luminance is weighted heavily towards the middle of the range.
Need the colour in another format first? The colour converter turns HEX into RGB, HSL or OKLCH and back — this page is about whether the pair can be read, not what the codes are.
Frequently asked questions
What do the four thresholds actually mean?
**4.5:1** is the AA level for normal body text, and it is the one most rules and audits mean when they say “passes”. **3:1** is AA for large text — 18pt, or 14pt bold — because bigger letterforms carry more of their own contrast. **7:1** is AAA for normal text, and **4.5:1** is AAA for large. The two levels exist because AA is intended as a broadly achievable minimum and AAA as a stricter target that is not always practical across a whole design.
Why 4.5:1 and not some rounder number?
It comes from the amount of contrast a person with roughly 20/40 vision — a common degree of age-related loss — needs to read comfortably, relative to someone with normal vision reading at about 3:1. The figure is a deliberate compromise rather than a natural constant, which is why it looks arbitrary. What matters is that it is the published line, and the tools that audit your site will use it.
What counts as large text?
At least **18pt**, or **14pt when bold** — roughly 24px and 18.66px at default browser settings. It is about the visual weight of the strokes, not the importance of the words, so a large caption qualifies and a bold 12px label does not. If you are unsure whether something is large, treat it as normal text: the stricter threshold is never wrong.
Two colours look completely different but the ratio is nearly 1:1. Is that a bug?
No, and it is the single most useful thing this page can teach. The ratio is computed from **relative luminance** — how much light the colour emits — and hue plays no part in it at all. A saturated red and a saturated green can sit at almost the same luminance and score close to 1:1 while looking utterly unalike to most people. To anyone with red-green colour blindness, and to a black-and-white printer, they genuinely are almost the same.
Does passing the ratio mean my colours are accessible?
It means they clear one specific, measurable bar. It does not mean the design works for everyone. Contrast ratio says nothing about colour blindness, nothing about whether you have used colour as the only way to signal something, and nothing about text over a photograph where the ratio changes from one part of the image to the next. Passing is necessary, not sufficient.
What about buttons, icons and borders?
The published guidance sets a lower bar of **3:1** for non-text things that carry meaning — the outline of an input, an icon that indicates state, the focus ring on a control. A form field whose border you cannot see against the page is a real failure even though no text is involved. This page reports the raw ratio, so you can hold it against 3:1 yourself.
Why does light grey text keep failing?
Because it is the most common contrast mistake there is. Grey around #999 on white lands near 2.8:1 — under every threshold, including the lenient one for large text — and it looks perfectly readable to a designer on a bright, well-calibrated screen in a dark room. It stops being readable on a phone outdoors, on a cheap panel, or to anyone over about fifty.
Is anything I type here uploaded?
No. The whole calculation is a short formula running in this tab, and there is no server behind this site to send anything to. Nothing is saved to your device either.