Color Contrast Checker
Design ToolsCheck color contrast
Sample Text
The quick brown fox jumps over the lazy dog.
Small text for contrast testing purposes.
21.00:1
Contrast Ratio
AA Normal
≥ 4.5:1
PASSAA Large
≥ 3:1
PASSAAA Normal
≥ 7:1
PASSAAA Large
≥ 4.5:1
PASSAbout Color Contrast Checker
Check WCAG accessibility contrast ratios between colors.
Was this tool helpful?
Frequently Asked Questions
What is color contrast ratio?
Color contrast ratio measures the difference in luminance between two colors, expressed as a ratio from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability.
What are WCAG AA and AAA requirements?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. These standards ensure content is readable for people with visual impairments.
What counts as large text for WCAG?
Large text is defined as 18pt (24px) and above for regular weight, or 14pt (approximately 18.66px) and above for bold weight. Large text has lower contrast requirements because its size makes it easier to read.
Is my data safe?
Yes! All processing happens entirely in your browser. Your color values are never sent to any server. No data is collected, stored, or transmitted.
How is contrast ratio calculated?
The contrast ratio is calculated using the relative luminance of each color as defined by the WCAG 2.1 specification. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color luminance and L2 is the darker.
Ad
728 × 90