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.
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
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 →Color Picker
Pick HEX/RGB/HSL, RGB sliders, 12 presets, nearest Tailwind name.
NEWCSS Animation Builder
Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.
NEWCSS Filter Builder
Visual builder for CSS filters — blur, brightness, sepia, hue-rotate, drop-shadow. 8 presets (Vintage, Polaroid, Noir…).
NEWColor Palette Generator
Generate harmonious palettes from a base color (HSL theory). 6 schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.