Color Contrast Checker (WCAG)

What contrast ratio do I actually need?

WCAG AA (the legal standard referenced by most accessibility regulations, including ADA-related web guidance) requires 4.5:1 for normal text and 3:1 for large text. AAA, a stricter voluntary standard, requires 7:1 and 4.5:1 respectively.

What counts as "large text" for the lower threshold?

Text at 18pt (24px) or larger, or 14pt (18.66px) bold or larger, qualifies for the large-text thresholds, which are less strict than normal body text since larger text remains legible at lower contrast.

Does this apply to button and icon colors too, not just text?

WCAG has a separate 3:1 minimum for UI components and graphical objects (like icon outlines or input borders), distinct from the text contrast requirements. This tool checks the text-contrast formula specifically; UI-component contrast uses the same ratio calculation against the 3:1 threshold.

Why did my brand colors fail even though they look fine to me?

Perceived contrast and measured luminance contrast do not always match, especially with certain hue combinations (like some blue-on-white or brand pastel pairings) that look distinct to the eye but measure lower than expected mathematically. Trust the calculated ratio over visual impression when accessibility compliance matters.

Is meeting AA enough, or should I aim for AAA?

AA is the standard most legal and regulatory accessibility requirements reference and is a reasonable target for most business websites. AAA is stricter and genuinely better for readability but can be difficult to achieve with a distinctive brand palette; treat it as an aspirational target rather than a hard requirement unless your specific use case demands it (e.g. content for visually impaired users specifically).