Contrast Checker
Check WCAG color contrast ratios for accessibility.
Sample Text
This is how your text will appear on the background.
Small text example for testing readability.
Contrast Ratio
21.00:1
WCAG AA
WCAG AAA
How to use this tool
- Select your foreground (text) color using the color picker.
- Select your background color.
- View the contrast ratio and WCAG compliance results.
- Click 'Swap Colors' to switch foreground and background.
- Aim for at least 4.5:1 for normal text, 3:1 for large text.
About this tool
Contrast Checker helps ensure your website is accessible to users with visual impairments. WCAG (Web Content Accessibility Guidelines) defines contrast requirements: Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these standards helps users with low vision or color blindness read your content.
Frequently asked questions
What contrast ratio does WCAG require?
Level AA needs 4.5:1 for normal body text and 3:1 for large text, where large means 18pt and above or 14pt bold and above. Level AAA raises those to 7:1 and 4.5:1. User interface components and graphical objects need 3:1 against what is next to them.
What does a contrast ratio actually measure?
The relative luminance of the lighter colour plus 0.05, divided by the same for the darker one. Ratios run from 1:1 for two identical colours to 21:1 for pure black on pure white. It measures perceived lightness difference, not how different the hues are.
Why do two very different colours sometimes fail?
Because contrast depends on lightness, not hue. A saturated red and a saturated green look nothing alike but can sit at almost the same luminance, giving a ratio near 1:1. That pairing is also close to invisible to anyone with red-green colour deficiency, which is the majority of colour blindness.
Is 3:1 enough for body text?
No. 3:1 is the threshold for large text only. Body copy at ordinary sizes needs 4.5:1 to pass AA. Interfaces very often fail here through light grey placeholder and helper text, which is one of the most common accessibility defects on the web.
Do these rules apply to logos and decorative images?
No. WCAG explicitly exempts logotypes and purely decorative graphics, along with text that is part of an inactive interface element. Anything conveying information to the reader does have to meet the ratio.
How do I fix a failing colour combination?
Change the lightness rather than the hue, which keeps your brand recognisable. Darkening a mid-tone brand colour for text on white usually fixes it in one step. If both text and background must stay, adding a subtle shadow or a solid backing panel behind the text is often more practical than reworking the palette.