Contrast Checker

Contrast Checker takes a text color and a background color and reports the WCAG contrast ratio between them, together with the four pass-or-fail verdicts that follow from that one number.

What is Contrast Checker?

Contrast Checker takes a text color and a background color and reports the WCAG contrast ratio between them, together with the four pass-or-fail verdicts that follow from that one number. The preview block renders your pair as a large heading above smaller body text, so the verdicts can be read directly against the thing they are judging. Because both AA and AAA contrast levels are decided from that one pair, the page doubles as a combined text and background contrast report rather than a test of a single threshold.

Everything is decided from the single ratio the tool prints, and every threshold is shown at once instead of one level at a time:

• WCAG AA, normal text — 4.5 to 1, the baseline for running body copy, and the ratio most teams treat as the shipping gate.
• WCAG AA, large text — 3 to 1, the relaxed level that applies to text at roughly 24px, or 18.66px when bold.
• WCAG AAA, normal text — 7 to 1, the enhanced level for body copy.
• WCAG AAA, large text — 4.5 to 1, the enhanced level for large type.

Those thresholds all read from the same calculation, which is the standard WCAG 2.x contrast ratio. Each color is converted to sRGB, each channel is linearised out of its gamma curve, and the three linear values are weighted 0.2126 red, 0.7152 green and 0.0722 blue to give a relative luminance. The ratio is then the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which is why the scale runs from 1 to 1 for a color against itself up to 21 to 1 for pure black on pure white. This page rounds the result to two decimal places, because the thresholds sit close enough together that one decimal is not always enough to tell a pass from a fail.

Some limits are worth knowing before you treat a green badge as the whole story.

• The verdicts are text thresholds only. A 3 to 1 pass says a pair is acceptable for large type, and says nothing about whether the same pair can carry a paragraph.
• Only two colors are compared. A card, border or third surface layered behind the pair is not part of the calculation.
• Alpha is not an input. A translucent overlay has to be flattened against its real backdrop before the number means anything.
• The ratio is a property of two colors alone. Font weight, size and antialiasing change how a pair feels in use but never move the number.
• Non-text elements are out of scope. Component boundaries and focus rings are also judged at 3 to 1 here, but the component and focus checks exist because the conditions that make them pass are different.

Start with the pair you actually intend to ship, then read the badges in order of how the text will be used. Running body copy needs the AA normal badge, headings and display type can live with AA large, and AAA is worth chasing only where the contrast it demands does not flatten the design. If a pair sits just under a threshold and the color matters, adjust the background instead of the text color: a small change in the larger area moves the ratio further and is less visible once rendered.

How to use Contrast Checker

1. Set the text color in the first swatch and the background color in the second.
2. Read the contrast ratio printed in the second panel's title, to two decimal places.
3. Check the four badges below it, and note which of AA and AAA your pair satisfies for normal and large text.
4. Judge the preview block as well as the numbers, since a pair can pass at 4.5 to 1 and still read thinly at small sizes.

When to use Contrast Checker vs related tools

Use the contrast checker as the general-purpose gate for a single text-and-background pair, because it answers every WCAG 2.x threshold at once and does not commit you to one level. Reach for the contrast ratio calculator when the ratio itself is the deliverable, and the WCAG 2.1 AA checker or WCAG 2.1 AAA checker when a project has already committed to one level and you want a single verdict. Pairs that involve a visible boundary rather than text belong with the UI component contrast checker and focus indicator contrast checker, and any pair you suspect survives contrast but fails real reading should go through the text readability checker.

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 Checker