Color Contrast Checker
Check WCAG color contrast between two hex colors — pass/fail for AA and AAA levels.
Check WCAG color contrast accessibility
Enter a foreground and background color in hex format and the contrast ratio is computed instantly using the WCAG 2.1 relative luminance formula. The tool shows pass or fail for all four accessibility checkpoints: AA and AAA for both normal text and large text or UI components. Use the color pickers for visual selection, or type values directly.
WCAG defines three conformance levels. Level AA is the standard requirement for most websites and requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA is the enhanced standard, requiring 7:1 and 4.5:1 respectively. The maximum possible ratio is 21:1, achieved by black on white.
FAQ
What counts as large text? WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (approximately 18.67px) bold weight.
Is alpha transparency supported? No. The tool works with fully opaque hex colors. For semi-transparent colors, composite the color against the background first.