Color Contrast Checker (WCAG)
Check WCAG contrast between a text and background colour — live ratio, AA/AAA pass/fail for normal and large text, alpha composited first.
Preview in your own font and words
Any font installed on this device, as CSS names it — Georgia, Arial, "Noto Sans KR", serif. Nothing is downloaded, so a font this device does not have falls back to the next name.
APCA is the contrast model drafted to replace this ratio. It scores dark-on-light as positive and light-on-dark as negative, and weighs thin, small text more strictly.
Borders of inputs and buttons, icons and chart lines need 3:1 against what is next to them.
Large means 18pt or more, or 14pt bold.
Simulated colours, and the ratio between them. A pair that passes here for typical vision can fall apart for one of these.
15.17:1 AA ✓ Pass
15.42:1 AA ✓ Pass
15.19:1 AA ✓ Pass
15.58:1 AA ✓ Pass
14:1 AA ✓ Pass
13.61:1 AA ✓ Pass
14.79:1 AA ✓ Pass
14.74:1 AA ✓ Pass
A link that is not underlined must stand out from the text around it by 3:1; an underlined link only needs the background check.
Check a whole palette
One colour per line, up to 16. Each cell is the ratio between its row and its column.
🔒 Checked in your browser. Large text = 18pt+ (or 14pt+ bold). Thresholds: AA 4.5 / AAA 7 (normal), AA 3 / AAA 4.5 (large).
Check colour contrast for accessibility
Pick a text colour and a background colour to see the exact WCAG contrast ratio, whether it passes AA and AAA for normal and large text, the non-text result for UI parts and graphics, the APCA lightness contrast, and a live preview. Everything is computed in your browser using the official WCAG 2.1 relative-luminance formula. A Lightness slider under each colour moves it lighter or darker while the ratio follows, and the pair is also shown as people with colour-vision deficiency see it, with the ratio between the simulated colours. “Add to history” keeps each pair you check on this visit, newest first, where any one can be opened again, and “Preview in your own font and words” sets the sample in a font installed on your device, with your own text.
What the levels mean
WCAG requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18pt+, or 14pt+ bold) needs 3:1 (AA) or 4.5:1 (AAA).
Where 4.5 comes from
The ratio is computed from relative luminance — each channel linearised, then weighted 0.2126 red, 0.7152 green, 0.0722 blue, because the eye is far more sensitive to green than to blue. Both luminances get 0.05 added before dividing, which models the light a real screen reflects even while showing black, and is why the scale tops out at 21:1 rather than running to infinity. WCAG then sets four thresholds: 4.5 for normal text at AA, 3.0 for large text at AA, 7.0 for normal text at AAA and 4.5 for large text at AAA. "Large" means 18pt, or 14pt bold — about 24px and 18.66px.
What the ratio cannot see
It is a formula over two colours and it does not know about the rest of your design. Thin fonts at the same ratio are harder to read than heavy ones, and the standard's font-weight rule is its only nod to that. Text over a photograph has a different ratio at every pixel, so passing at one sample tells you little. Semi-transparent colours must be composited against what is behind them before they mean anything here, which is the one item on this list the page does for you. Hover, focus and disabled states each need their own check, and a disabled control that fails is a common and defensible exception. Clearing 4.5 is a floor, not a target — plenty of comfortable, legible text sits far above it. To lift a colour out of a photo or a screenshot, use the image color picker.
Frequently asked questions
What counts as large text?
18pt, or 14pt if it is bold — roughly 24px and 18.66px. Below that the AA threshold is 4.5, above it 3.0.
Which formula is used?
The WCAG 2.1 relative-luminance formula, the same one used by browser dev tools and accessibility auditors.
Does it handle transparency?
Yes. If the text colour carries alpha — 8-digit hex like #1f2937cc, rgba() or hsla() — it is composited over the background first, so the ratio reflects the flattened colour you actually see. A translucent background is composited over a white page first, and both the ratio and the preview use that painted colour. Because the real page behind it may not be white, the page also gives the range the ratio can take over any backdrop, and the figure over black.
Why 4.5 and not a rounder number?
It comes from a model of contrast sensitivity: 4.5:1 is roughly what someone with 20/40 vision needs to read normal text as easily as someone with 20/20 reads text at 3:1. The large-text threshold is lower because size does some of the same work.
My text sits over an image. What do I check?
The worst case, not an average — find the lightest region under light text, or the darkest under dark text, and check that. Better still, put a solid or scrim layer behind the text so there is one ratio to check.
Does it check UI parts, APCA and colour blindness too?
Yes. A fifth badge, Non-text — UI parts & graphics, applies WCAG's 3:1 rule for the borders of inputs and buttons, icons and chart lines. APCA lightness contrast shows the Lc score of the model drafted to replace the ratio: positive for dark on light, negative for light on dark. Each colour has a Lightness slider that keeps its hue while the ratio follows. And the pair is redrawn as people with colour-vision deficiency see it — weak and missing red, green and blue vision, and the two achromatic forms — each with its ratio and AA verdict.
Can it give one verdict for my font size, suggest a background, or check a link colour?
Yes. Under the badges, “Your text” takes a size in px and a Bold box and gives one verdict — Normal text or Large text, with its AA and AAA result. Under the text-colour suggestion, “Or keep the text and change the background (same hue)” offers the nearest background that passes AA, with “Use as background” and Copy. “Link colour (optional)” checks a link against the background and against the body text, and says that an underlined link needs only the first. “Check a whole palette” takes one colour per line and draws every pair’s ratio as a grid, bold where it passes AA. “Show the preview in greyscale” leaves only lightness in the sample, and where the browser can pick colours off the screen, “Pick from screen” sets a colour from any pixel.
Can I keep the pairs I have checked, or preview my own font?
Yes. “Add to history” puts the current pair into “Pairs checked on this visit”, newest first, each with its sample, both colours, the ratio and the AA and AAA verdicts, and its own Open and delete buttons; “Copy history” copies the list as text and “Clear history” empties it. The list lasts until you leave the page. “Preview in your own font and words” sets the preview in any font installed on your device, named the way CSS names it, with the text you type.