The color contrast ratio calculator measures accessibility compliance for text colors. Enter foreground and background hex codes to get the exact contrast ratio and WCAG AA/AAA pass/fail status for normal text, large text, and UI components.
Understanding WCAG Contrast Requirements
WCAG (Web Content Accessibility Guidelines) defines contrast requirements to ensure text is readable by people with low vision or color blindness. The contrast ratio compares the relative luminance of two colors: 1:1 is no contrast (same color), 21:1 is maximum contrast (black on white).
WCAG AA vs AAA
AA (minimum compliance): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced compliance): 7:1 for normal text, 4.5:1 for large text. Most websites target WCAG AA. AAA is recommended for sites serving users with significant vision impairment.
Frequently Asked Questions
Is this contrast ratio calculator free?
Yes, completely free with no signup required.
What is WCAG AA vs AAA?
WCAG (Web Content Accessibility Guidelines) defines two conformance levels for contrast. AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text.
What is considered 'large text' for WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has lower contrast requirements because it is easier to read.
How is contrast ratio calculated?
Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance uses gamma-corrected sRGB values.
What contrast ratio should I use for body text?
For body text, aim for at least 4.5:1 (WCAG AA) as a minimum. For better accessibility, target 7:1 (WCAG AAA). The most common accessible combination is black text (#000000) on white (#FFFFFF), which has a contrast ratio of 21:1.