What is a WCAG color contrast ratio?

It is a number from 1:1 to 21:1 that compares the relative luminance of two colors. Higher means more readable. WCAG 2.x defines minimum ratios so that text remains legible for people with low vision or color deficiencies. This tool computes the exact ratio using the official sRGB luminance formula.

What contrast ratio do I need to pass AA and AAA?

Level AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18.66px bold or 24px regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. User-interface components and meaningful graphics need 3:1 under success criterion 1.4.11.

What counts as large text?

WCAG defines large text as at least 18.66px (14pt) bold, or at least 24px (18pt) at any weight. Large text gets a lower threshold because thicker strokes are easier to read, so a 3:1 pair that fails for body copy can still pass AA for a heading.

Does color opacity affect the contrast ratio?

Yes. Semi-transparent text blends with whatever is behind it, lightening or darkening the effective color. This checker composites your foreground over the background at the opacity you set, then measures the real on-screen contrast rather than the raw color value.

Why does black on white give exactly 21 to 1?

Pure black has a relative luminance of 0 and pure white has a luminance of 1. The contrast formula is (lighter + 0.05) / (darker + 0.05), which gives (1 + 0.05) / (0 + 0.05) = 21. That is the maximum possible contrast; no pair can exceed it.

Is my color data sent anywhere?

No. Every calculation, the live preview, and your saved pairs all run and stay inside your browser using local storage. Nothing is uploaded, logged, or shared, so you can safely test unreleased brand colors.

Color Contrast Checker

A WCAG color contrast checker that takes a text color and a background color and tells you the exact contrast ratio, then grades it against the AA and AAA thresholds for normal text, large text, and user-interface components. A live preview shows real headings, body copy, captions, and a bordered button rendered in your two colors, so you can see and measure readability at the same time. It is built for designers, developers, and accessibility reviewers who need a fast, trustworthy contrast number before shipping a palette.

How it works

Every color is parsed from hex (#rgb, #rrggbb, or 8-digit #rrggbbaa) or from an rgb() / rgba() string into red, green, and blue channels. Each channel is converted to linear light and combined into a relative luminance value using the official sRGB coefficients (0.2126 R, 0.7152 G, 0.0722 B). The contrast ratio is then (L_light + 0.05) / (L_dark + 0.05), which ranges from 1:1 for identical colors up to a hard ceiling of 21:1 for black on white.

When you reduce the foreground opacity, the tool first alpha-composites the text color over the background, because semi-transparent text never reaches its raw color on screen — it measures the blended result instead. The pass/fail matrix compares the final ratio to the five WCAG cutoffs (4.5, 3, 7, 4.5, and 3) and marks each as a pass or fail. If a pair fails AA, the suggest passing foreground button tries pure black or white against your background and applies whichever clears 4.5:1. You can swap the two colors, save tested pairs as swatches, and copy a plain-text report for your design notes or a pull-request comment.

Example

Suppose your brand uses a mid grey #767676 for captions on a white #ffffff background. The checker reports a ratio of about 4.54:1 — it scrapes past AA for normal text but fails AAA. Lighten the grey to #999999 and the ratio drops to roughly 2.85:1, which now fails AA entirely and would be illegible for many low-vision readers.

Foreground	Background	Ratio	AA normal	AAA normal
`#000000`	`#ffffff`	21.0:1	Pass	Pass
`#1a1a1a`	`#ffffff`	17.4:1	Pass	Pass
`#767676`	`#ffffff`	4.54:1	Pass	Fail
`#999999`	`#ffffff`	2.85:1	Fail	Fail
`#ffd500`	`#000000`	16.4:1	Pass	Pass

Drop the captions to a darker grey and the same row flips to a comfortable AAA pass. Because the math runs live as you type, you can dial in the lightest shade that still clears your target level in seconds — and everything stays in your browser.