← All tools
// Design / Accessibility

Color Contrast Checker online

WCAG contrast ratio checker — AA and AAA accessibility compliance

Color Contrast Checker logo
by
CHUNKY
MUNSTER
Sample text — How does this look?
Small text sample for AAA compliance testing
Contrast ratio
—
WCAG AA (4.5:1)
—
WCAG AAA (7:1)
—
AA Large (3:1)

How to Use color-contrast

  1. Enter or pick the foreground (text) colour and background colour.
  2. The tool calculates the WCAG 2.1 contrast ratio instantly.
  3. Read the AA and AAA compliance status for normal text, large text, and UI components.
  4. Use the suggestions panel to find the nearest compliant colour if your current pair fails.

WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with low vision or colour blindness: 4.5:1 for normal text (AA), 7:1 for normal text (AAA), and 3:1 for large text or UI components. This checker calculates the exact ratio and shows which thresholds your colour pair passes or fails.

Understanding WCAG Contrast Ratios

The WCAG contrast ratio formula uses relative luminance (L), computed by linearising each sRGB channel and applying a perceptual weighting: 0.2126R + 0.7152G + 0.0722B. Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour's luminance. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white). Note that the 4.5:1 AA requirement applies to "small" text (below 18pt regular or 14pt bold); "large" text only needs 3:1.

Frequently Asked Questions

What is the WCAG AA minimum contrast ratio?

4.5:1 for normal text (below 18pt regular weight or 14pt bold), and 3:1 for large text, essential UI components, and logotype text.

Does contrast ratio account for colour blindness?

Luminance-based contrast ratio does not directly model colour blindness. However, sufficient luminance contrast ensures readability across most types of colour vision deficiency, since it does not rely on hue alone. Use a colour blindness simulator to verify specific colour combinations.

My white text on a brand colour fails WCAG — what should I do?

Options: darken the background colour, use a drop shadow on the text, increase font size (to use the lower large-text threshold), or switch to dark text. The suggestions panel shows the nearest passing shade of your background colour.

What is WCAG AAA level?

AAA requires 7:1 contrast for normal text and 4.5:1 for large text. It is the strictest level, aimed at users with severe visual impairments. Many design systems target AA; AAA is recommended but not always achievable within brand guidelines.

See also the Color Converter and Colour Name Finder for related design tools.