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.
Phù hợp với ai
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
Câu hỏi thường gặp
CSS sinh ra có dùng được với Tailwind không?
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
Có hỗ trợ trình duyệt cũ không?
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
Công cụ liên quan
Xem tất cả công cụ →Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚITailwind ↔ CSS Converter
Convert giữa Tailwind utility classes và CSS thuần. ~200 utility (spacing, color, flex, grid…). Hỗ trợ migrate dự án.
MỚISVG → React/JSX
Convert SVG sang React component. camelCase attribute, currentColor, TypeScript types, size/color props.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.