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

Bạn đã bao giờ thử đọc văn bản trên màn hình nhưng thấy khó đọc đến hạn vào bảng phối màu hoặc gặp khó khăn trong việc nhìn thấy màn hình ở chế độ rất sáng hoặc môi trường ánh sáng yếu? Hoặc có thể bạn là người có màu da cố định vấn đề về thị lực, chẳng hạn như khoảng 300 triệu người bị mù màu hay 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à đối chiếu, cho dù là tạm thời, tình huống hay vĩnh viễn. Cách này sẽ giúp hỗ trợ tốt nhất cho nhu cầu thị giác của họ.

Học phần này sẽ giới thiệu cho bạn một số kiến thức cơ bản về độ tương phản và màu sắc.

Màu nhận biết

Bạn có biết rằng các vật thể không sở hữu màu sắc nhưng phản chiếu bước sóng của nhẹ không? Khi bạn nhìn thấy màu, mắt bạn sẽ tiếp nhận và xử lý các bước sóng đó và chuyển đổi chúng thành màu.

Khi nói đến hỗ trợ tiếp cận kỹ thuật số, chúng tôi đề cập đến các bước sóng này trong các thuật ngữ về màu sắc, độ bão hoà và độ sáng (HSL). Mô hình HSL được tạo dưới dạng 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.

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 màu có một điểm cụ thể trên phổ màu với các giá trị thay đổi từ 0 đến 360, với màu đỏ là 0, màu xanh lục là 120 và màu xanh là 240.

Độ rực màu là độ đậm của một màu, được đo bằng phần trăm trong khoảng từ 0% lê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à tính chất sáng hoặc tối của một màu, được đo theo tỷ lệ phần trăm từ 0% (màu đen) đến 100% (màu trắng).

Đo độ tương phản màu

Để giúp hỗ trợ những người khiếm thị khác nhau, nhóm WAI đã tạo ra một công thức độ tương phản màu thành đảm bảo đủ tương phản giữa văn bản và nền. Khi các tỷ lệ tương phản màu này theo đó, người có thị lực tương đối kém có thể đọc văn bản ở chế độ nền mà không cần công nghệ hỗ trợ tăng độ tương phản.

Hãy xem hình ảnh có bảng màu rực rỡ và so sánh hình ảnh đó như thế nào sẽ xuất hiện cho những người bị 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 nước, xanh dương nhạt và xanh dương đậm. Ở bên phải là hoa văn cầu vồng nhiều màu sáng hơn.

Mù màu xanh lục nhẹ

Mù màu xanh lục nhẹ (thường được gọi là mù xanh) 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 giảm độ nhạy với ánh sáng màu xanh lục. Bộ lọc mù màu này mô phỏng hình thức của loại mù màu này.

Mù màu đỏ nhẹ

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

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

Mù màu hoặc đơn sắc

Bệnh Mù màu hoàn toàn hoặc đơn sắc (hay mù màu hoàn toàn) xảy ra rất, rất hiếm khi xảy ra.

Những người bị Mù màu đỏ hoặc Đơn sắc hầu như không nhận thức được màu đỏ, đèn xanh lục hoặc xanh dương. Bộ lọc mù màu này mô phỏng loại người bị mù màu trông như thế nào.

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 để giúp 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 đen tuyền màu trắng 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 trên 4.5:1 để truyền yêu cầu tối thiểu của WCAG đối với màu sắc. 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ỡ lớn được đặc trưng là có kích thước ít nhất là 18pt / 24px hoặc 14pt / In đậm 18,5px. Biểu trưng và các yếu tố trang trí không cần màu sắc này các yêu cầu về độ tương phản.

Rất may là không yêu cầu toán học nâng cao vì có nhiều công cụ sẽ giúp bạn tính toán độ 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ụ cho nhà phát triển 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 bạn tạo các cặp màu và bảng màu toàn diện nhất.

Sử dụng màu sắc

Không có mức độ tương phản màu phù hợp, từ ngữ, biểu tượng và các thành phần đồ hoạ khác là các phần tử khó khám phá, và thiết kế nhanh chóng trở nên khó tiếp cận. Nhưng bạn cũng cần phải thanh toán chú ý đến cách sử dụng màu này 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 phần tử 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 bất kỳ nội dung hoặc giá trị nhận dạng bổ sung nào cho nút này, người mắc một số loại mù màu khó biết được nút nào nhấp vào. Tương tự, nhiều biểu đồ, biểu đồ và bảng chỉ sử dụng màu sắc để truyền đạt của bạn. Việc thêm một giá trị nhận dạng khác, chẳng hạn như hoa văn, văn bản hoặc biểu tượng, giúp mọi người hiểu được nội dung.

Kiểm tra các sản phẩm kỹ thuật số của bạn 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.

Cụm từ tìm kiếm về nội dung nghe nhìn tập trung vào màu sắc

Ngoài việc kiểm tra tỷ lệ tương phản màu cũng như việc sử dụng màu sắc trên màn hình, bạn nên cân nhắc áp dụng các phương pháp ngày càng phổ biến và được hỗ trợ truy vấn phương tiện cung cấp cho 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ụ: khi 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. Việc này có thể hữu ích với những người mắc chứng sợ ảnh 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 mắc chứng thiếu màu và độ nhạy về độ tương phản.

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

Truy vấn đa phương tiện @prefers-color-scheme cho phép người dùng chọn đèn hoặc phiên bản giao diện tối của trang web hoặc ứng dụng mà họ đang truy cập. Bạn có thể thấy thay đổi giao diện trong thực tế bằng cách thay đổi chế độ cài đặt lựa chọn ưu tiên sáng/tối và hãy chuyển đến một trình duyệt có hỗ trợ truy vấn nội dung đa phương tiện này. Xem xét Mac và Hướng dẫn dành cho chế độ tối trên Windows.

So sánh chế độ sáng và tối.

Ưu tiên độ tương phản

@prefers-contrast truy vấn đa phương tiện kiểm tra chế độ cài đặt hệ điều hành của người dùng để xem có bật chế độ tương phản cao hay không hoặc tắt. 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 độ tương phản các chế độ cài đặt lựa chọn ưu tiên và cách điều hướng đến một trình duyệt có hỗ trợ truy vấn nội dung nghe nhìn này (Chế độ tương phản trên Mac và Windows).

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

Truy vấn về 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 sắc để cung cấp cho người dùng nhiều hơn nữa lựa chọn. Trong ví dụ này, chúng tôi xếp chồng @prefers-color-scheme và @prefers-contrast cùng nhau.

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

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về màu sắc và độ tương phản