Accessibility
Color Contrast Checker
Enter a text color and a background color to see their WCAG contrast ratio and whether the pair passes AA and AAA. White on royal blue #4169E1 scores 4.84:1, which passes AA for normal text.
| Requirement | Result |
|---|
Normal text sample: the quick brown fox jumps over the lazy dog.
Large text sample
Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.
How to use the Contrast Checker
- Enter the text color and the background color with the pickers or by typing HEX, rgb() or hsl() values.
- Read the contrast ratio and the verdict. The table lists Pass or Fail for each WCAG requirement in words, not only color.
- Check the live preview of normal text, large text and a button.
- If the pair fails, use a suggested text color that keeps your hue and passes, or press Swap colors to test the reverse.
Examples
A pair that passes AA
White on #4169E1 is 4.84:1. It passes AA for normal text (4.5:1) and large text (3:1) but not AAA (7:1).
One digit makes the difference
#767676 on white is 4.54:1 and passes AA. #777777 is 4.47:1 and fails. The ratio is truncated, not rounded up.
Reaching AAA
#595959 on white reaches 7.00:1, which passes AAA for normal text.
Large text only
White on #E5484D is 3.91:1. That is fine for large headings and interface components, but too low for body text.
Tips
- Test every text and background pair in your design, including hover, focus and disabled states.
- Do not use color alone to show meaning: add text, icons or patterns too.
- For the full guide, read the contrast guide on this site.
Questions about the Contrast Checker
What contrast ratio do I need?
WCAG 2 level AA asks for 4.5:1 for normal text and 3:1 for large text and for user interface components such as button borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of at least 18 point (24 CSS pixels) in regular weight, or at least 14 point (about 18.7 CSS pixels) in bold.
Why is the ratio truncated rather than rounded?
So a pair is never shown as meeting a threshold it does not meet. A true ratio of 4.478:1 is displayed as 4.47:1, not rounded up to 4.48 or 4.5.
Does passing the ratio guarantee readable text?
No. Font size, weight, spacing and the reader's screen and lighting matter too. Treat the WCAG ratio as a minimum, not a guarantee.
How does the suggested color work?
If a pair fails, the tool changes the lightness of your text color while keeping its hue and saturation, and offers the nearest color that reaches the target ratio.
Related tools
Color Blindness Simulator
Preview colors and images as people with color vision deficiency may see them.
Color Picker
Pick any color and copy its HEX, RGB, HSL and CMYK values.
Color Palette Generator
Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.
Tints, Shades & Tones Generator
Create lighter tints, darker shades and muted tones of any color.
Want the background? Read Color Contrast and Accessibility.