Color Contrast Checker
Check the contrast ratio between two colors and verify WCAG 2.1 AA and AAA compliance for text, large text, and UI components.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with visual impairments. The ratio is calculated from the relative luminance of the two colors: (L1+0.05)/(L2+0.05) where L1 is the lighter color's luminance. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
WCAG 2.1 requirements
Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical elements require 3:1 against adjacent colors at level AA.
What counts as large text?
Under WCAG, large text is defined as at least 18 point (24px) normal weight, or 14 point (approximately 18.67px) bold. Large text has a lower contrast requirement because it is easier to read.
Do decorative elements need to pass?
No. Purely decorative elements that convey no information, inactive UI components (disabled states), and logos are exempt from WCAG contrast requirements.
What is the difference between AA and AAA?
AA is the minimum standard for most legal and regulatory requirements. AAA is the enhanced level providing even better accessibility for users with severe visual impairments. Not all content can realistically achieve AAA.