Toolis.dev

Contrast Checker

Check color contrast against WCAG 2.x thresholds. Enter foreground and background hex colors and see live pass/fail grades for AA and AAA body, large text, and UI components.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use Contrast Checker

  1. Pick or paste a foreground hex.

  2. Pick or paste a background hex.

  3. Read the live ratio and grade rows.

  4. Use Swap to invert and recheck.

When to use it

  • Auditing brand colors before launch.

  • Picking link and button colors that pass AA.

  • Verifying dark-mode palettes don't fail on muted text.

  • Settling design debates with a number.

What it fixes

  • Designers shipping low-contrast 'minimalist' palettes that fail audits.

  • Lighthouse flagging contrast issues without explaining which combinations.

  • Eyeballing whether grey-on-grey is 'good enough'.

About Contrast Checker

Color contrast is the most common accessibility failure on the web. WCAG 2.x defines a contrast ratio between text and background — anywhere from 1:1 (identical) to 21:1 (black on white). Body text needs 4.5:1 to pass AA, the legal baseline in many jurisdictions; AAA is 7:1.

This tool uses the WCAG 2.x formula: sRGB → linear → luminance-weighted average, then `(L1 + 0.05) / (L2 + 0.05)`. The preview pane updates live so you can sanity-check what passes by eye, not just by number.

References: W3C — WCAG 2.2 SC 1.4.3 Contrast (Minimum) · W3C — Contrast ratio algorithm

Frequently asked

  • What contrast ratio do I need?

    WCAG 2.x AA requires 4.5:1 for body text and 3:1 for large text (24px or 18.66px bold). AAA tightens those to 7:1 and 4.5:1. UI components and graphical objects need 3:1.

  • What counts as 'large text'?

    At least 24px regular, or 18.66px (14pt) bold. Below that, the body-text threshold applies.

  • Is the ratio formula the same as WebAIM and Stark?

    Yes — sRGB relative luminance per WCAG 2.x: linearize each channel, weight 0.2126/0.7152/0.0722, then (L1 + 0.05) / (L2 + 0.05). WCAG 3 (APCA) is different and not used here.

Discussion

All tools