Cách làm biểu đồ dễ đọc với người mù màu

Một biểu đồ có thể đúng về mặt kỹ thuật mà vẫn khiến người đọc không hiểu nổi. Thủ phạm quen thuộc là việc bắt màu gánh toàn bộ công việc: đường màu đỏ nghĩa là một điều, đường màu lục nghĩa là điều khác, và chú giải là chìa khóa duy nhất. Với người rối loạn thị giác màu — và với nhiều người xem biểu đồ dưới ánh chói, trên màn hình kém, hoặc ở chế độ đơn sắc — điều đó tạo ra rào cản không cần thiết.

Giải pháp không phải là ngừng dùng màu. Hãy coi màu là một trong nhiều tín hiệu. Hướng dẫn này biến nguyên tắc đó thành những quyết định thiết thực cho biểu đồ, bảng điều khiển, bản đồ và đồ họa thông tin.

Nguyên tắc cốt lõi: màu không thể là tín hiệu duy nhất

Tiêu chí thành công WCAG 1.4.1 yêu cầu màu không phải phương tiện thị giác duy nhất để truyền đạt thông tin, chỉ ra hành động, gợi phản hồi hay phân biệt một thành phần thị giác. Với đồ họa dữ liệu, điều đó nghĩa là người đọc vẫn phải phân biệt được danh mục, chuỗi, trạng thái hoặc ý nghĩa mà không cần nhận ra sắc màu.

Những lựa chọn thay thế tốt gồm:

Nhãn chữ và giá trị trực tiếp
Hình ký hiệu khác nhau trên đường hoặc điểm
Kiểu nét liền, nét đứt và chấm chấm
Họa tiết, kết cấu hoặc đường viền trong cột và vùng
Biểu tượng rõ ràng và chú giải có chữ mô tả
Một bảng dữ liệu hoặc tóm tắt bằng chữ cung cấp cùng thông tin thiết yếu

Tổ hợp tốt nhất tùy thuộc loại biểu đồ và việc người đọc cần cái nhìn nhanh hay giá trị chính xác.

Xây biểu đồ quanh câu hỏi

Trước khi chọn màu, hãy viết một câu nêu thông điệp chính của biểu đồ. Ví dụ: “Doanh số tăng ở mọi khu vực, mạnh nhất ở phía tây.” Rồi kiểm tra xem người đọc có trả lời được câu hỏi đó không nếu biểu đồ được xem ở dạng thang xám.

Nếu câu trả lời là không, hãy thêm một tín hiệu không dựa vào màu. Phép thử đơn giản này bắt được lỗi tiếp cận phổ biến nhất: dùng bảng màu đẹp mắt nhưng mã hóa thông tin chỉ qua sắc màu.

Ưu tiên nhãn trực tiếp hơn chú giải đặt xa

Chú giải buộc người đọc phải khớp một ô màu nhỏ với thành phần trên biểu đồ, đôi khi lặp lại nhiều lần. Việc này càng khó khi màu tương tự nhau hoặc các đường cắt nhau. Khi còn chỗ, hãy ghi nhãn chuỗi ở cuối đường, đặt giá trị cạnh cột, hoặc chú thích trực tiếp điểm quan trọng.

Ví dụ, thay vì ba đường lam, cam, lục với chú giải ở dưới, hãy thêm tên danh mục cạnh điểm cuối của mỗi đường. Giữ nhãn đủ gần để không bị nhầm sang chuỗi khác. Màu vẫn hữu ích, nhưng chữ mới là thứ giúp nhận diện.

Chọn tín hiệu bổ trợ theo loại biểu đồ

Biểu đồ đường

Hãy kết hợp kiểu nét, hình ký hiệu và nhãn ở cuối đường. Một đường liền với hình tròn, một đường nét đứt với hình vuông, và một đường chấm chấm với hình tam giác vẫn phân biệt được ngay cả khi màu trông giống nhau.

