Colour Contrast Checker
Test any text and background combination against WCAG AA and AAA accessibility standards, with a live preview.
The quick brown fox
jumps over the lazy dog.
Accessible colour contrast makes your text readable for everyone, including people with low vision. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios. This tool checks your colours against all four thresholds instantly.
Enter a text colour and a background colour, then read off the contrast ratio and which standards it passes. Adjust until you hit at least AA for body text.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.
What counts as 'large text'?
Large text is at least 18pt (roughly 24px), or 14pt (roughly 18.66px) if bold. Larger text is easier to read, so it's allowed a lower contrast ratio.
How is the contrast ratio calculated?
It's based on the relative luminance of the two colours: (lighter + 0.05) / (darker + 0.05). Ratios range from 1:1 (identical colours) to 21:1 (pure black on pure white). This tool uses the exact WCAG formula.
Does this work for colour-blind users?
Contrast ratio is one part of accessibility but doesn't capture everything. Avoid relying on colour alone to convey meaning, and test your palette with a colour-blindness simulator as well.
More free tools
Metadata Viewer
See hidden data in your photos and PDFs: GPS location, camera info, author details.
SecurityPassword Generator
Generate strong, random passwords with customisable rules. Created locally, never sent anywhere.
SEORobots.txt Generator
Build and validate a robots.txt file for search engine crawlers in seconds.
Need this built into your product?
HG Studio builds custom tools, automations, and web apps. Let's talk.
Work with HG Studio