Nếu có thị lực tốt, bạn có thể cho rằng mọi người đều cảm nhận được màu sắc hoặc mức độ dễ đọc của văn bản giống như bạn. Tất nhiên, trường hợp này không đúng. Như bạn có thể tưởng tượng, một số tổ hợp màu mà một số người có thể đọc tốt lại khó hoặc không thể kết hợp được đối với những người khác. Điều này thường là do độ tương phản màu, mối quan hệ giữa độ chói của màu nền trước và nền sau. Khi màu sắc tương tự nhau, tỷ lệ tương phản sẽ thấp. Khi màu sắc khác nhau, tỷ lệ tương phản sẽ cao hơn.
Nguyên tắc WebAIM đề xuất tỷ lệ tương phản AA (tối thiểu) là 4,5:1 cho tất cả văn bản. Có những ngoại lệ đối với văn bản rất lớn (lớn hơn 120-150% so với văn bản nội dung mặc định) với tỷ lệ có thể giảm xuống 3:1. Hãy lưu ý sự khác biệt về tỷ lệ tương phản hiển thị dưới đây:
Tỷ lệ tương phản là 4,5:1 được chọn cho mức AA vì tỷ lệ này bù đắp cho sự mất mát về độ nhạy tương phản thường gặp phải mà người dùng bị mất thị lực tương đương với thị lực khoảng 20/40. 20/40 thường được báo cáo là thị lực điển hình của những người khoảng 80 tuổi. Đối với người dùng có thị lực kém hoặc khiếm khuyết về màu sắc, chúng ta có thể tăng độ tương phản lên tới 7:1 cho văn bản trên cơ thể.
Bạn có thể dùng tính năng Kiểm tra khả năng hỗ trợ tiếp cận trong Lighthouse để kiểm tra độ tương phản màu. Cách chạy báo cáo:
- Mở Công cụ cho nhà phát triển.
- Nhấp vào Kiểm tra.
- Chọn Hỗ trợ tiếp cận.
Chrome cũng có một tính năng thử nghiệm giúp bạn phát hiện tất cả văn bản có độ tương phản thấp trên trang. Bạn cũng có thể dùng các đề xuất màu sắc dễ tiếp cận để sửa văn bản có độ tương phản thấp.
Để có báo cáo đầy đủ hơn, hãy cài đặt Tiện ích Thông tin chi tiết về hỗ trợ tiếp cận. Báo cáo Fastpass bao gồm thông tin chi tiết về mọi phần tử không vượt qua được bước kiểm tra độ tương phản màu.
Thuật toán tương phản nhận thức nâng cao (APCA)
Thuật toán tương phản cảm tính nâng cao (APCA) là một phương pháp mới để 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.
So với nguyên tắc của AA và AAA, APCA phụ thuộc vào ngữ cảnh nhiều hơn.
Độ 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.
Đừng chỉ truyền tải thông tin bằng màu sắc
Có khoảng 320 triệu người trên toàn thế giới bị khiếm khuyết về thị lực màu. Cứ 12 nam giới và 1/200 nữ thì có 1 người mắc một dạng mù màu, nghĩa là khoảng 5% người dùng sẽ không trải nghiệm trang web của bạn theo cách bạn mong muốn. Việc dựa vào màu sắc để truyền tải thông tin sẽ đẩy con số đó đến các mức không được chấp nhận.
Ví dụ: trong biểu mẫu nhập, số điện thoại có thể được gạch chân màu đỏ để cho biết số điện thoại đó không hợp lệ. Đối với người dùng trình đọc màn hình hoặc thiếu màu, thông tin đó được truyền tải kém hoặc hoàn toàn không được truyền tải. Do đó, bạn phải luôn cố gắng cung cấp nhiều cách thức để người dùng tiếp cận thông tin quan trọng.
Danh sách kiểm tra WebAIM trong mục 1.4.1 nêu rõ rằng "không nên sử dụng màu sắc làm phương thức duy nhất để truyền tải nội dung hoặc phân biệt các phần tử hình ảnh". Bài viết này cũng lưu ý rằng bạn không nên sử dụng "chỉ màu sắc để phân biệt đường liên kết với văn bản xung quanh" trừ phi các đường liên kết đó đáp ứng một số yêu cầu về độ tương phản nhất định. Thay vào đó, danh sách kiểm tra này đề xuất thêm một chỉ báo bổ sung, chẳng hạn như dấu gạch dưới (sử dụng thuộc tính text-decoration của CSS) để cho biết thời điểm đường liên kết hoạt động.
Một cách cơ bản để sửa ví dụ trước là thêm một thông báo bổ sung vào trường, thông báo rằng thông báo đó không hợp lệ và lý do.
Khi bạn xây dựng một ứng dụng, hãy lưu ý những điều sau và chú ý đến những khía cạnh mà bạn có thể phụ thuộc quá nhiều vào màu sắc để truyền tải thông tin quan trọng.
Nếu muốn biết trang web của mình trông như thế nào trước những người khác hoặc nếu bạn quá phụ thuộc vào việc sử dụng màu sắc trong giao diện người dùng, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng nhiều dạng suy giảm thị lực. Chrome có một tính năng Mô phỏng chỉ số khiếm khuyết. Để truy cập vào công cụ này, hãy mở Công cụ cho nhà phát triển, sau đó mở thẻ Kết xuất trong Ngăn. Từ đó, bạn có thể mô phỏng các trường hợp thiếu màu sau đây:
- Mù màu đỏ: không thể nhận biết bất kỳ ánh sáng đỏ nào.
- Mù màu xanh lục: không thể nhận biết ánh sáng xanh lục.
- Mù màu xanh dương: không thể nhận biết ánh sáng xanh lam.
- Mù màu: không thể nhận biết bất kỳ màu sắc nào ngoại trừ các sắc độ của màu xám (rất hiếm).
Chế độ tương phản cao
Chế độ tương phản cao cho phép người dùng đảo ngược màu nền trước và màu nền sau, điều này thường giúp văn bản nổi bật hơn. Đối với người có thị lực kém, chế độ tương phản cao có thể giúp họ di chuyển nội dung trên trang dễ dàng hơn nhiều. Có một số cách để thiết lập chế độ tương phản cao trên máy của bạn:
Các hệ điều hành như Mac OSX và Windows cung cấp chế độ tương phản cao mà bạn có thể bật cho mọi ứng dụng ở cấp hệ thống.
Một bài tập hữu ích là bật chế độ cài đặt độ tương phản cao và xác minh rằng tất cả giao diện người dùng trong ứng dụng của bạn vẫn hiển thị và sử dụng được.
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 trong một tiện ích có độ tương phản cao, chi tiết nhỏ đó sẽ hoàn toàn biến mất. Cùng với đó, người đọc sẽ biết được trang nào đang hoạt động.
Tương tự, trong ví dụ trước đó, đường gạch chân màu đỏ trên trường số điện thoại không hợp lệ có thể hiển thị với màu xanh lục lam khó phân biệt.
Nếu đã đáp ứng các tỷ lệ tương phản được đề cập trước đó, thì bạn sẽ không thấy vấn đề gì khi hỗ trợ chế độ tương phản cao. Tuy nhiên, để yên tâm hơn, hãy cân nhắc cài đặt Tiện ích có độ tương phản cao của Chrome và kiểm tra lại trang của bạn để kiểm tra xem mọi thứ có hoạt động và hiển thị như mong đợi hay không.