Tính toán tỷ lệ tương phản WCAG 2.1 cho bất kỳ màu nền và màu chữ nào, xem trước kết quả khả năng truy cập và xuất bảng màu đáp ứng tiêu chí AA hoặc AAA.
Features
- Chọn màu trực tiếp: Điều chỉnh màu tiền cảnh và màu nền bằng bộ chọn Ant Design hoặc nhập giá trị HEX chính xác.
- Ma trận WCAG: Xem các yêu cầu AA/AAA cho văn bản thông thường, văn bản lớn và đồ họa UI trong một bảng duy nhất.
- Độ sáng chính xác: Tỷ lệ tương phản tuân theo WCAG 2.1 sử dụng các kênh RGB tuyến tính hóa và bao gồm đọc độ sáng cho mỗi màu.
- Khối xem trước: Kiểm tra tiêu đề và đoạn văn bên trong thẻ mẫu trực tiếp với bảng màu bạn đã chọn.
Usage Guide
- Chọn màu: Chọn hoặc dán giá trị HEX cho tiền cảnh và nền.
- Xem lại tỷ lệ: Kiểm tra tỷ lệ tương phản đã tính toán và bảng AA/AAA để hiểu thông tin đạt/không đạt.
- Điều chỉnh văn bản: Chỉnh sửa văn bản mẫu để xem trước nhãn, nút hoặc văn bản tiếp thị thực tế.
Technical Details
Độ chói tương đối
Mỗi kênh RGB được chuyển đổi thành giá trị tuyến tính bằng cách sử dụng đường cong gamma WCAG trước khi tính độ chói với các hệ số 0.2126, 0.7152 và 0.0722.
Tỷ lệ tương phản
Công thức tỷ lệ (L1 + 0.05) / (L2 + 0.05) so sánh các màu sáng hơn và tối hơn để đảm bảo khả năng đọc nhất quán trên các thiết bị.
Ngưỡng
Văn bản thông thường AA yêu cầu ≥ 4.5:1, văn bản lớn ≥ 3:1, AAA thông thường cần 7:1, AAA lớn 4.5:1 và các đối tượng đồ họa nên đáp ứng 3:1.
Frequently Asked Questions
- Văn bản lớn có sử dụng ngưỡng khác không?
- Có. Văn bản ≥ 18px thường hoặc 14px đậm được coi là lớn và chỉ cần 3:1 cho AA hoặc 4.5:1 cho AAA.
- Làm thế nào để kiểm tra gradient?
- Kiểm tra các điểm dừng sáng nhất và tối nhất trong gradient. Mỗi cặp điểm dừng phải đáp ứng tỷ lệ mong muốn.
- Biểu tượng có được tính là văn bản không?
- Biểu tượng đặc và đồ họa UI quan trọng phải đáp ứng ít nhất 3:1 độ tương phản so với nền.
Related Documentation
- WCAG 2.1 Tương phản (Tiêu chí thành công 1.4.3) - Hướng dẫn chính thức về mức tương phản tối thiểu cho văn bản và hình ảnh văn bản.
- WCAG 2.1 Tương phản (1.4.6) - Yêu cầu tương phản nâng cao để tuân thủ AAA.
- MDN - Tính độ chói - Nền tảng về công thức RGB tuyến tính được sử dụng trong công cụ truy cập.
- W3C - Toán học tỷ lệ tương phản - Chi tiết về công thức tỷ lệ, làm tròn và lý do.
- Thẻ Thiết kế Bao gồm - Mẹo về việc ghép màu và kiểu chữ cho đối tượng đa dạng.