Contrast Ratio Calculator

Contrast Ratio Calculator isolates the single number that every contrast rule is built on, printing the WCAG ratio between two colors to two decimal places.

What is Contrast Ratio Calculator?

Contrast Ratio Calculator isolates the number that every contrast rule is built on: the WCAG ratio between two colors, printed to two decimal places. It runs the same two-color engine as the contrast checker, and the difference is emphasis rather than arithmetic. Here the ratio is the headline and the pass-or-fail badges are the by-product, which makes this page the right one when you need the figure itself rather than a verdict on it.

The calculator also shows the four standard comparisons, so you can see where your figure lands on the scale without switching pages:

• AA normal text at 4.5 to 1, the common shipping gate for body copy.
• AA large text at 3 to 1, the relaxed bar for large type.
• AAA normal text at 7 to 1, the enhanced level.
• AAA large text at 4.5 to 1, the enhanced level for large type.

The arithmetic is the WCAG 2.x contrast ratio formula, unmodified. Each color is parsed, converted to sRGB, and each channel is linearised so that mid-tones are weighted the way human vision weights them rather than the way the raw 8-bit values suggest. The linear channels are combined as 0.2126 red, 0.7152 green and 0.0722 blue into relative luminance, and the ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05. The 0.05 offset is what keeps the result finite for black on black, and it is also why the scale is not linear: the useful steps crowd together at the top end.

The scale is worth internalising, because a WCAG ratio scale figure only means something next to the thresholds it sits between. Below 3 to 1 no text passes anything. From 3 to 1 up to 4.5 to 1 only large text is covered. From 4.5 to 1 to 7 to 1 AA is satisfied completely, and above 7 to 1 both AA and AAA are met at normal text size. The very top of the range, at 21 to 1, is reserved for black on white. Reading a figure against those bands is faster than comparing it with four badges one at a time.

Because the calculator exposes the raw figure, its limits are worth stating plainly.

• The ratio is symmetric. Swapping the two colors returns exactly the same number, so the figure alone never tells you which color is lighter.
• The scale is not perceptually uniform. A full point of ratio near 21 to 1 is a much smaller visual difference than a full point near 2 to 1, which is precisely the criticism that motivated perceptual alternatives.
• It does not produce an APCA lightness contrast value. Anything asking for an Lc figure has to come from a dedicated APCA calculator.
• Two colors only, no alpha, and no third surface behind them.
• Font metrics are excluded. The number describes the color pair, not the text set in it.

Use the figure as a precise, quotable measurement: for a design audit, a handoff document, or a regression test where you want to assert that a pair has not drifted. Where you only need to know whether to ship, the general contrast checker gives the same number with the thresholds already attached.

How to use Contrast Ratio Calculator

1. Enter the two colors you want measured in the text and background swatches.
2. Read the contrast ratio in the second panel heading, accurate to two decimal places.
3. Compare it against the four badge rows below to place your figure on the AA and AAA scale.
4. Change one color a few percent at a time to see how far the ratio moves, which is the fastest way to find the smallest edit that clears a threshold.

When to use Contrast Ratio Calculator vs related tools

Use the contrast ratio calculator when the ratio itself is what you need to record, report or assert: an audit figure, a design-system token value, or a number to quote in review. The contrast checker covers the same arithmetic when all you need is a verdict, the WCAG 3.0 APCA checker is the place to look when a ratio shape is the problem rather than the level, and the palette accessibility checker measures a whole set at once rather than a single pair.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Contrast Ratio Calculator