Kiểm tra độ tương phản màu
Kiểm tra tỷ lệ tương phản giữa màu chữ và màu nền theo chuẩn WCAG 2.1 AA, AAA, xem trước trực tiếp và gợi ý màu chữ gần nhất đạt chuẩn.
Chữ thường: Tiếng Việt có dấu đọc có rõ không?
Chữ lớn (18pt / 24px, hoặc 14pt in đậm)
Nút bấmTỷ lệ tương phản
4,75:1
- Chữ thường — AA (4,5:1)✓ Đạt
- Chữ thường — AAA (7:1)✗ Không đạt
- Chữ lớn — AA (3:1)✓ Đạt
- Chữ lớn — AAA (4,5:1)✓ Đạt
- Biểu tượng, viền, nút bấm — AA (3:1)✓ Đạt
Tính theo công thức tương phản của WCAG 2.1. Mọi thứ chạy ngay trên trình duyệt của bạn.
Công cụ này đang tạm ngừng hoạt động.
Vui lòng quay lại sau.
Cách sử dụng
- 1Nhập mã màu chữ và màu nền dạng hex, hoặc chọn bằng bảng màu.
- 2Xem khung xem trước và tỷ lệ tương phản.
- 3Xem các mức WCAG đạt hay không đạt cho chữ thường, chữ lớn và nút bấm.
- 4Nếu chưa đạt AA, bấm "Dùng màu này" để áp màu chữ gợi ý.
Tính năng
- Tính tỷ lệ tương phản theo WCAG 2.1, từ 1:1 đến 21:1.
- Kết quả AA, AAA cho chữ thường, chữ lớn và mức 3:1 cho biểu tượng, viền nút.
- Xem trước chữ tiếng Việt, chữ lớn và nút bấm với màu của bạn.
- Gợi ý màu chữ đậm hơn hoặc nhạt hơn gần nhất đạt 4,5:1.
- Đổi chỗ màu chữ và màu nền chỉ với một cú bấm.
Quyền riêng tư
Mọi thứ chạy ngay trên trình duyệt của bạn.
Câu hỏi thường gặp
Cần tỷ lệ tương phản bao nhiêu là đạt?
Chuẩn WCAG AA yêu cầu 4,5:1 cho chữ thường, 3:1 cho chữ lớn (từ 24px, hoặc 18,66px in đậm) và cho biểu tượng, viền nút. Mức AAA nâng lên 7:1 cho chữ thường và 4,5:1 cho chữ lớn.
Vì sao 4,49:1 vẫn không đạt AA?
Ngưỡng WCAG là chính xác: phải từ 4,5 trở lên. Công cụ làm tròn xuống khi hiển thị nên con số bạn thấy không bao giờ "trông như đạt" khi thực tế chưa đạt.
Màu có độ trong suốt thì kiểm tra thế nào?
Hãy nhập màu như nó hiển thị thực tế trên trang. Với màu chữ bán trong suốt, cần pha với màu nền trước rồi mới kiểm tra.
Vì sao nên kiểm tra độ tương phản?
Chữ có tương phản thấp khó đọc với người lớn tuổi, người thị lực kém, hoặc khi xem điện thoại ngoài nắng. Đây cũng là tiêu chí khả năng tiếp cận mà nhiều dự án yêu cầu.