Hướng dẫn WCAG 2.2 “1.4.3 Tương phản (tối thiểu)” Mức AA
Mở đầu
Mục “1.4.3 Tương phản (tối thiểu)” trong WCAG 2.2 yêu cầu tỉ lệ tương phản giữa văn bản và nền phải đạt ít nhất 4.5:1. Tiêu chuẩn này rất quan trọng để giúp người dùng có hạn chế về thị giác hoặc người cao tuổi dễ dàng đọc nội dung web.
Bài viết này sẽ giải thích chi tiết ý nghĩa của tỉ lệ tương phản và cách đáp ứng tiêu chuẩn này dành cho những người mới bắt đầu học HTML, CSS và JavaScript.
1. Tỉ lệ tương phản là gì?
Tỉ lệ tương phản là sự chênh lệch độ sáng giữa văn bản (hoặc văn bản trong hình ảnh) và màu nền được biểu thị bằng con số. Giá trị càng lớn, sự khác biệt màu sắc càng rõ ràng, giúp việc đọc trở nên dễ dàng hơn.
- Tiêu chuẩn tối thiểu: Đối với văn bản thông thường, tỉ lệ tương phản phải đạt 4.5:1 trở lên.。
- Ngoại lệ:
- Đối với văn bản lớn (trên 18 điểm hoặc 14 điểm với chữ in đậm), tỉ lệ tương phản phải đạt 3:1 trở lên.
- Không áp dụng cho văn bản trang trí hoặc các yếu tố không hiển thị.
2. Cách để đáp ứng tỉ lệ tương phản
a. Chọn màu sắc một cách cẩn thận
Bằng cách chọn màu sắc của văn bản và nền một cách cẩn thận, bạn sẽ đảm bảo được khả năng nhìn thấy rõ ràng.
Ví dụ không phù hợp
<p style="color: lightgray; background-color: white;">Văn bản có độ nhìn thấp</p>
- Tỉ lệ tương phản giữa chữ màu xám sáng và nền trắng là không đủ.
Ví dụ cải thiện
<p style="color: black; background-color: white;">Văn bản có độ nhìn cao.</p>
- Chữ màu đen trên nền trắng có tỉ lệ tương phản đủ cao và đáp ứng tiêu chuẩn.
b. Quản lý tỉ lệ tương phản bằng CSS
Khi tùy chỉnh văn bản và nền
body {
color: #000; /* Đen */
background-color: #fff; /* Trắng */
}
.high-contrast {
color: #ffffff; /* Trắng */
background-color: #000000; /* Đen */
}
- Đặt tỉ lệ tương phản mặc định một cách thích hợp và cung cấp chủ đề có độ tương phản cao khi cần thiết.
c. Sử dụng công cụ tính toán tỉ lệ tương phản
Khi chọn màu sắc thủ công, hãy sử dụng công cụ trực tuyến hoặc tiện ích mở rộng trình duyệt để kiểm tra tỉ lệ tương phản.
Công cụ được khuyến nghị
- WebAIM Contrast Checker
- Công cụ phát triển của trình duyệt (chẳng hạn như tính năng kiểm tra khả năng truy cập của Chrome)
d. Những lưu ý khi sử dụng hình ảnh nền:
Khi sử dụng hình ảnh nền, nếu tỉ lệ tương phản không đủ, văn bản sẽ trở nên khó đọc.
Ví dụ không phù hợp
<div style="background-image: url('background.jpg'); color: white;">
Văn bản màu trắng trên hình ảnh nền
</div>
Ví dụ cải thiện
Bằng cách phủ một lớp màu bán trong suốt lên hình ảnh nền, bạn có thể đảm bảo tỉ lệ tương phản.
<div style="background-image: url('background.jpg'); background-color: rgba(0, 0, 0, 0.5); color: white;">
Văn bản dễ đọc trên hình ảnh nền.
</div>
3. Ví dụ thất bại khi không đáp ứng tiêu chuẩn tương phản
a. Chỉ chỉ định màu sắc của văn bản (tiền cảnh) hoặc màu nền (hậu cảnh) mà không cân nhắc đến tỉ lệ tương phản giữa chúng.
Ví dụ thất bại
<p style="color: blue;">Văn bản</p>
- Vì màu nền phụ thuộc vào mặc định của trình duyệt (trắng), nên không đảm bảo được tỉ lệ tương phản thích hợp.
Biện pháp cải thiện
<p style="color: blue; background-color: white;">Văn bản</p>
b. Văn bản liên kết có tỉ lệ tương phản không đủ
Ví dụ thất bại
<a href="#" style="color: lightblue;">Liên kết</a>
- Liên kết màu xanh sáng có tỉ lệ tương phản không đủ với nền trắng.
Biện pháp cải thiện
<a href="#" style="color: blue;">Liên kết</a>
- Tăng tỉ lệ tương phản và cải thiện khả năng nhìn thấy.
4. Quá trình đo lường và cải thiện tỉ lệ tương phản
a. Quy trình đo lường
- Lấy giá trị RGB hoặc mã hex của màu sắc.
- Nhập vào công cụ tính toán tỉ lệ tương phản và kiểm tra tỉ lệ.
- Nếu cần thiết, điều chỉnh màu sắc để đáp ứng tiêu chuẩn.
b. Các bước cải thiện
- Thay đổi sự kết hợp giữa màu văn bản và màu nền.
Khi tỉ lệ tương phản dưới mức tiêu chuẩn, thay đổi màu nền hoặc màu chữ. - Cung cấp phương thức thay thế
Triển khai chế độ tương phản cao hoặc tính năng chuyển đổi chủ đề.
5. Lợi ích của khả năng truy cập (Accessibility)
a. Nội dung dễ đọc cho tất cả mọi người.
Người dùng có khuyết tật về thị giác hoặc suy giảm thị lực do tuổi tác sẽ dễ dàng đọc nội dung hơn.
b. Cải thiện khả năng nhìn thấy trong môi trường di động.
Cung cấp trải nghiệm người dùng thoải mái và dễ đọc ngay cả trên màn hình nhỏ.
Tóm tắt
Mục “1.4.3 Tương phản (tối thiểu)” trong WCAG 2.2 yêu cầu tỉ lệ tương phản giữa văn bản và nền phải đạt ít nhất 4.5:1.
Điểm chính khi triển khai
- Chọn màu sắc một cách cẩn thận và kiểm tra tỉ lệ tương phản.
- Khi sử dụng hình ảnh nền, cần thực hiện các xử lý bổ sung để đảm bảo khả năng nhìn thấy.
- Sử dụng công cụ đo lường tỉ lệ tương phản để kiểm tra xem có đáp ứng tiêu chuẩn hay không.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web thân thiện với 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.