How to use it
- Put your text color in the foreground field and your background color in the background field. Type a HEX code, paste an rgb(), hsl() or oklch() value from your stylesheet, or use the color well. In Chrome and Edge the pipette samples any pixel on your screen.
- Read the ratio. The five rows beside it cover the levels a real review asks about: AA and AAA for normal and large text, plus the 3:1 that icons, input borders and focus rings need.
- If your text is semi-transparent, match the opacity slider. The ratio is then measured against the blended color, which is the one people see.
- Failing? Pick one of the suggested colors. Each keeps your hue and moves only the lightness, and the tile shows the pair as it will look. The undo chip puts the old value back.
- Working with a whole palette, paste it into the grid at the bottom. Every pair is measured at once, and clicking a cell loads that pair into the checker above.
What the ratio actually measures
The ratio compares the relative luminance of two colors: how much light each one sends to the eye once red, green and blue have been weighted the way human vision weights them. Green counts for far more than blue, which is why a saturated blue and a saturated green of the same nominal lightness behave so differently against white.
The scale runs from 1:1, two identical colors, to 21:1, black on white. Because it only looks at luminance it ignores hue, so bright red text on a mid-green background lands near 1.4:1 even though the colors clash loudly. That is the point: people with low vision, people outdoors and people on a dim screen rely on lightness difference far more than on hue.
Ratios here are always rounded down. A pair measuring 4.4999 shows as 4.4 and fails, because it does not meet 4.5:1. Rounding up would let a design claim a level it never reached.
Which level should you aim for
AA is the practical target. It is the level named in Section 508 in the United States, in EN 301 549 behind the European Accessibility Act, and in most public sector procurement. Meeting it means 4.5:1 for body text, 3:1 for large headings, and 3:1 for the parts of the interface that are not text but still carry meaning.
AAA asks for 7:1, and WCAG itself says it is not required for whole sites. It is still worth aiming at for long-form reading, for anything used outdoors, and for products with an older audience, since contrast sensitivity drops steadily with age.
The non-text criterion, 1.4.11, is the one teams forget. A checkbox outline, the border of a text input, the line of a chart and the focus ring around any of them all need 3:1 against what sits behind them. Pale gray hairlines on white fail almost every time.
Fixing a pair without wrecking the brand
The usual instinct when something fails is to reach for a darker gray, and the usual result is a palette that turns to mud. Moving lightness in OKLCH avoids that: it separates a color into lightness, chroma and hue on a perceptually even scale, so a brand blue stays the same blue and simply gets enough room from the background.
Two habits help more than any single fix: decide contrast pairs at the palette stage, when only a handful of pairs matter, and check both directions, because a color that works as text on your light surface often fails as a background for that same text.
Questions
What contrast ratio do I need to pass WCAG?
Level AA asks for 4.5:1 on normal text and 3:1 on large text. Level AAA asks for 7:1 and 4.5:1. Icons, form borders and focus rings need 3:1 at AA. Most teams are held to AA, since that is the level public sector rules name.
What counts as large text?
WCAG counts text as large from 18 point, about 24 CSS pixels, or from 14 point bold, about 18.66 pixels. Anything smaller needs the higher ratio. Weight and typeface still matter, so treat 3:1 as a floor for headings rather than a target.
Why is my ratio slightly lower here than in another checker?
The formula is the one published in WCAG, so the underlying number matches. The difference is rounding. This tool always rounds down: a pair measuring 4.49 shows as 4.4 and fails. Rounding to the nearest tenth would show 4.5 and call it a pass.
How does the opacity setting change the result?
Contrast is measured between the two colors a person actually sees, and semi-transparent text is blended with whatever sits behind it first. The slider blends the foreground over the background and measures the result. It only works over a solid color; over a photo or a gradient, check the lightest and darkest spots separately.
What is APCA, and why is it only informational here?
APCA is a newer contrast model that accounts for text size, weight and polarity, and it often tracks readability better than the WCAG 2 ratio. It reports a value called Lc rather than a ratio. It is not part of WCAG 2.2, so it cannot be used to claim conformance.
How does the suggestion work?
It keeps the hue and chroma of the color you are adjusting and moves only its lightness in OKLCH, step by step, until the pair reaches the target. You get the nearest lighter and darker option, so the fix still reads as your color. If nothing can reach it, the tool says so.
Is a passing ratio enough to call a design accessible?
No. Contrast is one criterion among many. A passing pair still fails people if the type is too small, if color alone signals a state, if focus is invisible, or if text sits on a busy image. Treat the ratio as a floor, then test with a keyboard, at 200 percent zoom and with a screen reader.
Do my colors leave my device?
No. Every calculation runs in your browser. Colors appear in the address bar so you can share or bookmark a check, and the last palette you used is kept in this browser's local storage so the other tools can pick it up. Nothing is uploaded and there is no account.