Bạn có thể cho rằng mọi người đều cảm thấy màu sắc hoặc mức độ dễ đọc văn bản giống như bạn. Cách chúng ta cảm nhận màu sắc có thể phụ thuộc vào môi trường (đèn kém hoặc sáng) và khả năng thị giác của chúng ta. Bạn hoặc người dùng của bạn có thể nằm trong số hàng triệu người bị mù màu hoặc có thị lực kém.
Để hỗ trợ nhiều người khiếm thị, nhóm WAI đã tạo ra một công thức tương phản màu nhằm đảm bảo đủ độ tương phản giữa văn bản và nền. Khi tuân theo các tỷ lệ tương phản màu này, những người có thị lực kém vừa phải có thể đọc văn bản trên nền mà không cần công nghệ hỗ trợ tăng độ tương phản.
Hãy lưu ý sự khác biệt trong tỷ lệ tương phản như trong Hình 1.
Tỷ lệ tương phản 4,5:1 là tỷ lệ tối thiểu bắt buộc được đặt theo Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) 2.0. Tỷ lệ này được chọn vì nó bù đắp cho sự mất mát về độ nhạy tương phản mà những người dùng bị mất thị lực thường gặp, tương đương với khoảng 20/40 thị lực.
Một lần nữa, 4,5:1 chỉ là mức tối thiểu. Để hỗ trợ người dùng có thị lực kém hoặc người bị mù màu khác, hãy đáp ứng cấp độ AAA và tạo nội dung có độ tương phản 7:1.
Bạn có thể kiểm tra độ tương phản màu bằng công cụ Kiểm tra tính năng hỗ trợ tiếp cận của Lighthouse trong Công cụ cho nhà phát triển.
Thuật toán tương phản cảm tính nâng cao
Thuật toán tương phản nhận biết nâng cao (APCA) là một cách tính toán độ tương phản dựa trên nghiên cứu hiện đại về cảm nhận màu sắc.
APCA phụ thuộc vào ngữ cảnh nhiều hơn so với cấp độ AA và AAA của WCAG.
Trong mô hình này, độ tương phản được tính dựa trên các đặc điểm sau:
- Thuộc tính không gian (độ đậm phông chữ và cỡ chữ)
- Màu văn bản (sự chênh lệch độ sáng nhận thấy giữa văn bản và nền)
- Bối cảnh (ánh sáng xung quanh, môi trường xung quanh và mục đích của văn bản)
Chrome có tính năng thử nghiệm để thay thế nguyên tắc về tỷ lệ tương phản AA/AAA bằng APCA.
Truyền đạt thông tin quan trọng không chỉ bằng màu sắc
Bất cứ khi nào bạn truyền đạt thông tin quan trọng cho người dùng, hãy sử dụng văn bản hoặc văn bản thay thế ngoài các chỉ dẫn bằng hình ảnh khi chia sẻ thông tin quan trọng. Các dấu hiệu hình ảnh bao gồm màu sắc, hoa văn, hình ảnh, kiểu phông chữ và ngôn ngữ định hướng.
Ví dụ: bạn có thể có một biểu mẫu liên hệ cho biết thông tin nhập không hợp lệ bằng cách gạch chân các thông tin đó bằng màu đỏ. Chỉ báo màu này không cho trình đọc màn hình hoặc người dùng bị suy giảm thị lực màu biết rằng tính năng nào đó không hoạt động. Người dùng có thể sẽ thắc mắc tại sao việc gửi biểu mẫu không hoạt động và bỏ cuộc.
Hãy nhớ thông báo cho người dùng theo nhiều cách về lỗi cụ thể. Ví dụ: bạn có thể thêm một thông báo lỗi để thông báo rằng dữ liệu đầu vào cụ thể không hợp lệ và lý do. Bạn cũng có thể thêm văn bản trợ giúp về hình thức nhập phù hợp.
Bạn vẫn có thể gạch chân dữ liệu đầu vào không hợp lệ bằng màu đỏ, miễn là có các dấu hiệu bổ sung không phải hình ảnh.
Nếu chủ yếu phụ thuộc vào việc sử dụng màu trong giao diện, bạn có thể tìm thấy các vấn đề về độ tương phản trong Công cụ của Chrome cho nhà phát triển.
Tăng độ tương phản và đảo ngược màu
Đối với những người có thị lực kém, chế độ tương phản cao có thể giúp họ dễ dàng di chuyển trong nội dung trên trang hơn. Có một số cách để thiết lập độ tương phản cao.
Cả macOS và Windows đều cung cấp các cách tăng độ tương phản trên hệ điều hành.
Người dùng cũng có thể chọn đảo ngược màu nền trước và màu nền sau (ví dụ: trên macOS). Điều này đặc biệt hữu ích đối với những trang web và ứng dụng không hỗ trợ chế độ tối.
Là nhà phát triển, bạn có thể kiểm thử để đảm bảo giao diện của mình vẫn hiển thị và hữu dụng bằng cách bật các chế độ cài đặt này và xác minh khả năng hữu dụng theo cách thủ công.
Ví dụ: thanh điều hướng có thể sử dụng màu nền tinh tế để cho biết trang nào được chọn. Nếu bạn xem trang ở chế độ tương phản cao, chi tiết nhỏ đó sẽ hoàn toàn biến mất và cùng với đó, người đọc sẽ nắm được trang nào đang hoạt động.
Nếu bạn đáp ứng độ tương phản cấp AA trở lên, nội dung của bạn vẫn sẽ hoạt động như mong đợi khi màu sắc bị đảo ngược hoặc có độ tương phản cao. Tuy nhiên, bạn vẫn nên kiểm thử để đảm bảo trải nghiệm như mong đợi.