🇻🇳 Tiếng Việt

🎨

🎨 CSS & Design MỚI

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.

Tất cả công cụ Browser-only

Màu chữ (foreground)

Màu nền (background)

Tỷ số tương phản

21.00

TopDev

Đâ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

AA Normal text (≥4.5:1)

AA Large text (≥3:1)

AAA Normal (≥7:1)

AAA Large (≥4.5: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.

CSS Animation Builder

Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.

CSS Filter Builder

Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).

Color Palette Generator

Sinh bảng màu hài hoà từ màu chính (HSL theory). 6 hệ: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.