Thiết kế cho người mù màu: hướng dẫn đầy đủ

Khoảng 300 triệu người trên thế giới có một dạng rối loạn thị giác màu. Nếu website, ứng dụng hay biểu đồ dữ liệu của bạn chỉ dựa vào màu để truyền đạt thông tin, một phần đáng kể khán giả sẽ gặp khó khi sử dụng.

Tin tốt: thiết kế cho người mù màu mang lại lợi ích cho tất cả mọi người. Lựa chọn màu dễ tiếp cận cải thiện độ rõ, tính dễ đọc và khả năng sử dụng cho mọi người dùng — bất kể họ có rối loạn thị giác màu hay không.

Vì sao thiết kế thân thiện với người mù màu lại quan trọng

Rối loạn thị giác màu ảnh hưởng khoảng 8% nam giới và 0,5% nữ giới. Trên thực tế, điều này nghĩa là:

Trong nhóm 20 nam giới, khoảng 1–2 người có rối loạn
Trong lượng khán giả 1 triệu người, khoảng 80.000 nam giới có một dạng rối loạn đỏ-lục
Nhầm lẫn đỏ-lục là dạng phổ biến nhất, chiếm ~98% số trường hợp

Thiết kế cho người mù màu cũng ngày càng trở thành yêu cầu pháp lý. Hướng dẫn về khả năng tiếp cận nội dung web (WCAG) 2.1 yêu cầu rõ ràng rằng thông tin được truyền đạt bằng màu cũng phải có sẵn qua phương tiện khác.

Nguyên tắc vàng: đừng bao giờ chỉ dựa vào màu

Nguyên tắc quan trọng nhất trong thiết kế thân thiện với người mù màu rất đơn giản:

Đừng bao giờ dùng màu làm cách duy nhất để truyền đạt thông tin.

Luôn kết hợp màu với ít nhất một tín hiệu thị giác khác:

Nhãn chữ — gọi tên rõ ràng danh mục hoặc trạng thái
Biểu tượng hoặc ký hiệu — dùng hình dạng không phụ thuộc màu
Họa tiết hoặc kết cấu — đặc biệt hữu ích trong biểu đồ và bản đồ
Vị trí — dùng cách bố trí không gian để thể hiện thứ bậc
Hình dạng — dùng hình khác nhau cho các nhóm dữ liệu khác nhau

Tránh những tổ hợp màu dễ gây khó

Một số cặp màu đặc biệt khó phân biệt với người mù màu đỏ-lục:

Những tổ hợp rủi ro cao cần tránh

Tránh	Vì sao	Thay bằng
Đỏ trên nền lục	Hoàn toàn vô hình với người deuteranopia	Dùng lam trên nền cam
Lục trên nền đỏ	Cùng vấn đề	Dùng vàng trên nền lam
Nút đỏ và lục	Không phân biệt được đạt/không đạt	Thêm biểu tượng (✓/✗) và chữ
Chữ đỏ và đen	Đỏ có thể trông như xám đậm	Dùng in đậm hoặc gạch chân để nhấn mạnh
Hồng và xám	Trông y hệt với người protanopia	Dùng lam và xám

Những tổ hợp an toàn hơn

Với người rối loạn đỏ-lục, lam và cam là cặp màu dễ tiếp cận đáng tin cậy nhất — hai sắc này vẫn tách bạch ở hầu như mọi dạng rối loạn.

Các cặp an toàn khác:

Lam + vàng (rất tốt cho cả rối loạn đỏ-lục lẫn lam-vàng)
Lam + trắng
Đen + vàng (tương phản tối đa)
Tím + vàng

Thiết kế biểu đồ và đồ thị thân thiện với người mù màu

Trực quan hóa dữ liệu là nơi mù màu gây tác động lớn nhất. Những lỗi thường gặp:

