Màu sắc và độ tương phản

Bạn đã bao giờ cố gắng đọ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 thấy màn hình trong môi trường quá sáng hoặc thiếu sáng chưa? Hoặc có thể bạn là người gặp vấn đề về thị lực màu vĩnh viễn, như khoảng300 triệu người mù màu hoặc 253 triệu người có thị lực kém?

Là 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, dù là tạm thời, theo tình huống hay vĩnh viễn. Điều này giúp bạn hỗ trợ tốt nhất cho nhu cầu về thị lực của họ.

Trong mô-đun này, bạn sẽ được giới thiệu một số nguyên tắc cơ bản về màu sắc và độ tương phản có thể tiếp cận.

Cảm nhận màu sắc

Bạn có biết rằng các vật thể không có màu sắc mà phản xạ các bước sóng ánh sáng không? Khi bạn nhìn thấy màu sắc, mắt bạn sẽ nhận và xử lý các bước sóng đó rồi chuyển đổi thành màu sắc.

Khi nói đến khả năng tiếp cận kỹ thuật số, chúng ta sẽ nói về các bước sóng này theo sắc độ, độ bão hoà và độ sáng (HSL). Mô hình HSL được tạo ra như một mô hình thay thế cho mô hình màu RGB và phù hợp hơn với cách con người cảm nhận màu sắc.

Sắc độ là một cách định tính để mô tả màu sắc, chẳng hạn như đỏ, lục hoặc lam, trong đó mỗi sắc độ có một vị trí cụ thể trên quang phổ màu với các giá trị từ 0 đến 360, với màu đỏ ở 0, màu lục ở 120 và màu lam ở 240.

Độ bão hoà 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 rực rỡ, trong khi màu không có độ bão hoà (0%) sẽ là thang màu xám hoặc đen trắng.

Độ sáng là đặc tính sáng hoặc tối của một màu, được đo bằng 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 gặp nhiều vấn đề về thị lực, nhóm WAI đã tạo ra một công thức tương phản màu nhằm đảm bảo có đủ độ 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ợ nâng cao độ tương phản.

Hãy xem hình ảnh có bảng màu rực rỡ và so sánh cách hình ảnh đó sẽ xuất hiện đối với những người mắc một số dạng mù màu.

Ở bên trái, hình ảnh cho thấy cát cầu vồng có màu tím, đỏ, cam, vàng, xanh lục, xanh dương nhạt và xanh dương đậm. Bên phải là một hoạ tiết cầu vồng nhiều màu sáng hơn.

Mù màu xanh lục

Chứng mù màu xanh lục (thường được gọi là mù màu lục) xảy ra ở 1% đến 5% nam giới, 0,35% đến 0,1% nữ giới.

Những người mắc chứng mù màu xanh lục có độ nhạy cảm với ánh sáng xanh lục giảm. Bộ lọc mù màu này mô phỏng hình ảnh của loại mù màu này.

Mù màu đỏ

Chứng mù màu đỏ (thường được gọi là mù màu đỏ) xảy ra ở 1,01% đến 1,08% nam giới và 0,02% đến 0,03% nữ giới.

Những người mắc chứng mù màu đỏ có độ nhạy cảm với ánh sáng đỏ giảm. Bộ lọc mù màu này mô phỏng hình ảnh của loại mù màu này.

Mù màu hoặc mù màu hoàn toàn

Chứng mù màu hoặc mù màu hoàn toàn (hoặc 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 mù màu hoàn toàn hầu như không cảm nhận được ánh sáng đỏ, lục hoặc lam. Bộ lọc mù màu này mô phỏng hình ảnh của loại mù màu này.

Tính toán độ tương phản màu

Công thức tương phản màu sử dụng độ chói tương đối của màu để giúp xác định độ tương phản, có thể từ 1 đến 21. Công thức này thường được rút gọn thành [color value]:1. Ví dụ: màu đen thuần khiết trên nền trắng thuần khiết có tỷ lệ tương phản màu lớn nhất là 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. Văn bản có kích thướ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 trưng bởi kích thước tối thiểu là 18pt / 24px hoặc 14pt/18,5px được in đậm. Biểu trưng và các thành phần trang trí được miễn tuân theo các yêu cầu về độ tương phản màu này.

Rất may là bạn không cần phải tính toán nâng cao vì có rất nhiều công cụ sẽ thực hiện các phép tính tương phản màu cho bạn. Các công cụ như Adobe Color, Color Contrast Analyzer, Leonardo và bộ chọn màu DevTools của Chrome có thể nhanh chóng cho bạn biết tỷ lệ tương phản màu và đưa ra các đề xuất để giúp tạo ra các cặp màu và bảng màu toàn diện nhất.

Sử dụng màu

Nếu không có mức độ tương phản màu tốt, thì các từ, biểu tượng và các thành phần đồ hoạ khác sẽ khó phát hiện, và thiết kế có thể nhanh chóng trở nên không thể tiếp cận. Tuy nhiên, bạn cũng cần chú ý đến cách sử dụng màu trên màn hình, vì bạn không thể chỉ sử dụng màu để truyền đạt thông tin, hành động hoặc phân biệt một thành phần trực quan.

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 mã nhận dạng bổ sung cho nút, thì những người mắc một số loại mù màu sẽ khó biết nên nhấp vào nút nào. Tương tự, nhiều biểu đồ, đồ thị và bảng chỉ sử dụng màu để truyền đạt thông tin. Việc thêm một mã nhận dạng khác, chẳng hạn như hoạ tiết, 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.

Xem xét các sản phẩm kỹ thuật số của bạn ở thang màu xám là một cách hay để nhanh chóng phát hiện các vấn đề tiềm ẩn về màu.

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à việ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 nghe nhìn ngày càng phổ biến và được hỗ trợ, giúp người dùng kiểm soát nhiều hơn những gì hiển thị trên màn hình.

Ví dụ: bằng cách sử dụng truy vấn nội dung nghe nhìn @prefers-color-scheme, bạn có thể tạo giao diện tối, có thể hữu ích cho những người mắc 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 thiếu khả năng phân biệt màu và nhạy cảm với độ tương phản.

Ưu tiên bảng phối màu

Truy vấn nội dung nghe nhìn @prefers-color-scheme cho phép người dùng chọn phiên bả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ể thấy sự thay đổi giao diện này bằng cách thay đổi chế độ cài đặt ưu tiên sáng hoặc tối và chuyển đến một trình duyệt hỗ trợ truy vấn nội dung nghe nhìn này. Xem hướng dẫn về chế độ tối cho Mac và Windows.

So sánh chế độ sáng và 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 độ tương phản cao có được bật hay tắt. Bạn có thể thấy sự thay đổi giao diện này bằng cách thay đổi chế độ cài đặt ưu tiên độ tương phản và chuyển đến một trình duyệt hỗ trợ truy vấn nội dung nghe nhìn này (Mac và Windows chế độ cài đặt độ tương phản).

So sánh độ tương phản thông thường và độ tương phản cao.

Truy vấn nội dung nghe nhìn theo lớp

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 để 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 ta đã xếp chồng @prefers-color-scheme và @prefers-contrast.

So sánh cả màu và độ tương phản.