Check the contrast ratio between two colours against WCAG AA and AAA accessibility levels.
How to use the Contrast Checker
Pick a text colour and a background colour.
Read the contrast ratio and the WCAG pass or fail badges.
Adjust the colours until they pass the level you need.
Frequently asked questions
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
Text that is at least 24px (18pt), or 18.66px (14pt) when bold. Large text is allowed a lower contrast ratio.
From the relative luminance of each colour using the official WCAG formula, giving a value from 1:1 (no contrast) to 21:1 (black on white).
A WCAG color contrast checker that shows the exact contrast ratio between a text and background colour and whether it meets AA and AAA accessibility levels.
Pick colours with the swatch or by hex code and see a live preview. Good contrast makes your site readable and accessible.
Related tools
Generate SHA-1, SHA-256, SHA-384 and SHA-512 hashes of any text, right in your browser.
Convert colors between HEX, RGB and HSL with a live preview.
Convert Unix timestamps to human dates and back — UTC, local, ISO 8601 and relative time. Seconds and milliseconds are auto-detected.
Percent-encode and decode URLs and URL components, UTF-8 safe.
We use essential cookies to run the site. With your consent we also load Google AdSense, which sets advertising cookies. See our privacy policy.