Open a design file, drop grey placeholder text onto a white field, and it can look clean and modern on your own monitor. Ship it, and a slice of your readers — people with low vision, tired eyes, or a phone held up against the afternoon sun — can't make out a word. The catch with judging contrast by eye is that your eye is the one that already works. WCAG, the Web Content Accessibility Guidelines, swaps that gut call for arithmetic: a single contrast ratio you can pass or fail before the guess costs anyone a sentence they couldn't read.
From "looks fine" to a number
The ratio compares the relative luminance — the perceived brightness — of two colors, not their hue. It's derived from each color's sRGB values through the official WCAG 2.x formula, and it runs from 1:1, where the two colors are identical and one dissolves into the other, up to 21:1 for pure black on pure white. The reason to trust the math over your instinct is exactly the case above: two colors can be wildly different in hue while sitting at almost the same brightness, which the eye reads as strong contrast and the formula, correctly, does not.
The thresholds you have to clear
How high the ratio needs to climb depends on what the text is doing:
- Normal text needs 4.5:1 for AA, 7:1 for AAA.
- Large text — 24px and up at regular weight, or 18.66px and up when bold — needs 3:1 for AA, 4.5:1 for AAA.
- Interface pieces and graphics — icons, input borders, focus rings, the segments of a chart — need 3:1, the bar set by WCAG rule 1.4.11.
AA is the level nearly every organization and accessibility law writes into its requirements. AAA is the tighter grade, usually held in reserve for body text that has to be effortless to read.
Running a pair through the checker
The Color Contrast Checker (WCAG) on Every Boring Tool settles a color pair without anything leaving your machine — the values you type stay on the page, and there's nothing to sign into. The workflow:
- Enter your foreground (text) color. It reads a hex code such as
#1A1A1A, anrgb()orrgba()value, or a plain name likeblack, and a native color picker sits beside the field if clicking beats typing. - Enter the background color the same way.
- Read the ratio it returns —
7.14:1, say. - Scan the pass/fail tiles: normal text at AA and AAA, large text at AA and AAA, and UI and graphics, each tile labeled with the threshold it's judging against.
- Check the live preview, which renders normal and large text samples in the exact colors you entered.
- Hit Swap colors to trade foreground and background, or Copy report to lift a plain-text summary of the ratio and every result into a ticket or a design note.
Feed it a typo or a value that isn't a real color and it tells you, rather than inventing a number — so a slip of the keyboard can't quietly hand you a wrong answer.
The translucent-text wrinkle
Semi-transparent text is where a naive score falls apart. If your foreground carries an alpha channel — a translucent rgba() or an eight-digit hex — its raw luminance lies, because the background bleeds through it. The checker handles this the honest way: it composites the see-through foreground over the background, then scores the solid color that results, treating the background itself as opaque. What comes back is the contrast a real viewer actually perceives, not the contrast the color would have if nothing showed through.
Where the ratio goes quiet
Clearing the number is necessary; it isn't the finish line. The formula can't see your layout, so read a pass as a floor rather than a verdict.
- It weighs one pair, once. Live pages stack text over gradients, photographs, and video, where the background shifts pixel to pixel. Find the least forgiving spot behind your text and test that; a flattering average will bury the failure happening at the edges.
- It says nothing about legibility past contrast. Hairline weights, shrunken type, cramped letter spacing, over-long lines — all of them punish a reader who is technically looking at a passing ratio. Contrast is one ingredient, not the whole meal.
- WCAG 2.x luminance is imperfect. It's known to flatter certain light-on-light and dark-on-dark pairs, part of why a perceptual successor, APCA, is being trialed for future guidelines. This tool runs the current, official, legally cited WCAG 2.x math — the correct choice for compliance right now — but don't read a bare 4.5:1 as comfortable for everyone.
- Contrast is not color blindness. A pair can clear the ratio and still be a muddle for someone with a color vision deficiency. Never let color carry meaning on its own; back it with labels, icons, or patterns.
Reaching past a single pair
Use this checker when you already have specific values in hand and want a quick, private, authoritative yes or no — midway through choosing palette tokens, during a component review, or to end a disagreement with data.
Widen the question and you want a different instrument. To surface every failing element across a rendered page at once, run an automated scanner or your browser devtools' accessibility audit against the live DOM. To build a palette whose combinations pass by design instead of by luck, a generator with contrast constraints baked in saves the back-and-forth. And no ratio ever written can stand in for putting the interface in front of real assistive technology and real people.
Bottom line
Score the ratio for every text-and-background pairing, hold the line at AA (4.5:1 for normal text, 3:1 for large text and UI), and reach for AAA where people read at length. Test the ugliest case, never the average. Then keep the number in its place: it's a minimum on one narrow question, so shore it up with sane typography, cues that don't lean on color, and testing with actual humans.