Contrast checker

How the ratio is calculated

WCAG defines contrast as a ratio between the relative luminance of two colors:

(lighter + 0.05) / (darker + 0.05)

Relative luminance is not the same as brightness as you'd guess it. Each channel is converted from its 0–255 value to a linear-light value, then weighted:

0.2126 × red + 0.7152 × green + 0.0722 × blue

Green carries the most weight because the eye is most sensitive to it, and blue the least. This is why a saturated blue on black fails while a yellow of the same "brightness" passes comfortably.

The result runs from 1:1 for two identical colors to 21:1 for black on white. Order does not matter — swapping foreground and background gives the same number.

What the thresholds mean

AA asks for 4.5:1 on normal text and 3:1 on large text. AAA raises those to 7:1 and 4.5:1.

Large text means 24px and above, or 18.66px and above when bold. That threshold exists because larger letterforms have thicker strokes, so the same ratio stays legible. The tool shows both rows at once, because a pair that fails for body copy may be fine for a heading.

UI and graphic elements is a separate rule — WCAG 1.4.11 Non-text Contrast — and it asks for 3:1. It covers the visual information needed to identify an interface component or its state, and the parts of a graphic you need in order to understand it:

• the border of a text input, or whatever distinguishes it from the page
• an icon-only button, and the icon inside it
• a focus ring
• the on/off states of a toggle
• a plotted line on a chart, or a segment boundary on a pie

It has no AAA level, which is why that row carries a single result. Note it applies to a component's identifying parts, not decoration — a purely ornamental flourish inside an icon is exempt, the shape that tells you what the icon means is not.

The 3:1 figure matches large text, but the rules are independent. A pair can pass for icons and controls while failing for body copy, which is exactly what the tool shows at ratios between 3 and 4.5.

When 4.5:1 isn't enough

The thresholds are a floor, not a target. Cases where you should go higher:

• Thin weights. The standard measures color, not stroke width. A 300-weight face at 4.5:1 is harder to read than a 500 at the same ratio.
• Text over photographs or gradients. The ratio only describes the two colors you tested. Check against the lightest and darkest points the text can land on.
• Outdoor or bright-light use. Screen glare eats contrast that a lab measurement does not see.
• Long-form reading. A ratio that is comfortable for a label becomes tiring over several paragraphs.

Disabled controls are exempt from the requirement. That is a rule about conformance, not about whether people can read them — if a disabled state carries information, it still needs to be legible.

Common questions

Why does this show 4.49 where another tool shows 4.50? Ratios here are rounded down to two decimals. A value of 4.4999 displays as 4.49, never 4.50, so a number can never read higher than it measures next to a PASS badge. Pass and fail are decided on the exact value, not the rounded one.

What does the copy button put on the clipboard? Both colors, the ratio and all six verdicts, as plain lines. A ratio on its own stops meaning anything the moment it is pasted into a ticket — the reader has no way to tell which pair produced it.

What is the image for? The same result as a self-contained PNG, for a review, a pull request or a spec where a screenshot would otherwise be cropped out of a browser window. It is drawn in your browser from the two colors on screen, so nothing is uploaded anywhere, and it is always on a light card regardless of the theme you are reading this in — the file is going into someone else's document, not back into this one.

Does it matter which color I put in which field? No. The ratio is the same either way. The fields are labelled foreground and background only because the preview needs to know which is which.

Can I check a color against a gradient or an image? Not directly. Test the extremes — the lightest and darkest points beneath the text — and design for the worse of the two.