Colour Contrast Checker
Check WCAG AA and AAA contrast ratios between foreground and background colours instantly in your browser. Ensure your designs meet accessibility standards.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in perceived luminance between two colours. A ratio of 1:1 means identical colours; 21:1 is the maximum (black on white). Higher ratios mean better readability for people with low vision.
What are the WCAG AA and AAA thresholds?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most jurisdictions.
How is the contrast ratio calculated?
Each colour channel (R, G, B) is linearised from sRGB, then the relative luminance L = 0.2126R + 0.7152G + 0.0722B is calculated. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), giving a value between 1 and 21.