How to use the Color Contrast Checker
- Type or pick the text and background colors. HEX, RGB and HSL all work.
- Read the contrast ratio and the pass or fail results.
- If it fails, click Fix text or Fix background to get the nearest passing shade.
- Check the live preview, then copy the colors.
WCAG contrast requirements
| AA | AAA | |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (24px, or 18.66px bold) | 3 : 1 | 4.5 : 1 |
| UI components and graphics (borders, icons, focus rings) | 3 : 1 | - |
Most laws and accessibility policies, including the European Accessibility Act and the ADA in the US, point to WCAG level AA.
How the ratio is calculated
Each color's relative luminance is worked out from its red, green and blue values (adjusted for how screens display them), from 0 for black to 1 for white. The ratio is (lighter + 0.05) ÷ (darker + 0.05), so it runs from 1:1 (same color) to 21:1 (black on white).
About transparency
Semi-transparent colors (like rgba(0,0,0,0.6)) are blended onto the background first, which is how they actually appear. To check against an image, pick the lightest and darkest parts of the image behind the text. The color picker on our sister site, curlytab, can read colors straight from an image or your screen.
Frequently asked questions
Is there a free WCAG contrast checker that suggests a passing color?
Yes. curlybits' Color Contrast Checker shows the contrast ratio and AA/AAA results for normal text, large text and UI parts, and its Fix buttons find the closest shade of your text or background color that passes. It's free, follows WCAG 2.2 and runs in your browser.
What is a good contrast ratio?
At least 4.5:1 for body text (WCAG AA). 7:1 or more is better for long reading and older screens.
Does white text on my brand color pass?
Paste your brand color as the background and #ffffff as the text. If it fails, the fix button finds the closest shade of your brand color that passes.
Is the new APCA method included?
Not yet. APCA is proposed for WCAG 3, which is still a draft; WCAG 2.2 is the standard in use today.
Is anything uploaded?
No. Everything is calculated in your browser.
Updated