Skip to content
SnapTools

Contrast Checker

Runs in your browser

Check the WCAG 2.x contrast ratio between text and background colours. See pass/fail for AA and AAA, normal text, large text, and UI components.

The quick brown foxSample text at this contrast

Contrast ratio

17.74:1

AA — normal text (4.5:1)Pass
AA — large text (3:1)Pass
AAA — normal text (7:1)Pass
AAA — large text (4.5:1)Pass
UI components / graphics (3:1)Pass

About this tool

Colour contrast is the single most common accessibility failure on the web, and increasingly a legal exposure — the ADA, EN 301 549 and similar regulations point back to WCAG. WCAG 2.x defines contrast as a ratio from 1:1 (identical colours) to 21:1 (pure black on pure white), computed from each colour's relative luminance. Different thresholds apply depending on text size and whether the element is text or a UI component like a button border or icon.

How to use

  1. Enter or pick a foreground (text) colour and a background colour.
  2. Read the contrast ratio and the pass/fail row for each WCAG level.
  3. Adjust either colour until the levels you need for your project pass.

When to use this tool

  • Checking a brand colour against white or dark backgrounds before it ships.
  • Auditing an existing design system for accessibility compliance.
  • Choosing a text colour for a coloured card, badge, or button.
  • Verifying large headline text meets the more lenient 3:1 large-text threshold.

Tips

  • "Large text" means 18pt (24px) regular weight or 14pt (18.5px) bold — everything else is normal text.
  • AAA is the higher bar; most legal requirements only mandate AA. Aim for AAA where you can.
  • The 3:1 UI-component threshold also applies to icons, form field borders, and focus indicators — not just running text.

Limitations

  • Checks colour contrast only — font weight, size, and surrounding context also affect real-world legibility.

FAQ

What ratio do I actually need?
4.5:1 for normal text and 3:1 for large text is WCAG 2.1 AA — the level most accessibility laws reference. 7:1 and 4.5:1 respectively is the stricter AAA level.
Does this check anything besides colour?
No. Font weight, size, letter-spacing and surrounding busy backgrounds also affect real legibility; treat a pass here as necessary, not sufficient.
Is my colour sent anywhere?
No. The ratio is computed in your browser from the WCAG relative-luminance formula.

Related tools