WCAG Color Contrast Checker
Set a text color and a background color and see the contrast ratio, which WCAG levels it passes, and what the text actually looks like at three sizes. If it fails, one button walks the text color up or down until it passes.
The color of the letters themselves, including link and button text.
The color directly behind the text, which is not always the page background.
Large text, 24 px bold
Body text at 16 px. This is the size most of a page is set in, and the size the 4.5:1 threshold was written for.
Fine print at 13 px: captions, form hints, footnotes, the small type nobody tests.
How the ratio is calculated
The number is not a difference between two colors. It is a ratio between two luminances, and getting there takes three steps.
First each channel is divided by 255 and the sRGB gamma curve is undone, because the value stored in a hex code is not proportional to the light a screen emits. Then the three linear channels are weighted and summed: 0.2126 × R + 0.7152 × G + 0.0722 × B. Green carries most of the weight because human vision is overwhelmingly sensitive to it, which is why a pure green and a pure blue that look equally "medium" have wildly different luminances. Finally the two results go into (lighter + 0.05) / (darker + 0.05).
That 0.05 is worth knowing about. It stands in for ambient light reflecting off the screen, and it is the reason the scale tops out at 21:1 instead of infinity, and why two very dark colors always score close to 1:1 no matter how different they look in a dark room.
Because the formula sorts the two luminances before dividing, it is symmetric. Swapping text and background gives exactly the same number. The swap button here changes the preview, not the result.
What each threshold is for
- 4.5:1 — WCAG AA for normal text. This is the number referenced by most accessibility legislation, and the one an audit will check first.
- 3:1 — AA for large text, which WCAG defines as 18pt (24px) regular or 14pt (18.66px) bold. Note that it is the rendered size that counts, not the size in your design file.
- 7:1 — AAA for normal text, and 4.5:1 for large. Worth targeting for long-form reading.
- 3:1 — the minimum for user interface components and meaningful graphics under WCAG 2.1. Input borders, toggle states, icons and focus indicators all fall here, and they are the most commonly missed.
Two things are explicitly exempt: logotypes, and text that is part of an inactive or disabled control. A grayed-out button is allowed to fail. A placeholder in an input is not, because people read it.
Where the WCAG 2 number is wrong
Say this plainly: the formula is known to be inaccurate in places, and it is still the one you are measured against.
Its weakest area is light text on dark backgrounds. The same pair of colors gets one number regardless of which is the text, but in practice light-on-dark reads differently from dark-on-light, partly because light text blooms into the background at small sizes. Dark mode palettes that pass comfortably can still be tiring, and some that fail are perfectly legible.
It also knows nothing about font weight beyond the crude large-text split. A hairline 300-weight face at 4.5:1 is harder to read than a 600-weight face at 4:1, because the thin strokes get thinned further by anti-aliasing. Treat the threshold as a floor for solid body faces, and add margin for anything light or condensed.
APCA, the contrast method being developed for WCAG 3, addresses both of these: it is direction-aware and it factors in size and weight. It is not a conformance requirement yet, so this tool implements WCAG 2, which is what your legal obligations and your auditors currently cite.
What this tool cannot see
It takes two opaque colors. If your text or its background has an alpha channel, flatten the color first — white text at 70% opacity over a blue panel is a different color from white, and pasting #FFFFFF here will give you an answer that is too optimistic.
It also cannot help with text over a photograph, a gradient or a video. There the ratio changes pixel by pixel, and the only number that matters is the worst one anywhere under the text. The usual fixes are a solid scrim behind the text or a text shadow, and neither can be measured here.
Finally, contrast is not color blindness. Two colors can pass at 7:1 and still be confusable for someone with a color vision deficiency, because the ratio only measures lightness. If a red and a green in your interface mean different things, they need a different shape, icon or label as well.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
At least 4.5:1 for normal text and 3:1 for large text to meet AA, the level most accessibility laws reference. AAA asks for 7:1 and 4.5:1. User interface components such as input borders and focus rings need 3:1.
Why does the ratio show 4.49 when other tools say 4.5?
This tool truncates rather than rounds, because a rounded 4.5 that is really 4.497 fails the check while looking like a pass. If you see 4.49 here, you are below the threshold and an audit tool will say so.
Does swapping the text and background change anything?
Not the number. The WCAG formula sorts the two luminances before dividing, so the ratio is identical either way. It does change what the pair looks like, which is why the preview is there.
What size counts as large text?
24px, or 18.66px when bold, at the size the browser actually renders. WCAG states it as 18pt and 14pt bold. Remember that a user zooming or a page with a smaller root font size can push text out of the large category.
How do I check semi-transparent text?
Work out the flattened color first. Blend the text color with whatever is behind it at the opacity you are using, take the resulting hex, and test that. This tool assumes both colors are fully opaque.
Last updated September 19, 2026