Free Color Contrast Checker

Color contrast ratio measures the difference in luminance between two colors, expressed as a ratio like 4.5:1. The higher the ratio, the more readable text will be. A ratio of 1:1 means no contrast (same color), while 21:1 is the maximum (black on white).

WCAG (Web Content Accessibility Guidelines) defines two conformance levels for color contrast. AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility regulations require at least AA compliance.

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.66px) or larger for bold text. Large text has lower contrast requirements because its increased size makes it inherently easier to read.

Sufficient color contrast ensures that text is readable for people with low vision, color blindness, or those viewing content in challenging conditions like bright sunlight. It is a legal requirement under accessibility laws like the ADA and the European Accessibility Act.

To increase contrast, make the dark color darker or the light color lighter. You can use the swap button to test reversed combinations. For brand colors that fail, consider using them only for large text or decorative elements, and choose a darker or lighter variant for body text.