Free Tool
Color contrast checker
Enter your text and background colors; instantly see the WCAG 2.2 contrast ratio and whether it passes the AA and AAA levels.
Sample heading text
This preview shows how normal-size text will look with the colors you picked.
Per WCAG 2.2, normal text needs at least 4.5:1 contrast and large text (18pt+, or 14pt+ bold) at least 3:1. Level AAA asks for 7:1 and 4.5:1 respectively.
FAQ
Common questions about contrast
How is the contrast ratio calculated?
The relative luminance of the two colors is computed and compared with the formula (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (same color) to 21:1 (black on white).
Which elements does the contrast rule apply to?
All text, input fields, icons and focus indicators. Logos and purely decorative elements are exempt.
How do I find contrast issues across my whole site?
Instead of checking element by element, request a free accessibility test; we'll report the contrast and other WCAG issues across your pages.