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.
Related
- Color Picker — pick HEX/RGB/HSL with Tailwind names
- CSS Unit Converter — px ↔ rem ↔ em
- All tools
Related tools
See all tools →JWT Decoder
Decode JWT tokens — header, payload, claims with readable timestamps.
NEWJSON Formatter
Format / minify / validate JSON. Sort keys A-Z, custom indent, Ctrl+Enter shortcut.
NEWRegex Tester
Test regex live with match highlighting. 7 ready presets including Vietnamese.
NEWUUID / Hash / Base64 / URL
Bundle: UUID v4, SHA-256/512 hash, Base64 (URL-safe), URL encode.