Xem trước
The quick brown fox
Jumps over the lazy dog. Accessible design benefits everyone.
6.49:1
Contrast Ratio
Pass
Normal Text
WCAG AA
PASS
WCAG AAA
FAIL
Pass
Large Text
WCAG AA
PASS
WCAG AAA
PASS
Pass
Graphic Objects
WCAG AA
PASS
WCAG AAA
PASS
The quick brown fox
Jumps over the lazy dog. Accessible design benefits everyone.
6.49:1
Contrast Ratio
Pass
Normal Text
Pass
Large Text
Pass
Graphic Objects
Contrast Checker là công cụ giúp bạn kiểm tra tỉ lệ tương phản màu sắc theo chuẩn WCAG 2.1. Chỉ cần nhập màu foreground và background, công cụ sẽ tự động tính toán và hiển thị kết quả AA/AAA cho cả Normal text và Large text.
Accessibility chuẩn WCAG
WCAG 2.1 yêu cầu tương phản tối thiểu 4.5:1 cho normal text và 3:1 cho large text ở cấp AA.
Dễ đọc hơn cho mọi người
Tương phản đủ cao giúp người dùng có thị lực kém, đọc màn hình trong nắng hay ban đêm đều dễ đọc.
Audit UI/UX nhanh chóng
Kiểm tra nhanh bất kỳ cặp màu nào trong design system trước khi đưa vào production.
Export CSS variables
Copy ngay CSS color variables để dùng trực tiếp trong code, không cần ghi chú thêm.
01
Chọn màu foreground
Nhập mã HEX hoặc dùng color picker để chọn màu chữ (foreground).
02
Chọn màu background
Nhập mã HEX hoặc dùng color picker để chọn màu nền (background).
03
Xem kết quả WCAG
Tỉ lệ tương phản và kết quả AA/AAA được tính và hiển thị ngay lập tức.
04
Export và sử dụng
Copy mã CSS hoặc export để dùng trong design system hoặc codebase của bạn.
WCAG AA — Normal Text (4.5:1)
Yêu cầu tối thiểu cho text thông thường (dưới 18pt hoặc 14pt bold).
WCAG AA — Large Text (3:1)
Áp dụng cho text lớn (18pt trở lên hoặc 14pt bold trở lên).
WCAG AAA — Normal Text (7:1)
Tiêu chuẩn nâng cao cho normal text, đảm bảo khả năng đọc tốt nhất.
WCAG AAA — Large Text (4.5:1)
Tiêu chuẩn nâng cao cho large text. Khuyến khích nhưng không bắt buộc.
Thiết kế UI/UX
Kiểm tra cặp màu ngay trong quá trình thiết kế, tránh sửa lại sau khi handoff.
Review code nhanh
Developer tự kiểm tra trước khi merge, giảm review cycle cho accessibility.
Tuân thủ pháp lý
Audit và document kết quả WCAG nhanh chóng cho các thị trường có yêu cầu pháp lý.