Colour theory · Palettes · Design inspirationPractical guides for everyday creativity
ACCESSIBILITY TOOL

Colour Contrast Checker

Check the contrast ratio between text and background colours and compare the result with common WCAG 2.2 AA thresholds.

Sample text preview

This checker evaluates the selected sRGB colours using the WCAG relative luminance contrast ratio formula. It does not assess font weight, text size, images of text, focus indicators, or the full accessibility of a page.

Understanding contrast ratios

WCAG contrast ratios compare the relative luminance of a foreground colour with the relative luminance of its background. The ratio ranges from 1:1 for identical luminance to 21:1 for black against white.

Under WCAG 2.2 Level AA, normal text generally needs a contrast ratio of at least 4.5:1. Large text generally needs at least 3:1. Large text is typically at least 18 point regular or 14 point bold. Check the relevant WCAG success criteria for exceptions and other content types.

Passing a colour contrast check is only one part of accessibility. Use clear labels, semantic markup, keyboard support, visible focus states, and do not rely on colour alone to communicate meaning.