| Cấp độ | Văn bản thường | Văn bản lớn | Thành phần giao diện |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | Không áp dụng |
Trình kiểm tra độ tương phản là gì?
Kiểm tra tỷ lệ tương phản màu để đáp ứng tiêu chuẩn tiếp cận WCAG AA và AAA. Xác minh ngay các kết hợp màu chữ và màu nền cho văn bản thường, văn bản lớn và các thành phần UI.
Cách sử dụng trình kiểm tra độ tương phản
- Nhập hoặc chọn màu chữ tiền cảnh.
- Nhập hoặc chọn màu nền phía sau.
- Xem ngay tỷ lệ tương phản và kết quả đạt/không đạt WCAG.
- Điều chỉnh một trong hai màu cho đến khi tổ hợp đạt mục tiêu trợ năng của bạn.
Tìm hiểu độ tương phản màu sắc ▾
Ví dụ
Các trường hợp sử dụng phổ biến
- Kiểm tra độ tương phản của nút và liên kết trước khi phát hành bản cập nhật UI
- Xác thực màu chữ trong hệ thống thương hiệu và hướng dẫn phong cách
- Đánh giá khả năng đọc của đồ họa tiếp thị
- Kiểm tra nhanh các kết hợp chữ tối trên nền sáng và chữ sáng trên nền tối
Câu hỏi thường gặp
WCAG AA yêu cầu tỷ lệ 4.5:1 cho chữ thường và 3:1 cho chữ lớn — yêu cầu pháp lý tiêu chuẩn. AAA yêu cầu 7:1 cho chữ thường và 4.5:1 cho chữ lớn, mang lại khả năng tiếp cận nâng cao cho người dùng bị suy giảm thị lực nghiêm trọng.
Có — WCAG 1.4.11 (Độ tương phản phi văn bản) yêu cầu 3:1 cho các thành phần UI và yếu tố đồ họa. Kết quả AA cho Thành phần UI trong bảng đáp ứng yêu cầu này.
Không phải mọi nội dung đều bắt buộc tuân thủ AAA. WCAG AA là yêu cầu pháp lý tiêu chuẩn ở hầu hết các khu vực pháp lý. Hãy hướng tới AAA khi có thể, nhưng AA là đủ để tuân thủ pháp luật.
WCAG định nghĩa chữ lớn là 18pt (24px) trở lên đối với kiểu chữ thường, hoặc 14pt (khoảng 18.67px) trở lên đối với chữ in đậm. Chữ lớn có yêu cầu tương phản thấp hơn (3:1 cho AA) vì vốn dễ đọc hơn.