Skip to main content
ColorVision
Tiếng Việt
Công cụ mô phỏng miễn phí

Trình mô phỏng mù màu

Tải lên bất kỳ hình ảnh nào để xem nó hiện ra thế nào với người mắc các dạng rối loạn thị giác màu khác nhau. Toàn bộ xử lý diễn ra trên trình duyệt của bạn — hình ảnh không bao giờ được tải lên máy chủ nào.

Tải hình ảnh của bạn lên

Bộ lọc đang bật

Bình thường

Thị giác màu tiêu chuẩn

Chế độ mô phỏng

Hình ảnh mô phỏng của bạn sẽ hiện ở đây sau khi tải lên.

Về trình mô phỏng mù màu này

Cách hoạt động

Trình mô phỏng dùng các ma trận biến đổi màu dựa trên công trình của Machado, Oliveira & Fernandes (2009) để chuyển màu của từng điểm ảnh sang cách một người mắc từng dạng rối loạn thị giác màu nhìn thấy. Mọi phép tính đều chạy cục bộ trên trình duyệt bằng HTML5 Canvas API.

Ai dùng công cụ này

Nhà thiết kế và lập trình viên dùng công cụ này để kiểm tra xem giao diện, đồ họa thông tin, biểu đồ hay tài liệu tiếp thị của họ có dễ tiếp cận với khoảng 300 triệu người mắc rối loạn thị giác màu trên thế giới hay không. Công cụ đặc biệt hữu ích khi kiểm tra tuân thủ tiêu chuẩn tiếp cận WCAG.

Protanopia

~1%

Mù màu đỏ. Thiếu tế bào nón bước sóng dài (L).

Deuteranopia

~1%

Mù màu lục. Thiếu tế bào nón bước sóng trung (M).

Tritanopia

<0.01%

Mù màu lam. Thiếu tế bào nón bước sóng ngắn (S).

Achromatopsia

<0.003%

Mù màu hoàn toàn. Chỉ nhìn thấy các sắc xám.

Trình mô phỏng dùng để làm gì

Trình mô phỏng sắc giác là một công cụ thiết kế, không phải công cụ chẩn đoán. Bạn đưa cho nó một ảnh; nó trả về xấp xỉ về việc những phân biệt màu nào sống sót qua một khiếm khuyết nhất định và những phân biệt nào sụp đổ. Giá trị nằm ở những cái sụp đổ. Nếu hai thứ trong giao diện của bạn mang ý nghĩa khác nhau mà mô phỏng lại hiển thị chúng cùng một màu, bạn vừa tìm ra một khiếm khuyết ảnh hưởng tới một phần đáng kể người dùng.

Cũng cần nói rõ kết quả ấy không phải là gì. Nó không phải cửa sổ nhìn vào trải nghiệm chủ quan của ai cả. Người có deuteranomaly bẩm sinh đã nhìn thế giới như vậy từ lúc sinh; nhận thức màu của họ hoàn toàn bình thường với chính họ, và ở vài bài phân biệt họ còn làm tốt hơn người tam sắc. Trình bày mô phỏng như thứ mà họ nhìn thấy là không chính xác, và khi nó đóng khung tình trạng này thành sự thiếu hụt thì còn vô ích nữa.

Điều mô phỏng thật sự cho bạn biết là thiết kế của bạn phụ thuộc ở đâu vào thông tin mà một thiểu số đáng kể người xem không nhận được. Đó là một dữ kiện kỹ thuật có thể hành động được.

Mô hình đằng sau phép biến đổi

Các trình mô phỏng đơn giản làm sụp ảnh xuống đường thẳng gồm những màu mà người lưỡng sắc phân biệt được. Điều đó đủ cho lưỡng sắc nhưng sai với tam sắc bất thường vốn phổ biến hơn nhiều, nơi tế bào nón bị ảnh hưởng vẫn tồn tại với độ nhạy phổ bị dịch và thông tin màu bị nén chứ không bị xóa.

Trình mô phỏng này theo cách tiếp cận dựa trên sinh lý của Machado, Oliveira và Fernandes, mô hình hóa trực tiếp độ dịch của độ nhạy tế bào nón. Vì độ dịch là một tham số liên tục nên cùng một mô hình bao trọn dải từ sắc giác bình thường qua bất thường nhẹ tới lưỡng sắc hoàn toàn, thay vì coi chúng là những trường hợp rời rạc.

Hiểu sự phân biệt này sẽ thay đổi cách bạn thiết kế. Deuteranopia, khi tế bào nón bước sóng trung vắng mặt, là trường hợp ngặt. Deuteranomaly, khi tế bào nón ấy có nhưng bị dịch, là trường hợp phổ biến, ảnh hưởng nhiều người hơn hẳn và tạo ra những hỏng hóc tinh vi hơn: những màu về kỹ thuật vẫn phân biệt được nhưng không còn tách ra trong một cái liếc mắt trên biểu đồ dày đặc hay trên một phần tử giao diện nhỏ.

Dùng kết quả cho tốt

Hãy nạp một ảnh thật sự truyền tải ý nghĩa qua màu: một bảng điều khiển, một biểu đồ có chú giải mã màu, một bản đồ, một biểu mẫu có trạng thái lỗi màu đỏ, một sơ đồ chỉ dẫn. So từng mô phỏng với ảnh gốc và đặt cho mỗi phân biệt bằng mã màu đúng một câu hỏi: điều này còn nói với người xem thứ họ cần biết không?

