Mô phỏng tình trạng thiếu thị lực màu trong Trình kết xuất Blink

Mathias Bynens

Bài viết này mô tả lý do và cách chúng tôi triển khai tính năng mô phỏng khiếm thị màu trong DevTools và Trình kết xuất Blink.

Nền: độ tương phản màu kém

Văn bản có độ tương phản thấp là vấn đề về khả năng hỗ trợ tiếp cận phổ biến nhất có thể tự động phát hiện được trên web.

Danh sách các vấn đề thường gặp về hỗ trợ tiếp cận trên web. Văn bản có độ tương phản thấp là vấn đề thường gặp nhất.

Theo bài phân tích của WebAIM về khả năng hỗ trợ tiếp cận của 1 triệu trang web hàng đầu, hơn 86% trang chủ có độ tương phản thấp. Trung bình, mỗi trang chủ có 36 trường hợp riêng biệt của văn bản có độ tương phản thấp.

Sử dụng Công cụ dành cho nhà phát triển để tìm, hiểu và khắc phục các vấn đề về độ tương phản

Công cụ của Chrome cho nhà phát triển có thể giúp nhà phát triển và nhà thiết kế cải thiện độ tương phản và chọn bảng phối màu dễ tiếp cận hơn cho ứng dụng web:

Gần đây, chúng tôi đã thêm một công cụ mới vào danh sách này và công cụ này có một chút khác biệt so với các công cụ khác. Các công cụ trên chủ yếu tập trung vào việc hiển thị thông tin về tỷ lệ tương phản và cung cấp cho bạn các lựa chọn để khắc phục vấn đề này. Chúng tôi nhận thấy rằng DevTools vẫn thiếu một cách để nhà phát triển hiểu rõ hơn về không gian vấn đề này. Để giải quyết vấn đề này, chúng tôi đã triển khai tính năng mô phỏng khiếm khuyết thị giác trong thẻ Hiển thị của DevTools.

Trong Puppeteer, API page.emulateVisionDeficiency(type) mới cho phép bạn bật các hoạt động mô phỏng này theo phương thức lập trình.

Khiếm khuyết thị lực màu

Khoảng 1/20 người bị hội chứng thiếu thị lực màu (còn gọi là "mù màu" theo cách gọi không chính xác). Những khiếm khuyết như vậy khiến người dùng khó phân biệt các màu sắc khác nhau, có thể làm tăng các vấn đề về độ tương phản.