Làm cho trang web dễ đọc hơn

Sofia Emelianova
Sofia Emelianova
GitHub

Văn bản có độ tương phản thấp khiến tất cả người dùng khó đọc trang web của bạn, đặc biệt là người dùng có thị lực kém. DevTools 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 các vấn đề đó.

Sử dụng Công cụ cho nhà phát triển để:

Khám phá văn bản có độ tương phản thấp

Cách phát hiện văn bản có độ tương phản thấp:

  1. Mở Công cụ cho nhà phát triển trên trang của bạn.

  2. Liệt kê tất cả vấn đề về độ tương phản bằng cách sử dụng một trong ba bảng sau:

Bạn có thể thử nghiệm bằng cách mở CodePen của chúng tôi.

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:

  1. Mở phần Tổng quan về CSS.
  2. Chụp ảnh tổng quan.
  3. Mở phần Màu sắc, chuyển đến Vấn đề về độ tương phản rồi nhấp vào một vấn đề (nếu có).

  4. Trong bảng Vấn đề về độ tương phản, hãy di chuột qua một phần tử rồi nhấp vào đường liên kết bên cạnh phần tử đó.

    Danh sách các vấn đề về độ tương phản trong phần Tổng quan về CSS.

  5. 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 đề:

  1. Bật tính năng báo cáo vấn đề về độ tương phản trong thẻ Vấn đề:
    1. Mở Settings (Cài đặt) > Experimental (Thử nghiệm).
    2. Trong thanh bộ lọc, hãy tìm contrast issue.
    3. Chọn Bật tính năng báo cáo tự động vấn đề về độ tương phản thông qua bảng Vấn đề. Bật tính năng báo cáo vấn đề về độ tương phản.
    4. 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.
  2. Mở thẻ Vấn đề.

  3. Mở rộng các vấn đề về độ tương phản mà DevTools tìm thấy, sau đó mở rộng bảng phần tử và nhấp vào một đường liên kết bên cạnh phần tử.

    Bảng gồm các phần tử có vấn đề về độ tương phản trong thẻ Vấn đề.

  4. 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:

  1. Trong Công cụ cho nhà phát triển, hãy mở Thẻ khác > Lighthouse.

  2. Tạo báo cáo Lighthouse bằng 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

    Báo cáo Lighthouse có các chế độ cài đặt Điều hướng, Hỗ trợ tiếp cận và Máy tính.

  3. Nhấp vào Phân tích thời gian tải trang và chờ Lighthouse tạo báo cáo.

  4. Chuyển đến phần Độ tương phản. Trong danh sách các phần tử, hãy nhấp vào một đường liên kết đến một phần tử chịu ảnh hưởng.

    Phần Độ tương phản trong báo cáo Lighthouse có danh sách các phần tử có vấn đề về độ tương phản.

  5. 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.

Khắc phục 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:

  1. Tìm một vấn đề về độ tương phản rồi nhấp vào một đường liên kết đến một phần tử chịu ảnh hưởng trên bảng điều khiển 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ử và chọn phần tử tương ứng.

    Một phần tử có vấn đề về độ tương phản được chọn trong bảng điều khiển Phần tử.

    Ví dụ: trên bản minh hoạ không truy cập được của CodePen, phần tử đầu tiên chịu ảnh hưởng là h1.line1.

  2. 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 hiển thị. DevTools sẽ hiện một chú thích cho phần tử này.

    Chú giải công cụ cho thấy dấu cảnh báo bên cạnh giá trị độ tương phản.

    Hãy lưu ý dấ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 lường sự khác biệt về độ sáng giữa màu nền trước (màu văn bản) và màu nền.

  3. Mở Công cụ chọn màu bên cạnh khai báo màu của văn bản 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.

    Mục Tỷ lệ tương phản của Công cụ chọn màu.

    Công cụ chọn màu cho biết tỷ lệ tương phản không đáp ứng các cấp độ AA hoặc AAA theo nguyên tắc của WebAIM.

  4. Nhấp vào nút Sử dụng màu được đề xuất bên cạnh cấp AAA. Ứng dụng Bộ chọn màu sẽ á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.

    Màu được áp dụng tuân thủ các nguyên tắc.

  5. Ngoài ra, để chọn màu theo cách thủ công, bạn có thể kéo hình tròn trong phần xem trước sắc độ. Để duy trì ở 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.

    Chọn một sắc độ màu bên dưới đường dưới cùng để duy trì ở cấp AAA.

  6. 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 bằng bảng Tổng quan về CSS, thẻ Vấn đề hoặc báo cáo Lighthouse.

Lưu các thay đổi

Cách lưu các thay đổi bạn thực hiện trong Công cụ cho nhà phát triển:

Tiếp theo là gì?

Tìm hiểu thêm: