How to check color contrast
- Enter or pick a text color and a background color.
- Read the contrast ratio and the pass/fail results for each WCAG level.
- If it fails, click the suggested color, a darker or lighter version of your text color that passes AA.
Why contrast matters
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more people read screens in bright sunlight or have reduced vision with age. Low-contrast text is one of the most common accessibility failures on the web. Fixing it helps everyone read your content, and it is required by WCAG, which underpins accessibility law in many countries.
Common pitfalls
- Light gray placeholder and helper text often fails at 4.5:1.
- White text on brand colors like orange, yellow or light green rarely passes for small text.
- Icons and form borders need at least 3:1 against their background.
Related: HEX/RGB/HSL Converter.
How to fix a failing color pair
- Darken the text on light backgrounds or lighten it on dark backgrounds. The suggestion button finds the closest passing color with the same hue.
- Make the text larger or bolder. Large text (24px, or 18.66px bold) needs only 3:1 for AA.
- Change the background instead of the text when the text color is part of your brand.
- Add an outline or underline for links so they don’t rely on color alone.
Contrast in dark mode
Dark themes need the same contrast ratios. Pure white text on pure black passes easily but can feel harsh; many designers use an off-white such as #e8eaf0 on a dark gray such as #161a22, which still passes AAA. Watch out for colored links and buttons: a brand blue that works on white is often too dark on a dark background.
What about WCAG 3 and APCA?
A newer contrast method called APCA is being explored for a future WCAG 3. It accounts for font size and weight more precisely. It is not yet part of any legal standard, so WCAG 2.2 ratios remain the requirement for compliance today.
Contrast for non-text elements
WCAG 2.2 also requires 3:1 contrast for the parts of user interface components and graphics needed to understand them, such as input borders, focus indicators, icons and chart lines. Test these with the same tool by entering the element color and its background.
Testing a whole palette
Check every text color against every background it appears on, including hover and disabled states, placeholder text, and text on images or gradients. For text over images, test against the lightest and darkest areas behind the text.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 24px (18pt) regular, or at least 18.66px (14pt) bold.
Is AA enough for legal compliance?
Most accessibility laws and standards, including the ADA (as interpreted in the US), Section 508, EN 301 549 and the European Accessibility Act, reference WCAG level AA.
How is the ratio calculated?
It compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Ratios range from 1:1 (identical) to 21:1 (black on white).