Free Online WCAG Color Contrast Checker

WCAG (Web Content Accessibility Guidelines) color contrast refers to the difference in luminance between foreground text and its background. Higher contrast makes text easier to read, especially for people with low vision or color vision deficiencies. WCAG defines specific minimum contrast ratios that websites must meet for accessibility.

WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and at least 3:1 for large text (18pt and above, or 14pt bold and above). Non-text UI components like form borders, icons, and focus indicators also require a 3:1 minimum contrast ratio.

WCAG Level AA is the standard compliance level that most organizations target. Level AAA is the highest and most stringent level, requiring 7:1 contrast for normal text and 4.5:1 for large text. AAA is recommended but not required in most regulations because it significantly limits color choices.

Contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. Luminance is derived from sRGB color values using a specific gamma correction formula defined in WCAG 2.1.

Large text is defined as 18 points (24px) or larger for regular weight, or 14 points (approximately 18.66px) or larger for bold weight. Large text has a lower minimum contrast requirement (3:1 for AA, 4.5:1 for AAA) because bigger characters are inherently easier to read.

Check the contrast ratio at the lowest-contrast point of the gradient — where the background color is closest to the text color. If the text passes at the worst point, it passes everywhere. For complex backgrounds (images, patterns), ensure the text has a solid background container or sufficient text shadow.

In many jurisdictions, yes. The ADA (Americans with Disabilities Act) in the US, the Equality Act in the UK, and the European Accessibility Act all reference WCAG as the standard for web accessibility. Government websites typically must meet WCAG 2.1 AA. Private sector requirements vary by jurisdiction and industry.

To improve contrast, darken the darker color or lighten the lighter color. Small adjustments often suffice — increasing the lightness difference by 10–15% can move a failing ratio to passing. This tool suggests nearby color values that meet the required ratio while staying as close as possible to your original design.