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.
NEWTailwind ↔ CSS Converter
Convert between Tailwind utility classes and vanilla CSS. ~200 utilities (spacing, color, flex, grid…). Helps migration.
NEWSVG to React/JSX
Convert SVG to React component. camelCase attrs, currentColor, TypeScript types, size/color props.
NEWCSS Animation Builder
Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.