🎨

WCAG Color Contrast Checker

Check the contrast ratio between two colors against WCAG 2.1 (AA, AAA). Live preview, pass/fail for normal + large text.

All tools Browser-only

Foreground (text)

Background

Contrast ratio

21.00

TopDev

This is sample text to check contrast

Small text (12-13px) — easy to lose at low contrast

Large text (24px+) — easier to read

WCAG 2.1

AA Normal text (≥4.5:1)

AA Large text (≥3:1)

AAA Normal (≥7:1)

AAA Large (≥4.5:1)

Contrast ratio ranges from 1:1 (identical) to 21:1 (pure black/white). WCAG AA requires at least 4.5:1 for normal text. Tool uses the standard relative-luminance formula.

Why check contrast?

Users with low vision, older readers, and people using a phone in sunlight all need high contrast to read. Color contrast is a mandatory requirement in WCAG (Web Content Accessibility Guidelines), the international standard for the web.

Legal: the EU, US, and Vietnam all have laws requiring public websites to be accessible.
SEO: Google penalises sites that fail the Lighthouse a11y audit.
UX: good contrast means everyone can read, not just designers with 20/20 vision.

WCAG 2.1 levels

Level	Normal text	Large text (≥18px or ≥14px bold)
AA (minimum)	≥ 4.5:1	≥ 3:1
AAA (enhanced)	≥ 7:1	≥ 4.5:1

AA: the minimum — every website should meet it.
AAA: ideal — government, banking, healthcare should aim for AAA.
Pure black/white = 21:1 — the theoretical maximum.

Tips

Click the color picker or type a HEX — results update in real time.
Use the live preview at 3 sizes to judge with your own eyes.
Click "Swap" to flip fg ↔ bg — see which color works as text vs background.
If AA fails → darken the text OR lighten the background.

Who this is for

Frontend devs, UI/UX designers, anyone prototyping visuals fast or generating CSS for Tailwind/React/Vue projects.

FAQ

Does the generated CSS work with Tailwind?

Yes. Output is vanilla CSS, paste into any .css file. For Tailwind projects, use @utilities layer or theme overrides.

Browser compatibility?

Modern CSS syntax (custom properties, grid). Works on Chrome/Firefox/Safari 2020+. IE11 NOT supported.

Related tools

See all tools →

NEW

🎨

Color Picker

Pick HEX/RGB/HSL, RGB sliders, 12 presets, nearest Tailwind name.

NEW

✨

CSS Animation Builder

Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.

NEW

🪞

CSS Filter Builder

Visual builder for CSS filters — blur, brightness, sepia, hue-rotate, drop-shadow. 8 presets (Vintage, Polaroid, Noir…).

NEW

🎨

Color Palette Generator

Generate harmonious palettes from a base color (HSL theory). 6 schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.