Hướng dẫn WCAG 2.2 ‘1.4.11 Độ tương phản không phải văn bản’ Cấp AA
Mở đầu
WCAG 2.2 ‘1.4.11 Độ tương phản không phải văn bản’ yêu cầu tỷ lệ tương phản của các yếu tố không phải văn bản (nút, biểu tượng, nội dung đồ họa, v.v.) phải lớn hơn hoặc bằng 3:1. Tiêu chuẩn này nhằm giúp người dùng có hạn chế về thị giác hoặc giảm khả năng cảm nhận độ tương phản có thể nhận diện chính xác giao diện và nội dung đồ họa.
Bài viết này sẽ giải thích cách triển khai cụ thể bằng HTML, CSS và JavaScript một cách dễ hiểu.
1. Đối tượng áp dụng
Hướng dẫn này áp dụng cho các yếu tố không phải văn bản sau:
-
Các thành phần giao diện người dùng.
- Các yếu tố có thể thao tác như nút, liên kết, công tắc, v.v.
- Xác định trạng thái tiêu điểm và hover.
-
Nội dung đồ họa
- Các yếu tố hình ảnh cần thiết để truyền đạt thông tin, như biểu tượng, đồ thị, hình vẽ, v.v.
2. Cách triển khai
a. Độ tương phản của các thành phần giao diện người dùng
Cài đặt độ tương phản cho nút và liên kết
Cần phải có tỷ lệ tương phản ít nhất 3:1 giữa các yếu tố có thể thao tác và màu nền.
Ví dụ về CSS
button {
background-color: #0055ff; /* Màu xanh */
color: #ffffff; /* Màu trắng */
border: 2px solid #0033cc; /* Đường viền để duy trì độ tương phản */
padding: 10px 20px;
font-size: 1em;
}
Điểm cần lưu ý
- Kiểm tra độ tương phản giữa màu nền của nút và màu chữ, hoặc đường viền.
- Cũng cần xem xét trạng thái khi hover hoặc focus.
b. Tính khả thi của chỉ báo tiêu điểm.
Cần phải đảm bảo rằng các yếu tố đang được tiêu điểm có thể được nhận diện một cách trực quan.
Ví dụ về CSS
button:focus {
outline: 3px solid #ffaa00; /* Hiển thị tiêu điểm bằng màu vàng sáng */
outline-offset: 2px;
}
c. Độ tương phản của nội dung đồ họa
Các yếu tố đồ họa như biểu tượng hoặc hình vẽ cũng cần có tỷ lệ tương phản ít nhất 3:1 với màu sắc liền kề.
Thiết kế biểu tượng phù hợp
Xem xét độ tương phản giữa màu biểu tượng và màu nền, đảm bảo tính dễ nhìn.
Ví dụ về HTML và CSS
<div class="icon-container">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="icon">
<circle cx="25" cy="25" r="20" fill="#0055ff" stroke="#ffffff" stroke-width="4"/>
</svg>
</div>
.icon-container {
background-color: #ffffff; /* Nền trắng */
padding: 10px;
}
Điểm cần lưu ý
- Sử dụng công cụ để đo độ tương phản giữa biểu tượng và màu nền.
d. Sử dụng công cụ kiểm tra độ tương phản
Bạn có thể sử dụng các công cụ sau để kiểm tra tỷ lệ tương phản:
- WebAIM Contrast Checker
- Công cụ phát triển của trình duyệt (như tab khả năng tiếp cận trong Chrome).
3. Những ví dụ sai sót thường gặp và cách cải thiện
a. Nút có độ tương phản không đủ
Ví dụ sai sót
button {
background-color: #cccccc; /* Màu xám nhạt */
color: #ffffff; /* Màu trắng */
}
- Tỷ lệ tương phản giữa màu nền (#cccccc) và màu chữ (#ffffff) thấp.
Biện pháp cải thiện
button {
background-color: #0055ff; /* Màu xanh đậm */
color: #ffffff; /* Màu trắng */
}
b. Không có chỉ báo tiêu điểm
Ví dụ sai sót
button:focus {
outline: none;
}
- Tiêu điểm không thể được nhận diện một cách trực quan
Biện pháp cải thiện
button:focus {
outline: 3px solid #ffaa00;
}
c. Thiếu độ tương phản của biểu tượng
Ví dụ sai sót
- Màu của biểu tượng hòa vào với màu nền.
Biện pháp cải thiện
- Điều chỉnh đường viền hoặc màu nền của biểu tượng để đảm bảo tỷ lệ tương phản.
4. Lợi ích của khả năng tiếp cận
a. Cải thiện trải nghiệm người dùng
- Người dùng có khiếm thị hoặc giảm khả năng cảm nhận độ tương phản cũng có thể nhận diện chính xác các yếu tố có thể thao tác và thông tin.
b. Thiết kế nhất quán
- Thiết kế có độ tương phản cao mang lại khả năng nhìn rõ cho tất cả người dùng và cung cấp giao diện dễ sử dụng.
Tóm tắt
WCAG 2.2 “1.4.11 Độ tương phản không phải văn bản” yêu cầu các yếu tố không phải văn bản như nút, biểu tượng, v.v. phải có độ tương phản đủ lớn với màu sắc xung quanh.
Điểm cần lưu ý khi triển khai
- Đảm bảo tỷ lệ tương phản ít nhất 3:1
Đo lường và điều chỉnh màu sắc giữa nút, biểu tượng và nền - Cung cấp chỉ báo tiêu điểm
Hiển thị tiêu điểm một cách trực quan khi sử dụng bàn phím - Sử dụng công cụ để kiểm tra độ tương phản
Đảm bảo độ tương phản từ giai đoạn thiết kế ban đầu
Bằng cách thực hành những điều này, bạn có thể cung cấp nội dung web dễ tiếp cận và thoải mái cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.