Kiểm tra độ tương phản màu sắc
Kiểm tra tỷ lệ tương phản màu sắc theo tiêu chuẩn tiếp cận WCAG 2.1. Kết quả AA/AAA tức thì.
Màu chữ
Màu nền
Xem trước văn bản lớn (18pt đậm)
Xem trước văn bản thường — The quick brown fox jumps over the lazy dog.
14.05:1tỷ lệ tương phản
AA — Văn bản thường (≥ 4.5:1)Đạt
AA — Văn bản lớn (≥ 3:1)Đạt
AAA — Văn bản thường (≥ 7:1)Đạt
AAA — Văn bản lớn (≥ 4.5:1)Đạt
Giới thiệu công cụ
Công cụ kiểm tra tương phản tính tỷ lệ tương phản giữa màu chữ và màu nền sử dụng công thức độ sáng tương đối WCAG 2.1.
WCAG 2.1 định nghĩa hai mức: AA yêu cầu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA yêu cầu 7:1 và 4.5:1.
Cách sử dụng
- Chọn màu chữ và màu nền bằng bộ chọn màu hoặc nhập mã hex.
- Xem trước hiển thị văn bản ở kích thước thường và lớn.
- Tỷ lệ tương phản và kết quả WCAG cập nhật ngay lập tức.
- Dùng các cặp mẫu để khám phá các mẫu trợ năng phổ biến.
Trường hợp sử dụng
Nhà thiết kế UI xác minh nhãn nút và văn bản đáp ứng tiêu chuẩn WCAG. Nhà phát triển frontend kiểm tra các kết hợp màu trong hệ thống thiết kế.
Câu hỏi thường gặp
- "Văn bản lớn" là gì? — WCAG định nghĩa văn bản lớn là ít nhất 18pt (24px) thường, hoặc 14pt (~18.67px) đậm.
- Có hỗ trợ transparency hay rgba không? — Không, công cụ chỉ hoạt động với màu hex đặc.
- Nên nhắm đến mức WCAG nào? — AA là mức tối thiểu được khuyến nghị cho hầu hết trang web. AAA cung cấp khả năng đọc tốt hơn.
- 4.5:1 có luôn đủ không? — 4.5:1 đáp ứng WCAG AA, nhưng người dùng có khiếm khuyết thị giác nghiêm trọng hơn có thể cần tỷ lệ cao hơn.