Color Contrast Checker

What is Color Contrast Checker?

Color Contrast Checker is a free online WCAG contrast ratio checker for designers, developers, and accessibility testers. It takes a foreground (text) color and a background color, computes the relative luminance of each, and reports the contrast ratio as a value from 1:1 to 21:1. It then tells you whether that ratio meets WCAG 2.1 Level AA (4.5:1 normal, 3:1 large) and Level AAA (7:1 normal, 4.5:1 large), and renders the two colors as a live sample-text preview so you can judge legibility at a glance. Use it to verify body text, buttons, links, and labels are readable before you ship a design.

How to use Color Contrast Checker

1. Type or paste the foreground (text) color as a HEX value, or click its native color picker to choose one visually.
2. Do the same for the background color the text sits on.
3. Read the contrast ratio output, shown as a value like 4.5:1 (1:1 is identical colors, 21:1 is pure black on white).
4. Check the AA and AAA badges for normal text and for large text (18pt / 14pt bold and up) to see which levels pass.
5. Look at the sample-text preview rendered with your two colors to confirm the text is comfortably legible.
6. Adjust either color until you reach the level of contrast your design needs.

Examples

Foreground #595959, Background #ffffff

Ratio 7.00:1 — passes AA and AAA for normal and large text

Foreground #999999, Background #ffffff

Ratio 2.85:1 — fails AA normal and AAA, passes nothing required for body text

Foreground #767676, Background #ffffff

Ratio 4.54:1 — passes AA normal and AA large, but fails AAA normal

Frequently asked questions

What contrast ratios does WCAG require?

WCAG 2.1 Level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. This checker shows a pass/fail badge for each of those four thresholds.

What counts as large text?

WCAG defines large text as 18pt (about 24px) and up, or 14pt (about 18.66px) and up when bold. Large text has a lower contrast requirement because bigger glyphs are easier to read, which is why the large-text badges can pass when the normal-text ones do not.

How is the contrast ratio calculated?

It uses the official WCAG formula: each color's relative luminance is computed from its linearized sRGB channels, and the ratio is (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white).

Does it support alpha, RGB, or named colors?

Input is HEX only (#rgb shorthand or #rrggbb), with a native color picker for each field. It does not account for alpha/opacity or partial transparency — combine semi-transparent layers into a solid color first, then check that.

Are my colors sent to a server?

No. The luminance and ratio math runs entirely in your browser with JavaScript — no colors are uploaded and nothing is sent to a server, so it works privately and even offline once the page has loaded.