Color Contrast Checker
Check WCAG color contrast ratios for accessibility
Converge Team
Colors
Large Text Preview
Normal body text preview. Check if this is easy to read against the background color.
Results
A color contrast checker measures the readability of text against its background by calculating the contrast ratio defined in the Web Content Accessibility Guidelines (WCAG 2.1). It tells you whether your color combinations meet accessibility standards — and whether people with visual impairments can read your content. Use it alongside our color palette generator to build accessible brand palettes from scratch.
According to WebAIM's 2024 accessibility analysis of 1 million home pages, low contrast text is the single most common accessibility error, found on 83.6% of all websites tested. This means the vast majority of websites fail to meet the minimum contrast requirements that make text readable for people with visual impairments.
The business case is significant. The WHO estimates that 2.2 billion people globally have some form of vision impairment. In the US alone, the CDC reports that 12 million people aged 40+ have vision impairment. Accessible design isn't just ethical — it's practical, affecting a substantial portion of your audience.
WCAG 2.1 defines two conformance levels: AA requires a 4.5:1 ratio for normal text (3:1 for large text), while AAA requires 7:1 for normal text (4.5:1 for large text). This tool calculates both levels instantly as you pick colors, so you can find accessible combinations without guessing.
How to Use This Generator
- Set foreground color: Pick or enter the text color (usually darker).
- Set background color: Pick or enter the background color (usually lighter).
- Read the ratio: The contrast ratio and WCAG pass/fail status update instantly.
- Adjust until compliant: Modify colors until you see green checkmarks for your target conformance level.
Pro Tips
- Aim for AA minimum: 4.5:1 for body text is the legal standard in most jurisdictions. AAA (7:1) is better but not always required.
- Test your actual colors: Don't just check black-on-white. Test your brand colors, link colors, button text, and placeholder text — these are where contrast failures hide.
- Don't forget hover and focus states: Interactive elements often change color on hover. Both the default and hover states need sufficient contrast.
- Large text is more forgiving: Headings at 24px+ only need 3:1 contrast. Use this to allow more brand color flexibility in headings while keeping body text strictly compliant.