How to Check a Color Pair for WCAG Compliance
Set your foreground color
Pick the text color using the foreground color picker, or type a six-digit hex code such as #1a1a1a into the hex field. The picker and the hex field stay in sync, so editing one updates the other. The contrast runs entirely in your browser, so your color values stay on your device.
Set your background color
Choose the background color the same way, with the background picker or by entering a hex value like #ffffff. The live preview immediately renders your sample text in the foreground color over the chosen background so you can see the real pairing, not just numbers.
Read the ratio and Pass or Fail badges
The contrast ratio updates instantly and is shown as a value like 4.5:1. Below it, four badges report Pass or Fail for AA Normal, AA Large, AAA Normal, and AAA Large. Nudge either color until the levels you care about turn green.
WCAG Contrast Thresholds the Tool Checks
This checker evaluates your foreground and background pair against the four WCAG 2.1 success criteria for text contrast. Each badge passes only when the computed ratio meets or exceeds the threshold below. Large text is defined as 18pt and larger, or 14pt bold and larger.
| Badge | Level | Text size | Minimum ratio | Typical use |
|---|---|---|---|---|
| AA Normal | AA | Body text | 4.5:1 | Paragraphs, labels, captions |
| AA Large | AA | Large text | 3:1 | Headings, large buttons |
| AAA Normal | AAA | Body text | 7:1 | Strict accessibility targets |
| AAA Large | AAA | Large text | 4.5:1 | Large text at the highest level |
| Foreground luminance | Reference | n/a | 0 to 1 | Relative brightness of the text color |
| Background luminance | Reference | n/a | 0 to 1 | Relative brightness of the background |
Which Contrast Level Should You Target
Body text on a website
Aim for AA Normal at 4.5:1 or higher. This is the practical baseline that most accessibility audits and legal guidelines expect for ordinary paragraph and label text.
Headings and large buttons
Large text only needs AA Large at 3:1. If a heading fails AA Normal but passes AA Large, it is still compliant as long as it is rendered at 18pt, or 14pt bold, or larger.
High-readability content
For long-form reading, low-vision users, or strict internal standards, target AAA Normal at 7:1. The extra margin keeps text legible in bright light and on lower-quality screens.
Disabled or decorative text
Purely decorative text and inactive controls are exempt from WCAG contrast rules. Use the luminance values to judge a subtle look, but do not rely on low-contrast text to carry meaning.
Common Problems and Fixes
The hex field is ignored
The tool only accepts a full six-digit hex value with a leading hash, such as #0066cc. Three-digit shorthand or missing characters are rejected and the tool falls back to the color picker value. Type all six digits to apply your color.
The ratio does not change when I type
An incomplete or invalid hex code leaves the previous valid color in place, so the ratio stays the same. Finish the six digits, or use the color picker, and the ratio and badges recalculate instantly.
A heading shows AA Normal as Fail but I think it is fine
AA Normal uses the 4.5:1 threshold. If your heading is genuinely large text, look at the AA Large badge instead, which uses 3:1. Confirm the text is at least 18pt, or 14pt bold, in your actual layout.
My color has transparency or uses RGBA
The checker computes contrast for solid colors only. If your text or background uses opacity, the visible color is a blend with whatever is behind it. Enter the final blended hex value so the ratio reflects what users actually see.