Dùng đỏ/lục cho giá trị dương/âm
Dùng bản đồ nhiệt với dải màu đỏ-vàng-lục
Phân biệt nhiều chuỗi dữ liệu chỉ bằng màu

Giải pháp cho biểu đồ

1. Dùng họa tiết nền cùng với màu Thêm gạch chéo, chấm hoặc gạch caro vào các vùng biểu đồ để chúng vẫn phân biệt được ngay cả khi màu trông giống nhau.

2. Ghi nhãn trực tiếp lên dữ liệu Thay vì dựa vào chú giải màu, hãy ghi nhãn chuỗi dữ liệu ngay trên biểu đồ. Điều này giúp tất cả người dùng, không chỉ người mù màu.

3. Dùng bảng màu thân thiện với rối loạn thị giác màu Những bảng màu dễ tiếp cận được khuyến nghị:

Bảng Okabe-Ito: được thiết kế riêng cho khả năng tiếp cận trong hình khoa học
Bảng ColorBrewer: các bảng màu dựa trên nghiên cứu dành cho bản đồ và biểu đồ
Dùng trình mô phỏng mù màu của chúng tôi để kiểm tra biểu đồ vẫn tách bạch dưới mô phỏng

4. Cung cấp định dạng dữ liệu thay thế Hãy kèm chế độ xem bảng hoặc tệp tải về bên cạnh mọi biểu đồ, để người gặp khó với biểu diễn trực quan vẫn tiếp cận được dữ liệu gốc.

Thiết kế biểu mẫu và trạng thái giao diện

Biểu mẫu là khu vực rủi ro cao với người rối loạn thị giác màu vì chỉ báo trạng thái thường dựa vào màu:

Vấn đề thường gặp

Viền đỏ cho trường không hợp lệ, viền lục cho trường hợp lệ
“Trạng thái: Đang hoạt động” chỉ hiển thị bằng chữ màu lục
Thông báo lỗi chỉ hiển thị bằng màu đỏ

Cách làm dễ tiếp cận hơn

Trạng thái kiểm tra dữ liệu:

❌ Đừng: viền đỏ = lỗi, viền lục = thành công
✅ Hãy:  biểu tượng lỗi (⚠) + viền đỏ + dòng chữ mô tả lỗi
         biểu tượng thành công (✓) + viền lục + dòng chữ "Đã hợp lệ!"

Chỉ báo trạng thái:

❌ Đừng: • (chấm lục) = Trực tuyến, • (chấm đỏ) = Ngoại tuyến
✅ Hãy:  ✓ Trực tuyến, ✗ Ngoại tuyến (hoặc dùng hình khác nhau: ●/○)

Nút và lời kêu gọi hành động:

❌ Đừng: "Xác nhận" màu lục / "Hủy" màu đỏ — trông y hệt với người protanopia
✅ Hãy:  ghi nhãn nút rõ ràng + bảo đảm tương phản đủ + thêm biểu tượng

Yêu cầu về tương phản màu (WCAG)

Ngoài việc chọn màu, tỉ lệ tương phản đủ lớn là điều thiết yếu cho khả năng đọc. Hãy dùng công cụ kiểm tra tương phản của chúng tôi để xác minh các tổ hợp.

Yêu cầu	Tỉ lệ tối thiểu	Bối cảnh
WCAG AA	4,5:1	Chữ thường (dưới 18pt)
WCAG AA	3,0:1	Chữ lớn (từ 18pt hoặc 14pt đậm)
WCAG AAA	7,0:1	Nâng cao — chữ thường
WCAG AAA	4,5:1	Nâng cao — chữ lớn

Quan trọng: các tỉ lệ này được đo giữa độ sáng của chữ và của nền, và phải đạt cho mọi nhóm người dùng — kể cả dưới mô phỏng rối loạn thị giác màu.

Kiểm thử thiết kế của bạn

Luôn kiểm thử thiết kế bằng nhiều cách:

1. Dùng trình mô phỏng

