ColorKitFree contrast checker
Contrast checker with a verdict for every text size
Free and with no signup: drop in two colors and the WCAG 2.1 ratio appears at once, truncated downward so a 4.49 never gets rounded into a pass it did not earn. The same reading is graded four times over — 14px and 16px regular against 4.5:1, then 18.67px bold and 24px against 3:1, because that bold size is exactly where the standard changes its mind — and once more against the 3:1 line that governs icons and field borders. Text with an alpha channel is composited over the background before anything is measured, a step most checkers skip.
- 100% free
- No signup
- 4 sizes graded
- Alpha composited
- Two-decimal ratio
Relative luminance 0.1812
Relative luminance 1.0000
Contrast ratio
4.54:1
The background is the lighter of the two. The scale runs from 1:1 to 21:1.
Press Ctrl+V anywhere on the page to drop in a pair of colors — both fields fill from one paste — no need to click the field first.
The same pair at four sizes
- Reset your password to continue14px regularTable cells, captions, form helpAA 4.5:1 passAAA 7:1 fail
- Reset your password to continue16px regularDefault paragraph sizeAA 4.5:1 passAAA 7:1 fail
- Reset your password to continue18.67px bold14pt bold — the smallest large textAA 3:1 passAAA 4.5:1 pass
- Reset your password to continue24px regular18pt — headings and pull quotesAA 3:1 passAAA 4.5:1 pass
Icons, borders and other non-text
How to check the contrast of two colors
Two fields, one number, and five verdicts you can defend in a review.
Put both colors in
Type the text color in the first field and the background in the second, or copy a declaration such as color: #767676; background: #fff from your stylesheet and press paste anywhere on the page — both fields fill from one paste, in the order the colors appear. Every notation the site parses works here, including the eight-digit hex and rgb() with a slash alpha, and a wrong character turns the field orange instead of silently scoring black.
Read the ratio, then read the four verdicts
The big number is the ratio the two colors produce, from 1:1 for identical colors to 21:1 for black on white. Under it, the same reading is judged four times: 14px and 16px regular need 4.5:1 for AA, while 18.67px bold and 24px regular are large text and need only 3:1. The panel at the bottom applies the separate 3:1 rule that covers icons, field outlines and focus rings.
Look at the samples before you accept a borderline pass
Each verdict sits above the actual pair rendered at that size, which is the part a number cannot tell you: 4.52:1 clears AA and can still be hard work at 14px on a laptop in daylight. Swap the two colors to see the inverted state a hover or dark section will use, and copy both values back out as a two-line CSS declaration.
Technical specifications
| Colors accepted | Hex in 3, 4, 6 or 8 digits with the # optional, the rgb()/rgba() and hsl()/hsla() functions in either comma or space syntax, CSS Color 4 slash alpha, and 148 keywords by name — the 8-digit and rgba forms are the ones that trigger compositing |
|---|---|
| One paste fills both | A pasted string is scanned left to right and the first two readable colors become text and background — so a whole CSS rule, a Figma inspector dump or “#767676 on white” all work |
| Sizes rendered | 14px and 16px regular, 18.67px bold and 24px regular, each with its own AA and AAA badge, plus one non-text sample with an icon and a 2px border |
| Large-text rule | 18pt regular or 14pt bold, which the CSS 96dpi reference makes 24px and 18.667px — the point where the AA target drops from 4.5:1 to 3:1 |
| Ratio shown | Truncated to two decimals, never rounded up; badges are computed from the unrounded value, and the scale is bounded at 1:1 and 21:1 |
| Translucent text | Alpha below 100% is composited over the background with the source-over blend, and the resulting opaque hex is printed under the ratio |
| Luminance formula | WCAG 2.1 relative luminance — 0.2126R + 0.7152G + 0.0722B on linearised sRGB channels, then (L1 + 0.05) / (L2 + 0.05) |
| Where it runs | Entirely in this tab; once the page has loaded, every check works with the network switched off |
Frequently asked questions
What contrast ratio does my text need?
4.5:1 for anything under 18.67px bold or 24px regular, and 3:1 once it is that big. Those two numbers are Success Criterion 1.4.3 at level AA, which is the level almost every procurement rule and accessibility policy actually cites. On a white background the lightest grey that still reaches 4.5:1 is #767676 at 4.54:1, and one step lighter, #777777, drops to 4.48:1 and fails.
Why is your ratio a hundredth off from another checker?
Because this page truncates the ratio downward and most others round it. A pair measuring 4.4989:1 prints here as 4.49 and fails; a checker that rounds shows 4.50 and calls it a pass, which is a pass that does not exist. The verdicts are taken from the full-precision value, so the displayed number and the badge next to it can never disagree.
Is my 18px bold heading large text?
No — the bold threshold is 14pt, which is 18.67px at the CSS reference of 96dpi, so 18px bold misses it by two thirds of a pixel and still needs 4.5:1. The regular-weight threshold is 18pt, or 24px. This trips up whole type scales, because a scale built on 18px and 20px headings looks like it should qualify for the 3:1 rule and does not.
How is transparent text scored?
It is composited over the background first, then measured. Relative luminance is only defined for an opaque color, so rgba(0, 0, 0, 0.6) has no ratio of its own until you say what is behind it; the tool flattens it with the standard source-over blend and shows the resulting opaque hex under the ratio. If the real background is a translucent overlay on top of a third layer, flatten that stack yourself before you check it, or you will grade the wrong pair.
My text sits on a photograph — which background do I use?
Check the worst pixel, not the average. Sample the lightest and the darkest point of the image that ends up under the text, run both, and the failing one is your answer; the image color picker on this site is built for that sampling step. Most designers solve it instead with a scrim — a semi-transparent black layer over the photo — at which point the background you check is the scrim composited over the lightest pixel.
Does the ratio account for font weight or the display it is read on?
No, and that is the known weakness of the WCAG 2 formula. It compares relative luminance and nothing else, so a hairline 100-weight face and a heavy 700-weight face at the same size and color get an identical verdict, and 4.5:1 on a bright office monitor is not the same experience as 4.5:1 on a phone in sunlight. The APCA model in development for WCAG 3 does take size and weight into account, but it is not the criterion anyone is audited against today.
The pair passes here — is my component compliant?
Only in its default state. Hover, focus, visited, selected and error states each use different colors and each has to be checked, placeholder text is text and is graded as text, and a disabled control is the one case WCAG exempts. Anything with a separate border or icon also has to clear 3:1 on its own, which is why the non-text sample sits below the four text samples rather than being folded into them.
About contrast ratios and what they miss
The ratio is a comparison of light, not of color. Both colors are converted to relative luminance — a weighted sum in which green counts for 0.7152 and blue for only 0.0722 — and the lighter value plus 0.05 is divided by the darker plus 0.05. That 0.05 is a stand-in for the light a real screen reflects even when it is showing black, and it is why the scale tops out at 21:1 rather than running to infinity. The weighting explains results that look wrong at first: a saturated blue on black is legally awful and a mid-green on white passes more easily than a mid-red, because the formula is measuring how much light each color puts out, not how different the two look. If it is the difference in hue you are worried about, contrast is the wrong instrument and the color blindness simulator is the right one.
Four things go wrong often enough to be worth naming. Checkers that round rather than truncate manufacture passes at the boundary, which is why 4.49 stays 4.49 here. Checkers that ignore alpha score a color that is never on screen. Checkers that only compare against white miss the dark-mode half of a modern palette, so the swap button is one click rather than two fields to retype. And the large-text rule gets applied to headings that do not qualify: 18px bold is not large, 18.67px bold is, and a type scale that lands on 18 and 20 needs the full 4.5:1 throughout. The greys are worth memorising for the default white surface — #949494 is the lightest that clears 3:1, #767676 the lightest that clears 4.5:1 and #595959 the lightest that clears 7:1, all of them listed with their neighbors on the hex color codes chart.
One pair is rarely the whole job. Text over a photograph has as many ratios as it has pixels behind it, so sample the extremes with the image color picker and grade the worst one; an icon carries its own 3:1 obligation whether it was drawn in code or traced with png to svg; and a design system has dozens of pairs across light and dark themes. When the answer you owe someone is a table rather than a number — criterion by criterion, with a repair for each failing row — the WCAG contrast checker takes the whole list at once and exports it.
Where these two colors are read
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
This page also keeps nothing between visits: there is no swatch history and no saved list, so a client palette you graded here is gone the moment the tab closes.