Contrast Checker
Check whether text is readable on its background under WCAG 2.2. If it fails, get the closest color that passes.
Contrast ratio
–: 1
- AA Normal text (4.5:1)–
- AA Large text (3:1)–
- AAA Normal text (7:1)–
- AAA Large text (4.5:1)–
- AA Icons & UI (3:1)–
Large heading text
Normal body text. The quick brown fox jumps over the lazy dog.
Small print, such as captions and footnotes.
Button outlineNearest passing text color
Why contrast matters
About one in twelve men has some form of color blindness, and low-contrast text is hard for everyone to read on a phone in sunlight. WCAG 2.2 sets minimum contrast ratios, and many countries require them for public and commercial websites, including under the European Accessibility Act.
Enter your text and background colors to check them. If they fail, the tool suggests the closest color that passes, keeping your brand’s hue.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for icons and form borders. AAA requires 7:1 for normal text and 4.5:1 for large text.
How is the ratio calculated?
It compares the relative luminance of the two colors: (lighter + 0.05) ÷ (darker + 0.05). Results range from 1:1 (identical) to 21:1 (black on white).
How does the suggested fix work?
It keeps your text color’s hue and intensity and only changes its lightness, finding the closest version that meets the level you choose, so your brand color stays recognizable.