Về Hướng dẫn WCAG 2.2 ‘1.4.6 Tương phản (Mở rộng)’ Cấp AAA
Mở đầu
Trong WCAG 2.2, “1.4.6 Tương phản (Mở rộng)” yêu cầu tỷ lệ tương phản của văn bản hoặc văn bản trong hình ảnh ít nhất là 7:1. Tiêu chuẩn này nhằm mục đích cải thiện khả năng nhận diện cho người khiếm thị và người cao tuổi, và là một trong những tiêu chuẩn khả năng tiếp cận cao nhất, cấp AAA.
Bài viết này sẽ giải thích chi tiết về các khái niệm cơ bản của tỷ lệ tương phản, cách triển khai để đáp ứng các tiêu chuẩn, cũng như các lỗi phổ biến và biện pháp khắc phục.
1. Tỷ lệ tương phản (7:1) là gì?
Tỷ lệ tương phản là tỷ lệ giữa độ sáng của màu chữ và màu nền được biểu thị bằng con số.
Tiêu chuẩn:
- Văn bản thông thường: Tối thiểu 7:1
- Văn bản lớn (từ 18 điểm trở lên, hoặc 14 điểm trở lên với chữ đậm): Tối thiểu 4.5:1
2. Cách triển khai để đáp ứng tiêu chuẩn
a. Chọn màu sắc một cách cẩn thận
Ví dụ về tỷ lệ tương phản phù hợp
CSS
body {
background-color: #ffffff; /* Nền trắng */
color: #000000; /* Văn bản màu đen */
}
- Màu trắng (#ffffff) và màu đen (#000000) có tỷ lệ tương phản là 21:1 và đáp ứng tiêu chuẩn.
b. Sử dụng công cụ để kiểm tra tỷ lệ tương phản
Sử dụng công cụ trực tuyến để kiểm tra tỷ lệ tương phản giữa văn bản và màu nền.
Công cụ đề xuất
- WebAIM Contrast Checker
- Công cụ phát triển của trình duyệt (Tab truy cập của Chrome)
c. Sử dụng chỉ định màu tương đối
Khi sử dụng chỉ định màu tương đối trong CSS, việc tùy chỉnh trở nên linh hoạt hơn.
Ví dụ về CSS
:root {
--primary-bg: #ffffff;
--primary-text: #000000;
}
body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
d. Biện pháp khi sử dụng hình ảnh nền
Khi sử dụng hình ảnh nền, cần thực hiện các biện pháp để đảm bảo văn bản dễ đọc, phù hợp với độ sáng tối của nền.
Hình ảnh nền và lớp phủ (overlay)
HTML và CSS
<div class="background-text">
Văn bản dễ đọc
</div>
.background-text {
background-image: url('example.jpg');
background-color: rgba(0, 0, 0, 0.5); /* Lớp phủ màu đen */
color: #ffffff; /* Văn bản màu trắng */
padding: 20px;
}
- Sử dụng lớp phủ rgba để đảm bảo tỷ lệ tương phản.
e. Cung cấp chế độ tương phản cao có thể chuyển đổi cho người dùng.
Ví dụ về cách triển khai
HTML
<button id="toggleContrast">Chế độ tương phản cao</button>
<div id="content">
<p>Văn bản ở chế độ tiêu chuẩn</p>
</div>
JavaScript
const button = document.getElementById('toggleContrast');
const content = document.getElementById('content');
button.addEventListener('click', () => {
content.classList.toggle('high-contrast');
});
CSS
.high-contrast {
background-color: #000000;
color: #ffffff;
}
3. Ví dụ về lỗi và biện pháp khắc phục
a. Khi tỷ lệ tương phản không đủ
Ví dụ về lỗi
<p style="color: #777777; background-color: #ffffff;">Văn bản có tỷ lệ tương phản không đủ</p>
- Màu xám sáng (#777777) có tỷ lệ tương phản thấp với màu trắng (#ffffff) và không đáp ứng tiêu chuẩn.
Biện pháp khắc phục
<p style="color: #000000; background-color: #ffffff;">適切なコントラストのテキスト</p>
b. Văn bản khó đọc khi sử dụng hình ảnh nền
Ví dụ về lỗi
<div style="background-image: url('bright-background.jpg'); color: white;">
Văn bản khó đọc
</div>
Biện pháp khắc phục
- Điều chỉnh độ sáng của hình ảnh nền hoặc thêm lớp phủ (overlay).
4. Những điểm cần lưu ý khi triển khai
a. Tránh sử dụng hình ảnh văn bản.
- Thực hiện tạo kiểu bằng HTML và CSS thay vì sử dụng hình ảnh văn bản.
b. Kiểm tra tỷ lệ tương phản trên nội dung động
- Xác nhận rằng văn bản được tạo ra bằng JavaScript và các yếu tố tương tác cũng đáp ứng tiêu chuẩn tỷ lệ tương phản.
5. Lợi ích của khả năng tiếp cận (Accessibility)
a. Quan tâm đến người khiếm thị và người cao tuổi
Tỷ lệ tương phản cao giúp người dùng có thị lực yếu cũng có thể dễ dàng đọc được nội dung.
b. Cải thiện trải nghiệm người dùng
Khi sự cân bằng giữa màu nền và màu chữ hợp lý, tất cả người dùng đều có thể sử dụng một cách thoải mái.
Tóm tắt
WCAG 2.2 của “1.4.6 Tương phản (Mở rộng)” là tiêu chuẩn yêu cầu tỷ lệ tương phản của văn bản và văn bản trong hình ảnh tối thiểu là 7:1, nhằm tối đa hóa khả năng nhận diện.
Điểm cần lưu ý khi triển khai
- Chọn màu sắc phù hợp và kiểm tra tỷ lệ tương phản.
- Khi sử dụng hình ảnh nền, cần có biện pháp để đảm bảo tỷ lệ tương phản được duy trì.
- Cung cấp chế độ tương phản cao và cho phép người dùng chuyển đổi giữa các chế độ.
Bằng cách thực hiện những điều này, khả năng tiếp cận sẽ được cải thiện, giúp cung cấp nội dung web mà ai cũng có thể sử dụng một cách thoải mái.
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.