1. Home
  3. Design
  5. WCAG Contrast Checker

WCAG Contrast Checker

Check the contrast ratio of text and background colours against WCAG AA and AAA.

Runs in your browser Free

Contrast ratio

—
Large heading text
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
Small print, 13px.

Ratios follow the WCAG 2.x relative luminance formula. Large text = at least 24px regular or 18.66px (14pt) bold.

Readability for everyone

Low-contrast text is unreadable for people with visual impairments, older users and anyone using a phone in sunlight. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background.

Criteria checked

  • WCAG AA: 4.5:1 for normal text, 3:1 for large text
  • WCAG AAA: 7:1 for normal text, 4.5:1 for large text
  • 3:1 for UI components and graphical objects

How it works

Pick the text and background colours; the tool calculates the contrast ratio with the WCAG 2.x relative luminance formula and shows pass/fail for each criterion. A live preview shows the colour pair on real text. Black on white is the maximum, 21:1.

How to use WCAG Contrast Checker

  1. Pick the text colour or enter its HEX code.
  2. Pick the background colour.
  3. Review the contrast ratio and AA/AAA results.
  4. Adjust the colours until they pass.

Why use this tool?

Helps you meet accessibility standards and laws and reach a wider audience.

FAQ

Which ratio is required?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components; AAA requires 7:1 and 4.5:1.

What counts as large text?

Under WCAG, at least 18pt (about 24px) regular or 14pt (about 18.66px) bold.

Why does grey text fail so often?

Light greys on white fall below 4.5:1; #767676 is one of the lightest greys that passes AA on white.

Related tools

Private

Color Scale Generator (50–950)

Turn one base colour into a Tailwind-style 50–950 shade scale with CSS variables and config output.

Open tool
Private

Color Palette Generator

Generate harmonious 5–8 colour palettes: random, complementary, analogous, monochromatic or triadic.

Open tool
Private

Touch Target Size Checker

Check a button or link size against WCAG 2.2, Apple HIG and Material Design touch target guidance.

Open tool
Private

Color Code Converter

Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.

Open tool