Văn bản có độ tương phản thấp làm cho trang web của bạn khó đọc hơn đối với tất cả người dùng, thậm chí còn nhiều hơn nữa đối với người dùng khiếm thị. Công cụ cho nhà phát triển có thể tự động tìm các vấn đề về độ tương phản thấp và đề xuất màu tốt hơn để giúp bạn khắc phục vấn đề đó.
Sử dụng Công cụ cho nhà phát triển để:
- Tìm hiểu các vấn đề về độ tương phản. Sử dụng bảng Tổng quan về CSS, thẻ Vấn đề (bản xem trước) hoặc báo cáo Lighthouse để xem danh sách tất cả các vấn đề.
- Khắc phục các vấn đề về độ tương phản. Xem các vấn đề với chú giải công cụ ở chế độ trình kiểm tra và chọn các màu mà Công cụ chọn màu đề xuất để khắc phục tỷ lệ tương phản.
- Mô phỏng khiếm khuyết thị lực. Xem trang web của bạn theo cách người dùng nhìn thấy.
Khám phá văn bản có độ tương phản thấp
Cách khám phá văn bản có độ tương phản thấp:
- Mở Công cụ cho nhà phát triển trên trang của bạn. Trong hướng dẫn này, bạn có thể sử dụng trang minh hoạ này.
Xem danh sách tất cả các vấn đề về độ tương phản bằng một trong ba bảng điều khiển:
Các vấn đề về độ tương phản trong bảng điều khiển Tổng quan về CSS
Cách xem thông tin tổng quan:
- Mở trang Tổng quan về CSS.
- Chụp ảnh tổng quan.
- Mở phần Màu sắc, di chuyển đến mục Vấn đề về độ tương phản rồi nhấp vào một vấn đề, nếu có.
Trong bảng Vấn đề về độ tương phản, hãy di chuột qua một yếu tố rồi nhấp vào đường liên kết bên cạnh yếu tố đó.
Khắc phục vấn đề theo mô tả trong phần Khắc phục sự cố văn bản có độ tương phản thấp.
(Xem trước) Các vấn đề về độ tương phản trong thẻ Vấn đề
Cách tải danh sách các vấn đề:
- Bật tính năng báo cáo vấn đề về độ tương phản trong thẻ Issues (Vấn đề):
- Mở Cài đặt > Thử nghiệm.
- Trong thanh bộ lọc, hãy tìm
contrast issue. - Đánh dấu mục Bật tính năng tự động báo cáo vấn đề về độ tương phản qua bảng Vấn đề.
- Nhấp vào Tải lại Công cụ cho nhà phát triển trong lời nhắc ở trên cùng.
- Mở thẻ Vấn đề.
Mở rộng các vấn đề về độ tương phản mà Công cụ cho nhà phát triển tìm thấy, sau đó mở rộng bảng phần tử và nhấp vào đường liên kết bên cạnh phần tử.
Khắc phục vấn đề theo mô tả trong phần Khắc phục sự cố văn bản có độ tương phản thấp.
Các vấn đề về độ tương phản trong báo cáo Lighthouse
Để chạy một báo cáo:
- Trong Công cụ cho nhà phát triển, hãy mở
Thẻ khác > Lighthouse.
- Tạo báo cáo Lighthouse với các chế độ cài đặt sau:
- Chế độ: Điều hướng (mặc định)
- Danh mục: Hỗ trợ tiếp cận
- Thiết bị: Máy tính
- Nhấp vào Phân tích lượt tải trang rồi đợi Lighthouse tạo báo cáo.
- Di chuyển xuống phần Độ tương phản, rồi nhấp vào đường liên kết đến một phần tử được hiệu ứng trong danh sách thành phần.
- Khắc phục vấn đề theo mô tả trong phần Khắc phục sự cố văn bản có độ tương phản thấp.
Sửa văn bản có độ tương phản thấp
Cách khắc phục vấn đề về độ tương phản thấp:
- Tìm vấn đề về độ tương phản rồi nhấp vào đường liên kết đến một phần tử bị ảnh hưởng trên bảng Tổng quan về CSS, thẻ Vấn đề hoặc báo cáo Lighthouse. Công cụ cho nhà phát triển sẽ đưa bạn đến bảng điều khiển Phần tử rồi chọn phần tử tương ứng.
Ví dụ: trên trang minh hoạ này, phần tử đầu tiên chịu ảnh hưởng là
h1.line1. Nhấp vào
Kiểm tra ở góc trên cùng bên phải của Công cụ cho nhà phát triển và di chuột qua phần tử trong khung nhìn. Công cụ cho nhà phát triển hiển thị chú thích cho phần tử này.
Hãy chú ý dấu hiệu cảnh báo
bên cạnh giá trị tỷ lệ tương phản trong chú thích. Tỷ lệ tương phản đo lường sự chênh lệch về độ sáng giữa màu nền trước (màu văn bản) và màu nền sau.
Mở Công cụ chọn màu bên cạnh phần khai báo màu cho văn bản của phần tử và trong Công cụ chọn màu, mở rộng phần Tỷ lệ tương phản.
Công cụ chọn màu cho bạn biết tỷ lệ tương phản không đáp ứng các mức AA hoặc AAA theo nguyên tắc của WebAIM.
Nhấp vào nút
Sử dụng màu đề xuất bên cạnh cấp độ AAA. Công cụ chọn màu áp dụng màu văn bản tuân thủ các nguyên tắc về tỷ lệ tương phản.
Ngoài ra, để chọn màu theo cách thủ công, bạn có thể kéo vòng tròn trong bản xem trước sắc độ. Để ở trong cấp độ AA hoặc AAA, hãy chọn một màu bên dưới dòng trên cùng hoặc dưới cùng tương ứng.
Tương tự, hãy khắc phục tất cả vấn đề về độ tương phản mà bạn tìm thấy trong bảng Tổng quan về CSS, thẻ Vấn đề hoặc báo cáo Lighthouse.
Ví dụ: trên 
Kiểm tra ở góc trên cùng bên phải của Công cụ cho nhà phát triển và di chuột qua phần tử trong khung nhìn. Công cụ cho nhà phát triển hiển thị chú thích cho phần tử này.
Sử dụng màu đề xuất bên cạnh cấp độ AAA. Công cụ chọn màu áp dụng màu văn bản tuân thủ các nguyên tắc về tỷ lệ tương phản.
Lưu các thay đổi
Để lưu các thay đổi bạn đã thực hiện trong Công cụ cho nhà phát triển:
- Sao chép tất cả các thay đổi về CSS cùng một lúc rồi dán vào mã của bạn
- Hãy cân nhắc thiết lập một Không gian làm việc cho phép Công cụ cho nhà phát triển lưu tệp trực tiếp vào các nguồn của bạn.
Tiếp theo là gì?
Tìm hiểu thêm:
- Tìm hiểu chung về tính năng Hỗ trợ tiếp cận
- Cụ thể là khả năng hỗ trợ tiếp cận về màu sắc và độ tương phản