Tránh để quá nhiều chuỗi trên một biểu đồ. Khi có nhiều chuỗi, hãy cân nhắc dùng nhiều biểu đồ nhỏ — các biểu đồ riêng cùng thang đo — thay vì trông chờ người đọc gỡ rối một chú giải dày đặc.

Biểu đồ cột

Hãy dùng nhãn danh mục và giá trị trực tiếp. Nếu các cột đại diện cho những danh mục cần phân biệt trong cùng một nhóm, hãy thêm họa tiết hoặc đường viền rõ bên cạnh màu. Kỹ thuật G111 của W3C mô tả chính xác việc dùng màu kết hợp họa tiết cho cột.

Với cột chồng, hãy ghi nhãn từng phân đoạn khi có thể và cung cấp bảng hỗ trợ. Phân đoạn mỏng khó đọc với tất cả mọi người, kể cả khi bảng màu tốt.

Biểu đồ phân tán và bong bóng

Hãy ghép hình ký hiệu với màu, và dùng kích thước cùng tương phản đủ để ký hiệu không biến mất. Thêm viền quanh điểm khi màu nền của điểm nhạt hoặc nền biểu đồ rối. Nếu các điểm chồng lên nhau, hãy cung cấp bộ lọc, bảng dữ liệu, hoặc một chế độ xem thứ hai tách các nhóm.

Bản đồ và bản đồ nhiệt

Hãy dùng nhãn, ranh giới, ký hiệu hoặc họa tiết bên cạnh màu tô. Ví dụ, bản đồ giao thông công cộng có thể ghép màu mỗi tuyến với một ký hiệu bến đặc trưng. Trên bản đồ nền màu, đừng để thông điệp chính chỉ phụ thuộc vào một dải chuyển sáng-tối tinh tế; hãy kèm thang đo hiển thị rõ, giá trị và một bảng hoặc kết luận bằng chữ.

Thiết kế vì tương phản, không chỉ vì sắc màu khác nhau

Các màu có thể khác nhau về sắc nhưng tương tự nhau về độ sáng, nên chúng hòa lẫn khi ở thang xám hoặc dưới một khác biệt thị giác màu. Tương phản đặc biệt quan trọng với đường mảnh, ký hiệu nhỏ, ranh giới biểu đồ và chữ.

Với các đối tượng đồ họa phi văn bản cần thiết để hiểu biểu đồ, hướng dẫn về tương phản phi văn bản của WCAG thường dùng ngưỡng 3:1 so với các màu kề bên. Bối cảnh vẫn quan trọng, và đôi khi một nhãn hoặc bảng tương đương có thể truyền đạt thông tin mà không buộc người đọc phải phân biệt riêng phần đồ họa. Hãy coi việc kiểm tra tương phản là một phần của quá trình rà soát thiết kế, không phải vật thay thế cho nhãn và tín hiệu bổ trợ.

Hãy dùng công cụ kiểm tra tương phản để khảo sát tương phản tiền cảnh/nền cho chữ giao diện và các thành phần thị giác đơn giản. Sau đó kiểm tra toàn bộ biểu đồ: bố cục thực tế còn có sự kề cận, nét mảnh, trạng thái di chuột và lớp phủ mà một phép kiểm tra cặp màu đơn lẻ không nắm bắt được.

Trao cho người đọc dữ liệu đằng sau bức tranh

Biểu đồ là bản tóm tắt, không thay thế việc tiếp cận dữ liệu. Khi biểu đồ gánh một quyết định hay khẳng định quan trọng, hãy kèm một hoặc nhiều thứ sau:

Một bảng đặt gần đó với danh mục và giá trị
Một tóm tắt ngắn gọn bằng chữ về ý chính
Một tệp tải về dễ tiếp cận, chẳng hạn CSV
Một mô tả dài cho những quan hệ thị giác phức tạp
Chú giải công cụ truy cập được bằng bàn phím hoặc chế độ xem dữ liệu có thể focus với biểu đồ tương tác

