Free WCAG Color Contrast Checker
Pick any two colors and instantly see the WCAG 2.1 contrast ratio, with pass/fail badges for AA, AAA, large text, and non-text UI components. Runs entirely in your browser — no signup, no upload.
Contrast checker
Enter a hex value like #1a2b3c or #abc.
Enter a hex value like #ffffff or #fff.
WCAG 2.1 relative luminance formula
| WCAG criterion | Minimum | Result |
|---|---|---|
| AA, normal text (1.4.3) | 4.5:1 | Fail(4.48 below minimum of 4.5) |
| AA, large text (1.4.3) | 3:1 | Pass(4.48 meets minimum of 3) |
| AAA, normal text (1.4.6) | 7:1 | Fail(4.48 below minimum of 7) |
| AAA, large text (1.4.6) | 4.5:1 | Fail(4.48 below minimum of 4.5) |
| AA, UI components & graphics (1.4.11) | 3:1 | Pass(4.48 meets minimum of 3) |
What the WCAG contrast ratios actually mean
The Web Content Accessibility Guidelines (WCAG) describe color contrast as a ratio between the relative luminance of the foreground and background. The ratio runs from 1:1 (the two colors are identical, so the text is invisible) to 21:1 (pure black on pure white). The higher the ratio, the easier text and interface elements are to perceive for people with low vision, color vision deficiencies, or anyone reading on a glaring screen in bright sunlight.
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum, Level AA) requires a ratio of at least 4.5:1 for normal body text, and at least 3:1 for large text. Success Criterion 1.4.6 (Contrast Enhanced, Level AAA) raises those thresholds to 7:1 and 4.5:1. Success Criterion 1.4.11 (Non-text Contrast, Level AA) extends the idea to UI components and meaningful graphics, requiring at least 3:1 against adjacent colors — for example, the border of an input field, an icon used as a button, or a focus indicator.
The 4.5:1 threshold isn't arbitrary. It was chosen so that people with around 20/40 vision (a common level of age-related visual decline) can still comfortably read body copy without assistive technology. The 3:1 large-text exception exists because larger letterforms are easier to perceive at lower contrast — but "large" has a specific definition. Per WCAG, large text is text that is at least 18 point (about 24 CSS pixels) or 14 point bold (about 19 CSS pixels bold). Most body copy on the web is 14–16px, which falls under the stricter 4.5:1 requirement.
Common mistake: treating 16px as large text
A frequent error is to assume that "large text" means anything bigger than the default body size. It doesn't. A 16px paragraph, a 16px button label, and a 16px caption all need to meet the full 4.5:1 minimum. Only when the text crosses the 24px (or 19px bold) line does the 3:1 exception kick in.
UI components — checkboxes, radio buttons, the border of an input, the icon that acts as your sole "search" affordance — also need at least 3:1 against whatever they sit on top of. A light gray icon on a white background may look modern, but if the icon is the only way to identify the control, it falls under 1.4.11 and needs the 3:1 minimum.
How to fix a failing combination
There are three reliable ways to push a failing pair across the threshold:
- Darken or lighten one side. The fastest fix is usually to move the lighter color lighter or the darker color darker. For text-on-white, dropping
#777777to around#595959takes you from a fail to a pass at 4.5:1. - Change hue. Some hue combinations (yellow on white, light blue on white) are inherently low-contrast no matter how saturated they are. Swap to a hue with a darker natural luminance.
- Increase size or weight. If the design calls for the lighter color, you can bump the text to 24px (or 19px bold) so it qualifies under the 3:1 large-text exception. This is not a license to use any contrast you want — it's a narrow allowance for genuinely large headlines.
Limits of the contrast ratio
The ratio is a useful objective number, but it has real limits. It assumes two solid, opaque colors. It cannot tell you anything reliable about text on a gradient, text on a background image, text with a translucent overlay, or text with a semi-transparent foreground color. In those cases you need to evaluate each region of the background separately or add an opaque scrim behind the text.
The ratio also doesn't capture context. A 4.5:1 hairline font may technically pass while still being painful to read. And it doesn't apply to disabled controls, pure decoration, or logotypes — those are explicitly exempted from the contrast minimums. Treat this tool as a fast first check, then sanity-test the result with real content on the device and lighting conditions your users actually use.
This tool is informational and is not legal advice. WCAG conformance is one input into accessibility, not the whole picture. For legal guidance, consult qualified counsel. For full conformance, combine automated checks with manual testing by people who use assistive technology.
Find every contrast failure on your site automatically
This tool checks one color pair at a time. ADA CodeFix crawls a page and flags every text and UI element that falls below the WCAG 2.1 AA contrast minimum, with the exact selector and a suggested fix.
Scan My Site FreeRelated guides
Step-by-step fixes for text, buttons, icons, and focus indicators that fail the contrast minimum.
WCAG 1.4.3 Contrast (Minimum)The AA criterion that defines the 4.5:1 and 3:1 thresholds for normal and large text.
WCAG 1.4.11 Non-text ContrastWhy UI components, focus rings, and meaningful graphics also need a 3:1 minimum.
Focus-visible stylesBrand-friendly focus indicators that keep keyboard users oriented and meet the contrast minimum.