About the Color Contrast Checker
Text that does not stand out enough from its background is hard to read for people with low vision or color blindness, for older users, and for anyone reading a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at the stricter AAA level. This checker calculates the exact ratio for any two colors and tells you which levels they meet, with a live preview.
How to use it
- Choose the text (foreground) color and the background color with the pickers, or type HEX, RGB or HSL values.
- Read the contrast ratio, from 1:1 (no contrast) to 21:1 (black on white).
- Check which WCAG levels pass. If a level fails, darken or lighten one of the colors until it passes.
- Use the swap button to test the colors the other way around.
Frequently asked questions
What counts as large text?
WCAG defines large text as at least 18 points (24 CSS pixels) in regular weight, or at least 14 points (about 18.7 CSS pixels) in bold.
Which level should my website meet?
Level AA is the target in most accessibility laws and policies worldwide, including the European Accessibility Act and the ADA in the US. AAA is recommended for long reading text where possible.
What is the “UI components” check?
WCAG 2.1 and later require a 3:1 contrast for the visible parts of controls, such as input borders and icons, and for meaningful graphics, against the colors next to them.