Contrast Checker
Light gray text on a white background might look stylish in a design mockup but can be genuinely difficult or impossible for some visitors to read — including people with low vision, color blindness, or anyone using a phone screen in bright sunlight. This tool checks whether a text and background color combination meets the accessibility standards used to measure readable contrast.
How the contrast ratio is calculated
The tool follows the official WCAG (Web Content Accessibility Guidelines) formula, which calculates the "relative luminance" of each color (a measure of how bright it appears, accounting for how the human eye perceives different colors) and expresses the difference between the two as a ratio — from 1:1 (identical, no contrast) up to 21:1 (pure black on pure white, maximum contrast).
Understanding the AA and AAA pass/fail results
WCAG defines two conformance levels: AA is the widely-adopted standard most websites aim for, requiring at least 4.5:1 contrast for normal text and 3:1 for large text (18pt+ or bold 14pt+). AAA is a stricter standard, often required for government or highly accessibility-focused sites, requiring 7:1 for normal text and 4.5:1 for large text. Passing AA is generally considered the practical minimum bar for readable, accessible text on the web.
Frequently Asked Questions
Do I need to meet AAA, or is AA enough? AA is the standard most legal accessibility requirements (like the ADA in the US or similar regulations elsewhere) reference, and is a reasonable target for most projects; AAA is stricter and worth pursuing for content aimed at users with more significant visual impairments, but isn't always practical for every design choice.
What counts as "large text" for the lower 3:1/4.5:1 thresholds? Text that's at least 18-point (24px) regular weight, or at least 14-point (18.5px) bold, qualifies as large text under WCAG and gets the more lenient contrast requirement, since larger text is inherently easier to read even at lower contrast.
Is my color choice saved anywhere? No — the contrast calculation runs entirely in your browser using JavaScript; nothing is stored or transmitted.