Design

WCAG Contrast Checker

Enter a text color and background color to check their contrast ratio against WCAG accessibility guidelines.

1.00:1
Contrast ratio
AA, normal text (4.5:1)
AAA, normal text (7:1)
AA, large text (3:1)
AAA, large text (4.5:1)

Large text sample (24px+)

Normal text sample, this is roughly what body copy looks like at this contrast.

About this tool

Contrast ratio measures how much a text color and its background color differ in relative brightness, on a scale from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so text stays readable for people with low vision or color vision deficiencies, and in bright or glare-heavy viewing conditions for everyone else.

AA vs. AAA, normal vs. large text

AA is the standard most sites aim for; AAA is a stricter, "enhanced" level. Large text (roughly 24px and up, or 19px+ bold) gets a lower required ratio than normal body text, since bigger letterforms stay legible at lower contrast. This tool checks your colors against all four thresholds at once: AA normal, AAA normal, AA large, AAA large.

What this doesn't check

This only evaluates solid text-on-solid-background contrast. It doesn't check contrast against images or gradients behind text, non-text UI elements like icons and form borders (which WCAG scores separately, at a 3:1 minimum), or color as the sole means of conveying information, which is a separate accessibility concern from contrast.