Điều này cải thiện khả năng sử dụng cho người dùng trình đọc màn hình cũng như những người không phân biệt được mọi cách mã hóa thị giác. Nó cũng cho phép người đọc kiểm chứng thông điệp mà không phải ước lượng chiều cao cột hay lát bánh.

Danh sách rà soát biểu đồ thực tế

Hãy dùng trước khi xuất bản một báo cáo, bài thuyết trình, bảng điều khiển sản phẩm hay bài viết:

Tiêu đề có nêu biểu đồ nói về điều gì và trong khoảng thời gian nào không?
Có thể nhận diện từng chuỗi hay danh mục mà không chỉ dựa vào màu không?
Các giá trị thiết yếu đã được ghi nhãn, có trong bảng, hoặc được mô tả trong phần chữ gần đó chưa?
Đường, ký hiệu, cột và mục chú giải có đủ tương phản ở nơi chúng chạm hoặc chồng lên nhau không?
Nhãn có đọc được ở mức phóng thông thường và trên màn hình nhỏ không?
Biểu đồ có tránh những nhãn trạng thái đỏ/lục mơ hồ như “tốt” và “xấu” mà không kèm chữ hay biểu tượng không?
Người dùng bàn phím có tiếp cận được thông tin của biểu đồ tương tác không?
Việc rà soát ở thang xám hoặc bằng mô phỏng thị giác màu có làm lộ thành phần nào mơ hồ không?

Kiểm thử với nội dung thật và người thật

Kiểm tra tự động và mô phỏng là công cụ cảnh báo sớm hữu ích, nhưng không chứng minh được rằng biểu đồ hiệu quả với mọi người. Hãy kiểm thử biểu đồ hoàn chỉnh ở kích thước thật, trong chính sản phẩm hay tài liệu nơi nó sẽ xuất hiện. Hãy nhờ một người tham gia chỉ ra chuỗi quan trọng nhất, giá trị cao nhất và ý chính mà không được gợi ý.

Trình mô phỏng thị giác màu của chúng tôi có thể giúp nhà thiết kế khảo sát một hình ảnh trông ra sao dưới vài khác biệt thị giác màu phổ biến. Hãy coi đó là một bước rà soát bổ sung, không phải vật thay thế cho nghiên cứu người dùng hay đánh giá WCAG.

Để có hướng dẫn giao diện rộng hơn, xem thiết kế cho người mù màu.

Ví dụ: cải thiện một biểu đồ trạng thái

Hãy hình dung một bảng điều khiển với năm phòng ban: cột lục nghĩa là đạt mục tiêu, cột đỏ nghĩa là chậm tiến độ, cột vàng nghĩa là có rủi ro. Một phiên bản dễ tiếp cận hơn có thể:

Thêm chữ trạng thái vào mỗi cột: “Đạt mục tiêu”, “Có rủi ro” hoặc “Chậm tiến độ”.
Dùng biểu tượng trong nhãn, như dấu tích, tam giác cảnh báo hoặc mũi tên, kèm chữ giải thích.
Dùng họa tiết hoặc đường viền làm tín hiệu thị giác thứ hai.
Hiển thị phần trăm thực tế và giá trị mục tiêu.
Cung cấp một bảng phía dưới biểu đồ với phòng ban, giá trị hiện tại, mục tiêu và trạng thái.

Màu vẫn giúp nhiều người quét mẫu hình nhanh hơn. Nó chỉ không còn là con đường duy nhất dẫn tới sự thấu hiểu.

Tóm lại

Biểu đồ dễ tiếp cận khiến thông điệp bền vững hơn. Nhãn trực tiếp, họa tiết, kiểu nét, tương phản và dữ liệu tương đương giúp người rối loạn thị giác màu hiểu cùng một thông tin như mọi người — và làm công việc của bạn rõ ràng hơn với toàn bộ khán giả.

Trả lời nhanh