WCAG Color Contrast Checker
Enter a text color and a background color to check their contrast ratio against WCAG 2.2 Level AA and AAA. It updates as you type, and nothing you enter leaves your browser.
Check contrast
Text Color
Background Color
Normal Text under 18pt, or under 14pt bold
- Level AA — 4.5:1Pass
- Level AAA — 7:1Pass
Large Text 18pt+, or 14pt+ bold
- Level AA — 3:1Pass
- Level AAA — 4.5:1Pass
UI Components & Graphics icons, borders, focus outlines
- Level AA — 3:1Pass
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps.
How WCAG Contrast Requirements Work
WCAG measures contrast as a ratio between 1:1 (identical colors) and 21:1 (pure black on pure white), based on the relative luminance of each color, not simply how different they look. Two colors that look quite different to the eye can still fail if they are similarly light or similarly dark.
Text has a lower bar than you might expect at Level AA: 4.5:1 for normal text and 3:1 for large text, defined under WCAG 1.4.3 Contrast (Minimum). Meaningful non-text elements, such as icon outlines, input borders and the focus indicator itself, need at least 3:1 under WCAG 1.4.11 Non-text Contrast. Decorative elements and disabled controls are exempt from both. The W3C explains both in detail in Understanding Contrast (Minimum) and Understanding Non-text Contrast.
Contrast is one of the most common failures found on real websites, and one of the easiest to fix once you know which pairs are failing. Picking colors for a chart or infographic? Try the chart color checker, which also tests your palette for color blindness. For a full picture of your site rather than one color pair at a time, run the free scanner below.
What contrast ratio does WCAG require?
At Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. Level AAA raises those to 7:1 and 4.5:1. User interface components and meaningful graphics, such as icon outlines, form field borders and focus indicators, need at least 3:1 at Level AA under WCAG 1.4.11.
What counts as "large text" under WCAG?
Text that is at least 18 point (roughly 24 CSS pixels), or at least 14 point (roughly 18.66 CSS pixels) and bold. Everything smaller counts as normal text and needs the higher contrast ratio.
Does this tool check my whole website, or just two colors?
This tool checks any single pair of colors you enter. To scan every page on your site for contrast failures automatically, alongside every other WCAG issue, use the free full-site scanner below.
Do you store the colors I enter?
No. The contrast ratio is calculated entirely in your browser using the WCAG relative luminance formula. Nothing you enter is sent to AccessBell or anyone else. The web address updates so you can share a link to a specific result, and that link contains only the two hex codes.
My colors fail. What should I do?
Try darkening the text color, lightening the background, or the reverse, until the ratio reaches your target. This tool suggests a passing shade automatically when Normal Text AA fails. Small changes in lightness usually fix contrast without needing a completely different color.
Monitor Contrast on Every Page
Your colors change as your site grows. Start a 3-day free trial and AccessBell rechecks contrast and every other WCAG rule on up to 500 pages per domain, every day.
Then $29/mo per domain. Cancel anytime.