Color Contrast Checker — WCAG 2.1
Kiểm tra độ tương phản 2 màu theo chuẩn WCAG 2.1 (AA, AAA). Hiện tỷ số contrast, pass/fail cho text thường + lớn, có preview live.
Đây là đoạn text mẫu để kiểm tra độ tương phản
Text nhỏ (12-13px) — dễ bị mất nếu contrast thấp
Text lớn (24px+) — dễ đọc hơn
WCAG 2.1
Tỷ số tương phản từ 1:1 (giống hệt) tới 21:1 (đen/trắng). WCAG yêu cầu tối thiểu 4.5:1 cho text bình thường (AA). Tool tính theo công thức relative luminance chuẩn.
Vì sao cần check contrast?
Người mắt yếu, người già, người dùng smartphone ngoài nắng — đều cần text contrast cao để đọc được. Color contrast là yêu cầu bắt buộc trong WCAG (Web Content Accessibility Guidelines), tiêu chuẩn quốc tế cho website.
- Pháp lý: EU, Mỹ, Việt Nam đều có luật yêu cầu website công cộng phải accessibility.
- SEO: Google penalty các site không pass Lighthouse a11y audit.
- UX: contrast tốt = ai cũng đọc được, không chỉ designer mắt 20/20.
Chuẩn WCAG 2.1
| Mức | Text thường | Text lớn (≥18px hoặc ≥14px bold) |
|---|---|---|
| AA (tối thiểu) | ≥ 4.5:1 | ≥ 3:1 |
| AAA (cao cấp) | ≥ 7:1 | ≥ 4.5:1 |
- AA: chuẩn tối thiểu — mọi website nên đạt.
- AAA: lý tưởng — gov, banking, healthcare nên đạt.
- Pure black/white = 21:1 — tỷ số tối đa.
Tip dùng tool
- Bấm color picker hoặc gõ HEX — kết quả update real-time.
- Xem preview text 3 size khác nhau để judge bằng mắt thật.
- Bấm "Đảo" để swap fg ↔ bg — xem màu nào dùng cho text, màu nào cho nền.
- Nếu fail AA → làm chữ đậm hơn HOẶC nền nhạt hơn.
Liên quan
- Color Picker — chọn HEX/RGB/HSL với tên Tailwind
- CSS Unit Converter — px ↔ rem ↔ em
- Xem tất cả công cụ
Công cụ liên quan
Xem tất cả công cụ →JWT Decoder
Decode JWT token, xem header/payload/claims với thời gian dễ đọc.
MỚIFormat JSON
Format / minify / validate JSON. Sort key A-Z, custom indent, phím tắt Ctrl+Enter.
MỚIRegex Tester
Test regex realtime với highlight match. 7 mẫu sẵn cho VN (email, SĐT, CCCD, IP...).
MỚIUUID / Hash / Base64 / URL
Bundle 4 dev tool: UUID v4, SHA-256/512 hash, Base64 (URL-safe), URL encode.