WCAG contrast checker
Check whether your text and background colors meet WCAG 2.2 AA and AAA. If they fail, get the nearest passing color with the same hue.
- ✓ Pass AA normal text 4.5:1
- ✓ Pass AA large text 3:1
- ✓ Pass UI components & icons 3:1
- ✕ Fail AAA normal text 7:1
- ✓ Pass AAA large text 4.5:1
Large heading text
Normal body text at 16px. The quick brown fox jumps over the lazy dog, and the contrast between these two colors decides whether everyone can read it.
Small print at 13px — footnotes and captions fail first.
Suggested fixes
Lightness is adjusted in OKLCH, keeping hue and chroma, so the color still looks like yours.
How the contrast ratio is calculated
Step through the WCAG formula with your own two colors. Change the colors above and the numbers update.
1. Read the 0–255 channels
R 107 · G 107 · B 128R 255 · G 255 · B 255What the WCAG levels mean
AA is the level most laws and procurement rules point to, including the European Accessibility Act, Section 508 in the US and the UK public sector regulations. AAA is stricter and recommended for long reading and for audiences with low vision. “Large text” means at least 18pt (24px) regular or 14pt (about 18.66px) bold.
Contrast rules also cover non-text elements: input borders, icons and focus indicators need 3:1 against what is next to them (WCAG 1.4.11). Placeholders count as text, so they need 4.5:1 too.
Checking a whole palette? The accessible palette checker tests every pair at once and simulates color blindness.
Frequently asked questions
What contrast ratio does WCAG require?
WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text (at least 24px regular or 18.66px bold) and for meaningful UI components and graphics (Success Criteria 1.4.3 and 1.4.11). Level AAA requires 7:1 for normal text and 4.5:1 for large text (1.4.6).
How is the contrast ratio calculated?
Each color is converted to relative luminance L (linearised sRGB, weighted 0.2126 R + 0.7152 G + 0.0722 B). The ratio is (L_lighter + 0.05) / (L_darker + 0.05), which ranges from 1:1 to 21:1.
Why does WCAG say my color fails when it looks fine?
The WCAG thresholds are strict: 4.49:1 is a fail. Screens, brightness and eyesight vary; roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and low vision is common with age. Meeting the ratio makes text readable for far more people.
What about APCA and WCAG 3?
APCA is a newer contrast method proposed for the future WCAG 3. It is still a draft; WCAG 2.2 ratios remain the legal and industry standard (for example under the European Accessibility Act and ADA case law), so this checker reports WCAG 2.2.
Does the checker handle transparency?
Yes. Lower the text opacity slider and the text color is blended over the background before the ratio is computed, which is how browsers render semi-transparent text such as rgba(0, 0, 0, 0.6).