Những hỏng hóc thường gặp đáng tìm:

  • Đèn báo trạng thái đỏ và lục biến thành cùng một sắc xỉn. Đây là khiếm khuyết khả dụng phổ biến nhất trong phần mềm.
  • Bảng màu phân loại trên biểu đồ khi các chuỗi liền kề hòa vào nhau, nhất là những bảng màu định tính chọn theo sự đa dạng thẩm mỹ chứ không theo tách biệt tri giác.
  • Bản đồ nhiệt tuần tự đi qua đỏ và lục rồi mất thứ tự.
  • Liên kết chỉ khác chữ thường bằng màu, biến mất hoàn toàn.
  • Trường bắt buộc và trạng thái lỗi chỉ được thể hiện bằng viền đỏ.

Cách sửa gần như không bao giờ là dùng màu khác. Cách sửa là thêm một manh mối thứ hai không dựa vào màu: nhãn chữ, biểu tượng, hình dạng, hoa văn tô, vị trí, gạch chân. Khi đó màu trở thành sự củng cố ý nghĩa chứ không phải vật mang duy nhất, và đó chính là điều mà tiêu chí sử dụng màu sắc của WCAG yêu cầu.

Chỗ mô phỏng thôi còn đáng tin

Phép biến đổi áp lên các giá trị sRGB trong ảnh của bạn, nên độ chính xác của nó bị giới hạn bởi mức độ trung thực mà màn hình tái tạo sRGB và bởi việc ảnh gốc có được tạo trong không gian ấy hay không. Tư liệu gam màu rộng, nội dung HDR và các quy trình quản lý màu nặng đều sẽ làm lệch kết quả.

Mô hình này cũng mô tả các khiếm khuyết bẩm sinh. Mất sắc giác mắc phải, do glôcôm, bệnh võng mạc đái tháo đường, bệnh thần kinh thị giác, đục thủy tinh thể hay thuốc, thường hành xử khác, hay ảnh hưởng hai mắt không đều và thường đi kèm giảm thị lực hoặc giảm độ nhạy tương phản mà không phép biến đổi màu nào nắm bắt được.

Cuối cùng, hãy nhớ mô phỏng chỉ là một lăng kính. Nó cho biết những sắc độ nào hòa vào nhau; nó không nói gì về việc chữ của bạn có đủ tương phản độ chói để đọc được hay không. Hãy dùng kèm trình kiểm tra tương phản.

Để có hướng dẫn rộng hơn, xem thiết kế cho người mù màu và làm biểu đồ dễ tiếp cận.

Bạn có thắc mắc?

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

Mọi điều bạn cần biết về các bài test mù màu, cách chúng hoạt động và nên làm gì với kết quả.

Người mù màu thực sự nhìn thấy như thế này sao?

Không, và không trình mô phỏng nào làm được điều đó. Mô phỏng dựng trên màn hình dành cho mắt bình thường của bạn một xấp xỉ về phần thông tin còn sống sót qua một khiếm khuyết. Nó không tái tạo được trải nghiệm chủ quan. Người sinh ra đã có khiếm khuyết chưa từng biết phương án khác, nên màu sắc của họ đơn giản là bình thường với họ; họ không cảm nhận thế giới của mình như một bản bạc màu của thế giới bạn. Hãy dùng kết quả để tìm chỗ thiết kế của bạn đánh mất thông tin, chứ không phải để hình dung trải nghiệm của người khác.

Mô phỏng dùng mô hình nào?

Nó theo cách tiếp cận dựa trên sinh lý do Machado, Oliveira và Fernandes mô tả, mô hình hóa độ nhạy phổ bị dịch của tế bào nón bị ảnh hưởng thay vì chỉ chiếu màu lên một đường thẳng. Sự phân biệt đó quan trọng với tam sắc bất thường, tức protanomaly và deuteranomaly, khi tế bào nón vẫn có nhưng bị dịch và mức nặng biến thiên liên tục.

Vì sao lưỡng sắc và tam sắc bất thường trông khác nhau đến vậy?

Vì đó là hai tình trạng khác nhau. Ở lưỡng sắc, một lớp tế bào nón vắng mặt hoàn toàn nên thông tin màu trên trục đó thật sự biến mất và mô phỏng làm nó sụp xuống. Ở tam sắc bất thường, tế bào nón vẫn tồn tại với đỉnh bị dịch nên thông tin bị nén chứ không mất. Tam sắc bất thường phổ biến hơn nhiều, vì thế chỉ thiết kế theo mô phỏng lưỡng sắc sẽ phóng đại vấn đề ở chỗ này và xem nhẹ ở chỗ khác.

Biểu đồ của tôi trong mô phỏng vẫn đọc được. Vậy là xong chưa?

Chưa hẳn. Mô phỏng kiểm tra các sắc độ còn phân biệt được hay không, nhưng không kiểm tra tỉ lệ tương phản và không bắt được những trường hợp màu là manh mối duy nhất mang ý nghĩa. Hãy chạy thêm trình kiểm tra tương phản và xác nhận rằng mọi phân biệt bằng mã màu đều có manh mối thứ hai như nhãn chữ, hoa văn, hình dạng hay vị trí.

Trình mô phỏng có tải ảnh của tôi lên không?

Không. Phép biến đổi chạy hoàn toàn trong trình duyệt của bạn bằng phần tử canvas. Ảnh không bao giờ rời thiết bị của bạn và không bao giờ được gửi tới máy chủ.

Tôi nên thiết kế theo loại nào?

Hãy kiểm tra deuteranomaly trước, vì khiếm khuyết deutan phổ biến hơn hẳn, rồi tới deuteranopia như trường hợp ngặt hơn. Thêm tritanopia nếu bảng màu của bạn dựa vào phân biệt lam vàng. Một thiết kế sống sót qua deuteranopia và tritanopia mà vẫn giữ nguyên ý nghĩa thì thường cũng sống sót ở các dạng nhẹ hơn.

Vẫn còn thắc mắc? Liên hệ với chúng tôi →