Văn bản có độ tương phản thấp làm cho trang web của bạn trở nên khó đọc hơn đối với tất cả người dùng, thậm chí người dùng khiếm thị còn bị 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 sắc phù hợp hơn để giúp bạn khắc phục.
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. Hãy sử dụng bảng điều khiển Tổng quan về CSS, (xem trước) thẻ Vấn đề hoặc báo cáo Lighthouse để xem danh sách tất cả vấn đề.
- Khắc phụ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 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ị giác. Xem trang web của bạn theo cách người dùng nhìn thấy trang web đó.
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ả vấn đề về độ tương phản bằng một trong ba bảng điều khiển:
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ở Tổng quan về CSS.
- Chụp tổng quan.
- Mở phần Màu, cuộ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 thành phần và nhấp vào đường liên kết bên cạnh thành phần đó.
Khắc phục vấn đề theo mô tả trong phần Khắc phục văn bản có độ tương phản thấp.
(Xem trước) Vấn đề về độ tương phản trong thẻ Vấn đề
Cách xem 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ẻ Vấn đề:
- Mở Cài đặt > Thử nghiệm.
- Trên thanh bộ lọc, hãy tìm
contrast issue. - Đánh dấu chọn Bật tính năng tự động báo cáo vấn đề về độ tương phản thông qua bảng điều khiển 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 của Công cụ cho nhà phát triển, 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 văn bản có độ tương phản thấp.
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 một 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 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ử bị ảnh hưởng trong danh sách các thành phần.
- Khắc phục vấn đề theo mô tả trong phần Khắc phụ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 trong 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 bị ả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, rồi di chuột qua phần tử trong khung nhìn. Công cụ cho nhà phát triển hiển thị chú giải công cụ cho phần tử này.
Hãy lưu ý ký hiệu cảnh báo
bên cạnh giá trị tỷ lệ tương phản trong chú giải công cụ. Tỷ lệ tương phản đo 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, hãy 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 mức AA hoặc AAA trong nguyên tắc WebAIM.
Nhấp vào nút
Sử dụng màu được đề 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ủ 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 độ. Để không vượt quá cấp độ AA hoặc AAA, hãy chọn một màu bên dưới đườ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ả các vấn đề về độ tương phản mà bạn tìm thấy trong bảng điều khiển CSS, thẻ Vấn đề hoặc báo cáo Lighthouse.
Lưu các thay đổi
Cách lưu những 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 việc thiết lập 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 nguồn của bạn.
Tiếp theo là gì?
Tìm hiểu thêm:
- Tìm hiểu về tính năng hỗ trợ tiếp cận nói chung
- Cụ thể là hỗ trợ tiếp cận về Màu sắc và độ tương phản