Tải ảnh chụp màn hình lên trình mô phỏng ColorVision để xem thiết kế hiện ra thế nào với từng dạng rối loạn. Hãy thử cả bốn dạng: protanopia, deuteranopia, tritanopia và achromatopsia.

2. Dùng công cụ nhà phát triển của trình duyệt

Chrome và Firefox đều có sẵn mô phỏng:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Kiểm tra tỉ lệ tương phản

Đưa mọi tổ hợp chữ/nền qua một công cụ kiểm tra tương phản đồng thời hiển thị mô phỏng.

4. Lấy phản hồi thực tế

Nếu có thể, hãy kiểm thử với chính người dùng mù màu. Họ thường phát hiện những vấn đề mà mô phỏng bỏ sót.

Mẹo theo nền tảng

Thiết kế web

Dùng CSS để thêm thuộc tính aria-label và title cho các thành phần mã màu
Đừng tạo kiểu trạng thái :focus chỉ bằng màu
Bảo đảm trạng thái lỗi của biểu mẫu có biểu tượng + chữ, chứ không chỉ đổi màu

Khoa học dữ liệu và nghiên cứu

Dùng bảng màu Okabe-Ito làm mặc định trong R, Python (matplotlib) hay bất kỳ thư viện biểu đồ nào
Luôn kèm chú giải có nhãn chữ, ngay cả khi màu có vẻ đã tự nói lên tất cả

Ứng dụng di động

iOS và Android đều hỗ trợ mô phỏng trong cài đặt trợ năng
Hãy kiểm thử ứng dụng với các thiết lập đó bật lên trước mỗi bản phát hành lớn

Thiết kế in ấn

Đừng dựa vào phép ẩn dụ đèn giao thông đỏ/lục cho trạng thái
Bảo đảm đồ họa thông tin vẫn có nghĩa khi photocopy đen trắng

Công cụ thân thiện với người mù màu được khuyến nghị

Công cụ	Mục đích
Trình mô phỏng ColorVision	Mô phỏng bất kỳ hình ảnh nào trông ra sao với rối loạn thị giác màu
Kiểm tra tương phản	Kiểm tra tuân thủ WCAG kèm xem trước mô phỏng
Colour Oracle (ứng dụng máy tính)	Lớp mô phỏng toàn hệ thống
Who Can Use	Mô phỏng tỉ lệ tương phản với nhiều dạng khuyết tật
Plugin trợ năng cho Figma	Kiểm tra thời gian thực ngay trong Figma

Câu hỏi thường gặp

Thiết kế thân thiện với người mù màu có nghĩa là bỏ hết màu sắc? Không. Màu vẫn có thể dùng rộng rãi — nó chỉ không được là cách duy nhất truyền đạt thông tin. Hãy bổ sung tín hiệu thứ hai (chữ, biểu tượng, họa tiết) bên cạnh màu.

Có phải tôi chỉ cần thiết kế cho dạng đỏ-lục? Rối loạn đỏ-lục chiếm ~98% số trường hợp, nhưng thiết kế cho nó cũng thường giúp ích cho người thuộc dạng khác. Cách bao trùm nhất là kiểm thử mọi dạng bằng trình mô phỏng.

Người mù màu có dùng trình đọc màn hình không? Không hẳn. Rối loạn thị giác màu khác với mù lòa. Người dùng thuộc nhóm này thường có thị lực đầy đủ và không dùng trình đọc màn hình; điều họ cần là tín hiệu thị giác không phụ thuộc màu, chứ không phải văn bản thay thế.

Công cụ miễn phí tốt nhất để kiểm tra khả năng tiếp cận về màu là gì? Trình mô phỏng và công cụ kiểm tra tương phản của trang này hoàn toàn miễn phí. Với Figma, plugin miễn phí “Able” cung cấp kiểm tra tương phản theo thời gian thực.

Trả lời nhanh