Contrast Text Checker

The contrast text checker measures one text and background pair against the WCAG 2.x contrast rules and reports the ratio, the luminance behind it and a pass or fail verdict for each level. You supply the two colours, the font size and the weight, and it decides whether the text counts as large before judging anything.

What is Contrast Text Checker?

The contrast text checker takes a foreground colour, a background colour, a font size in pixels and a weight, classifies the text, then measures the pair against the WCAG contrast ratio rules and returns a verdict for each conformance level that applies to it.

• Both colours accept a hex field or a picker, and each value is normalised before measurement so a three-digit shorthand and a six-digit value are compared identically.
• Font size is entered in pixels in half-pixel steps, and the weight selector spans 300 to 800.
• Large text is classified automatically: 24px or more at any weight, or 18.66px and above once the weight reaches 700, which is the 14pt bold boundary from WCAG 1.4.3.
• Verdicts are reported per level. AA needs 4.5 to 1 for normal text and 3 to 1 for large text; AAA needs 7 to 1 and 4.5 to 1 for the same split.
• The preview re-renders your own string at the chosen size and weight, then prints a second line at 75 percent of that size, floored at 11px, because small text is where a weak pair fails first.

The number itself comes from the standard relative luminance formula. Each channel is linearised out of the 0 to 255 sRGB value, the three are weighted 0.2126 red, 0.7152 green and 0.0722 blue, and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. That constant is what stops black on near-black from reporting an infinite ratio, and it is why every result carries two decimals. The panel prints both luminances to five decimals next to the normalised hex pair and the rendering-engine hex values, so a ratio that looks wrong can be traced to the colour that produced it rather than argued about.

• One pair is evaluated at a time. A hover state, a placeholder, a disabled control or a focus ring needs its own run.
• Contrast is measured between two flat colours, so text over a gradient, a photograph or a translucent overlay cannot be represented here.
• The verdict covers the ratio only. Size and weight affect the large text classification rather than the ratio, so raising the weight does not rescue a pair that fails at body size.
• The 3 to 1 requirement for interface borders and icons is stated in the footnote but not scored, since it applies to non-text elements rather than to a text pair.
• Nothing reads your stylesheet. The colours measured are the ones typed in, including any that never reach production.

Measure the pairs you actually intend to ship rather than reaching for the checker at the end: the muted grey used for captions, the label inside a filled button and the placeholder text are the three that fail most often. When a pair comes up short, changing the background usually preserves the design for longer than brightening the text, because it moves the whole surface rather than one string. If the palette itself is the problem, the color on color text checker compares several pairings in a single pass, the WCAG font size checker states the thresholds and spacing minimums that apply at a given size, and the contrast pairing checker does the same work across a font pairing rather than a single sample.

How to use Contrast Text Checker

1. Set the text colour and the background, either by picking from the colour wells or by typing the hex values into the fields beside them.
2. Enter the font size in pixels and choose the weight, so the tool can classify the text as large or normal before applying a threshold.
3. Read the contrast ratio, the classification and the luminance pair in the results box, then check the per-level verdict lines for the AA and AAA outcome.
4. Judge the pair in the preview, including the 75 percent secondary line, and edit the sample string to your own copy before making a decision.

When to use Contrast Text Checker vs related tools

Use it whenever a colour has to be justified against an accessibility requirement: a brand palette being applied to body copy, a caption colour that has drifted to light grey, or a dark-mode surface that was chosen by eye. It is also the fastest way to settle an argument about whether a pair is close enough, because the ratio and the thresholds are printed side by side. When the decision is about type rather than colour, the WCAG font size checker covers size, spacing and resize criteria, and the font accessibility evaluator scores a whole specification in one table.

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 Text Checker