Kiểm tra độ tương phản màu sắc
Tính toán tỷ lệ tương phản giữa hai màu và kiểm tra xem nó có đạt các mức WCAG 2.1 AA và AAA cho văn bản thông thường và lớn hay không.
Trời mưa rào ở Sài Gòn, người người ướt đẫm áo chạy về nhà.
Trời mưa rào ở Sài Gòn, người người ướt đẫm áo chạy về nhà.
Cách Hoạt Động
Trình kiểm tra độ tương phản màu đo tỷ lệ tương phản độ sáng giữa màu văn bản và màu nền theo hướng dẫn WCAG 2.1 — tiêu chuẩn khả năng truy cập được các tổ chức trên toàn thế giới sử dụng.
Nhập màu văn bản và nền ở định dạng HEX, RGB hoặc HSL. Công cụ ngay lập tức tính độ sáng tương đối của mỗi màu và tỷ lệ tương phản của chúng.
Kết quả được kiểm tra theo cấp độ WCAG: AA yêu cầu ≥4,5:1 cho văn bản thông thường và ≥3:1 cho văn bản lớn; AAA yêu cầu ≥7:1 và ≥4,5:1. Xem trước trực quan cho thấy văn bản thực sự trông như thế nào trên nền đó.
Độ tương phản thấp làm cho nội dung khó đọc đối với người dùng có thị lực kém, đặc biệt là những người mù màu.
Trường Hợp Sử Dụng
- Chọn màu thương hiệu phù hợp với khả năng truy cập khi xây dựng hệ thống thiết kế
- Xác nhận các thành phần UI hiện có đạt WCAG AA hoặc AAA
- Chứng minh với khách hàng rằng sự kết hợp màu cụ thể không phù hợp với văn bản
- Dạy các nhà thiết kế và nhà phát triển về khả năng truy cập
- Chuẩn bị tài liệu cho các yêu cầu khả năng truy cập hợp pháp
Câu hỏi thường gặp
- WCAG là gì?
- Hướng dẫn Khả năng Truy cập Nội dung Web — tiêu chuẩn khả năng truy cập được xuất bản bởi W3C, ngày càng được yêu cầu theo pháp luật.
- Tôi nên đạt được mức độ tương phản tối thiểu nào?
- Tối thiểu AA (4,5:1 cho văn bản thông thường) cho hầu hết các trang web; AAA cho nội dung quan trọng.
- Văn bản lớn có yêu cầu khác nhau không?
- Có — văn bản ≥18pt hoặc ≥14pt in đậm chỉ yêu cầu 3:1 (AA) hoặc 4,5:1 (AAA).
- Trình kiểm tra có tính đến mù màu không?
- Điểm độ sáng dựa trên toán học nhận thức tự nhiên bao gồm các loại mù màu phổ biến nhất.
- Tôi có thể dán mã HEX trực tiếp không?
- Có, dán #RRGGBB hoặc chỉ RRGGBB — công cụ chấp nhận cả hai định dạng.