Đã bao giờ bạn thử đọc văn bản trên màn hình và thấy khó đọc do bảng phối màu hoặc gặp khó khăn khi nhìn màn hình trong môi trường quá sáng hoặc ánh sáng yếu chưa? Hoặc có thể bạn là người có thị lực màu thường xuyên hơn, chẳng hạn như ước tính 300 triệu người bị mù màu hoặc 253 triệu người có thị lực kém?
Là một nhà thiết kế hoặc nhà phát triển, bạn cần hiểu cách mọi người cảm nhận màu sắc và độ tương phản, cho dù là tạm thời, theo tình huống hay vĩnh viễn. Việc này sẽ giúp bạn hỗ trợ tốt nhất cho nhu cầu về hình ảnh của họ.
Học phần này sẽ giới thiệu cho bạn một số nguyên tắc cơ bản về màu sắc và độ tương phản dễ tiếp cận.
Màu cảm nhận
Bạn có biết rằng các vật thể không có màu sắc nhưng phản chiếu bước sóng của ánh sáng không? Khi bạn nhìn thấy màu, mắt của bạn sẽ nhận và xử lý các bước sóng đó và chuyển đổi chúng thành màu sắc.
Đối với tính năng hỗ trợ tiếp cận kỹ thuật số, chúng tôi sẽ nói về các bước sóng này dựa trên màu sắc, độ bão hoà và độ sáng (HSL). Mô hình HSL được tạo như một giải pháp thay thế cho mô hình màu RGB và phù hợp hơn với cách con người nhận thức màu sắc.
Hue là cách định tính để mô tả một màu, chẳng hạn như đỏ, xanh lục hoặc xanh dương, trong đó mỗi sắc độ có một điểm cụ thể trên phổ màu với các giá trị nằm trong khoảng từ 0 đến 360, đỏ ở 0, xanh lục ở 120 và xanh dương ở 240.
Độ rực màu là cường độ của một màu, được đo bằng tỷ lệ phần trăm từ 0% đến 100%. Màu có độ bão hoà đầy đủ (100%) sẽ rất sống động, trong khi màu không có độ bão hoà (0%) sẽ có thang màu xám hoặc đen trắng.
Độ sáng là ký tự sáng hoặc tối của màu, được đo theo tỷ lệ phần trăm từ 0% (đen) đến 100% (trắng).
Đo độ tương phản màu
Để hỗ trợ những người khiếm thị, nhóm WAI đã tạo một công thức tương phản màu để đảm bảo có đủ độ tương phản giữa văn bản và nền. Khi theo dõi các tỷ lệ tương phản màu này, những người có thị lực khá kém có thể đọc văn bản ở chế độ nền mà không cần đến công nghệ hỗ trợ tăng cường độ tương phản.
Hãy xem hình ảnh với bảng màu rực rỡ và so sánh hình ảnh đó trông như thế nào với những hình ảnh có các dạng mù màu cụ thể.
Ở bên trái, hình ảnh hiển thị cát cầu vồng với các màu tím, đỏ, cam, vàng, xanh lục, xanh lam nhạt và xanh dương đậm. Bên phải là hoa văn cầu vồng sáng hơn, nhiều màu.
Mù màu xanh lục
Mù màu xanh lục (thường gọi là mù màu xanh lục) xảy ra ở 1% đến 5% nam giới, 0,35% đến 0,1% nữ giới.
Những người bị mù loà giảm nhạy cảm với ánh sáng xanh. Bộ lọc mù màu này mô phỏng loại mù màu này.
Mù màu đỏ
Mù màu đỏ (thường gọi là mù đỏ) xảy ra ở 1,01% đến 1,08% nam giới và 0,02% trong số 0,03% nữ giới.
Những người mắc chứng mù màu đỏ giảm nhạy cảm với ánh sáng đỏ. Bộ lọc mù màu này mô phỏng loại mù màu này.
Mù màu hoặc đơn sắc
Mù màu hoặc đơn sắc (hay mù màu hoàn toàn) rất hiếm khi xảy ra.
Những người mắc chứng Mù màu hoặc đơn sắc hầu như không nhận biết được ánh sáng đỏ, xanh lục hoặc xanh dương. Bộ lọc mù màu này mô phỏng loại mù màu này.
Tính độ tương phản màu
Công thức tương phản màu sử dụng độ sáng tương đối của các màu để xác định độ tương phản, có thể nằm trong khoảng từ 1 đến 21. Công thức này thường được rút ngắn thành [color value]:1. Ví dụ: màu đen thuần tuý so với màu trắng trơn có tỷ lệ tương phản màu lớn nhất ở mức 21:1.
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
Văn bản có kích thước thông thường (bao gồm cả hình ảnh văn bản) phải có tỷ lệ tương phản màu là 4.5:1 để đáp ứng các yêu cầu tối thiểu của WCAG về màu sắc.
Văn bản cỡ lớn và các biểu tượng thiết yếu phải có tỷ lệ tương phản màu là 3:1.
Văn bản có kích thước lớn có đặc điểm là in đậm ít nhất 18pt / 24px hoặc 14pt/18,5px. Biểu trưng và yếu tố trang trí không cần phải đáp ứng các yêu cầu về độ tương phản màu sắc này.
Rất may là bạn không cần phải thực hiện phép toán nâng cao vì có nhiều công cụ giúp bạn thực hiện các phép tính về độ tương phản màu. Các công cụ như Adobe Color, Trình phân tích độ tương phản màu, Leonardo và Công cụ chọn màu của Chrome cho Công cụ của Chrome có thể nhanh chóng cho bạn biết tỷ lệ tương phản màu và đưa ra đề xuất để giúp tạo các cặp và bảng màu phù hợp nhất.
Sử dụng màu sắc
Nếu không có đúng mức độ tương phản màu, thì từ, biểu tượng và các thành phần đồ hoạ khác sẽ khó tìm thấy và thiết kế có thể nhanh chóng không tiếp cận được. Tuy nhiên, bạn cũng cần chú ý đến cách sử dụng màu sắc trên màn hình, vì bạn không thể chỉ sử dụng màu sắc để truyền tải thông tin, hành động hoặc phân biệt thành phần hình ảnh.
Ví dụ: nếu bạn nói "nhấp vào nút màu xanh lục để tiếp tục", nhưng bỏ qua mọi nội dung hoặc giá trị nhận dạng bổ sung cho nút này, thì những người mắc một số chứng mù màu nhất định sẽ khó biết phải nhấp vào nút nào. Tương tự, nhiều biểu đồ, biểu đồ và bảng chỉ sử dụng màu sắc để truyền tải thông tin. Việc thêm giá trị nhận dạng khác, chẳng hạn như mẫu, văn bản hoặc biểu tượng, là rất quan trọng để giúp mọi người hiểu nội dung.
Việc xem xét các sản phẩm kỹ thuật số theo thang màu xám là một cách hiệu quả để nhanh chóng phát hiện các vấn đề tiềm ẩn về màu sắc.
Truy vấn nội dung nghe nhìn tập trung vào màu
Ngoài việc kiểm tra tỷ lệ tương phản màu và mức sử dụng màu trên màn hình, bạn nên cân nhắc áp dụng các truy vấn nội dung đa phương tiện ngày càng phổ biến và được hỗ trợ, giúp người dùng có nhiều quyền kiểm soát hơn đối với nội dung hiển thị trên màn hình.
Ví dụ: bằng cách sử dụng cụm từ tìm kiếm nội dung nghe nhìn @prefers-color-scheme, bạn có thể tạo giao diện tối. Giao diện này có thể hữu ích đối với những người mắc chứng chứng sợ ánh sáng hoặc nhạy cảm với ánh sáng. Bạn cũng có thể tạo giao diện có độ tương phản cao bằng @prefers-contrast, hỗ trợ những người khiếm khuyết về màu sắc và độ tương phản.
Ưu tiên bảng phối màu
Truy vấn nội dung đa phương tiện @prefers-color-scheme cho phép người dùng chọn phiên bản giao diện sáng hoặc tối của trang web hoặc ứng dụng mà họ đang truy cập. Bạn có thể xem sự thay đổi giao diện này trong thực tế bằng cách thay đổi các chế độ cài đặt lựa chọn ưu tiên sáng/tối rồi chuyển đến trình duyệt hỗ trợ truy vấn nội dung đa phương tiện này. Xem lại hướng dẫn dành cho máy Mac và Windows để cài đặt chế độ tối.
Ưu tiên độ tương phản
Truy vấn nội dung nghe nhìn @prefers-contrast kiểm tra chế độ cài đặt hệ điều hành của người dùng để xem liệu độ tương phản cao có được bật hay tắt hay không. Bạn có thể xem sự thay đổi của giao diện này trong thực tế bằng cách thay đổi chế độ cài đặt lựa chọn ưu tiên về độ tương phản và chuyển đến một trình duyệt hỗ trợ truy vấn nội dung đa phương tiện này (cài đặt chế độ tương phản Mac và Windows).
Phân lớp truy vấn nội dung nghe nhìn
Bạn có thể sử dụng nhiều truy vấn nội dung nghe nhìn tập trung vào màu sắc để cung cấp cho người dùng nhiều lựa chọn hơn nữa. Trong ví dụ này, chúng tôi xếp chồng @prefers-color-scheme và @prefers-contrast lại với nhau.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về màu sắc và độ tương phản
Nếu chỉ có màu sắc thì chưa đủ giá trị nhận dạng trong tài liệu. Yếu tố nào khác sẽ giúp độc giả xác định các thành phần trên giao diện người dùng?