Color Blindness Simulator - Mô Phỏng Mù Màu Online

Tính năng nổi bật

• Bốn chế độ mô phỏng gồm protanopia, deuteranopia, tritanopia và achromatopsia
• Xử lý từng điểm ảnh bằng ma trận biến đổi màu ba nhân ba ngay trên khung vẽ của trình duyệt
• Đặt ảnh gốc và ảnh mô phỏng cạnh nhau để so sánh trực tiếp
• Đổi chế độ rồi bấm áp dụng lại là xem được dạng khác trên cùng một ảnh
• Tải bản mô phỏng về dưới dạng PNG, tên tệp ghi sẵn dạng mù màu đã chọn
• Nút đổi ảnh để thử nhanh nhiều thiết kế liên tiếp
• Nhận mọi định dạng ảnh mà trình duyệt mở được, gồm cả PNG có nền trong suốt
• Ảnh không được tải lên máy chủ, toàn bộ phép tính chạy trong tab của bạn

Người thiết kế không nhìn thấy vấn đề mà người dùng gặp phải

Rối loạn sắc giác phổ biến hơn nhiều người nghĩ. Con số thường được trích dẫn là khoảng một trong mười hai nam giới và một trong hai trăm nữ giới gặp dạng khó phân biệt đỏ và lục ở mức độ nào đó. Với một website có mười nghìn lượt truy cập mỗi tháng, đó là vài trăm người mỗi tháng nhìn giao diện của bạn theo cách khác hẳn cách bạn nhìn. Vấn đề là người thiết kế gần như không bao giờ tự phát hiện ra, vì họ nhìn thấy đủ màu và mọi thứ trông rất rõ ràng. Chỉ khi đặt bản gốc cạnh bản mô phỏng thì mới lộ ra những chỗ như hai đường trong biểu đồ trở nên trùng màu, nhãn còn hàng và hết hàng thành cùng một sắc, hay thông báo lỗi tô đỏ nhạt biến mất khỏi nền trắng. Đây là loại lỗi rất rẻ để sửa ở giai đoạn thiết kế và rất phiền khi phải sửa sau khi sản phẩm đã chạy.

Lợi ích khi sử dụng

• •Phát hiện sớm những cặp màu trở nên không phân biệt được với người thiếu một kênh màu
• •Có ảnh minh họa cụ thể để trao đổi với người thiết kế thay vì mô tả bằng lời
• •Kiểm tra được cả ảnh in, biểu đồ trong báo cáo hay ảnh chụp màn hình phần mềm
• •Không cần cài phần mềm hay tiện ích mở rộng, dùng ngay trong lúc đang thiết kế
• •Ảnh xử lý ngay trên máy nên yên tâm với bản thiết kế chưa công bố

Cách kiểm tra một thiết kế

1. 1Bấm vào khung tải lên và chọn ảnh chụp màn hình giao diện, biểu đồ hoặc ấn phẩm cần kiểm tra.
2. 2Chọn một trong bốn dạng mù màu ở khung phía trên, nên bắt đầu bằng deuteranopia vì đây là dạng thường gặp nhất.
3. 3Bấm nút áp dụng mô phỏng và chờ vài giây, ảnh lớn cần nhiều thời gian hơn vì phải tính từng điểm ảnh.
4. 4So sánh hai ảnh và tìm những chỗ thông tin biến mất: hai màu hóa giống nhau, chữ chìm vào nền, biểu tượng mất tương phản.
5. 5Đổi sang ba dạng còn lại rồi lặp lại, và tải bản mô phỏng về nếu bạn cần đính vào phản hồi thiết kế.

Bốn dạng thị giác mà công cụ mô phỏng

Mắt người bình thường có ba loại tế bào cảm nhận màu, nhạy nhất lần lượt với vùng ánh sáng bước sóng dài, trung bình và ngắn, tương ứng cảm giác đỏ, lục và lam. Protanopia là trường hợp thiếu loại nhạy với bước sóng dài, khiến màu đỏ trở nên tối và dễ lẫn với nâu hoặc đen, còn đỏ tươi có thể trông gần như xám. Deuteranopia là thiếu loại nhạy với bước sóng trung bình, đây là dạng phổ biến nhất trong nhóm khó phân biệt đỏ và lục; người gặp dạng này thấy đỏ và lục xích lại gần nhau thành các sắc vàng nâu na ná. Tritanopia là thiếu loại nhạy với bước sóng ngắn, hiếm hơn nhiều và không liên quan tới giới tính, biểu hiện là lam lẫn với lục còn vàng lẫn với hồng. Achromatopsia là trường hợp hiếm nhất, mất hoàn toàn cảm nhận màu và chỉ còn thấy các mức độ sáng tối; công cụ mô phỏng dạng này bằng cách quy ảnh về thang xám theo trọng số độ sáng của ba kênh màu.

Đây là mô phỏng xấp xỉ, không phải mô tả chính xác thị giác của ai đó

Cần rõ ràng về mức độ chính xác. Phép biến đổi ở đây nhân mỗi điểm ảnh với một ma trận ba nhân ba, kiểu tiếp cận nhanh và cho ra hình ảnh đủ để nhận diện vấn đề, nhưng các mô hình khoa học chuẩn còn đòi thêm một bước quan trọng là chuyển giá trị màu từ thang mã hóa của màn hình về thang tuyến tính rồi mới nhân ma trận, sau đó mới mã hóa ngược lại. Bỏ qua bước đó khiến kết quả lệch ở vùng tối và vùng bão hòa cao. Ngoài ra, ma trận chỉ mô phỏng trường hợp mất hẳn một loại tế bào, trong khi đa số người có rối loạn sắc giác thuộc dạng nhẹ hơn, tức vẫn còn cả ba loại tế bào nhưng một loại lệch độ nhạy; những người này phân biệt được nhiều màu hơn hình ảnh mô phỏng cho thấy. Cuối cùng, không có hai người mù màu nào nhìn giống hệt nhau. Hãy dùng kết quả như một cảnh báo về chỗ có rủi ro, không phải như bằng chứng chính xác về trải nghiệm của một người cụ thể.

Nguyên tắc thiết kế quan trọng hơn việc chọn màu nào

Bộ hướng dẫn về khả năng tiếp cận nội dung web nêu một nguyên tắc gọn: màu sắc không được là phương tiện duy nhất để truyền đạt thông tin, chỉ ra một hành động hay phân biệt một thành phần. Nghĩa là thay vì đi tìm bảng màu an toàn tuyệt đối, hãy thêm một tín hiệu thứ hai bên cạnh màu. Trong biểu đồ đường, hãy đổi kiểu nét cho từng đường và ghi nhãn trực tiếp lên đầu đường thay vì để chú giải màu ở góc. Trong biểu đồ cột, hãy dùng họa tiết gạch chéo hoặc chấm khác nhau. Với trạng thái đúng sai, hãy kèm biểu tượng dấu tích và dấu chéo bên cạnh màu lục và màu đỏ. Với trường nhập liệu bị lỗi, đừng chỉ tô viền đỏ mà hãy thêm dòng chữ mô tả lỗi. Với liên kết trong đoạn văn, giữ gạch chân thay vì chỉ đổi màu chữ. Ngoài ra hãy giữ tỷ lệ tương phản tối thiểu bốn phẩy năm trên một cho chữ thường và ba trên một cho chữ cỡ lớn hoặc cho thành phần giao diện, vì tương phản độ sáng vẫn đọc được với mọi dạng rối loạn sắc giác.

Những cặp màu hay gây rắc rối nhất

Cặp đầu tiên và kinh điển là đỏ với lục, đặc biệt khi hai màu có độ sáng gần nhau; đây là lý do đèn báo trạng thái đỏ lục trên bảng điều khiển là thiết kế tệ nếu không kèm hình dạng khác nhau. Cặp thứ hai là lục với nâu, rất hay xuất hiện trên bản đồ địa hình và biểu đồ nhiệt. Cặp thứ ba là lam với tím, dễ lẫn với người gặp dạng tritanopia. Cặp thứ tư là hồng nhạt với xám, thường thấy ở nền bảng biểu xen kẽ. Cặp thứ năm là đỏ sẫm với đen, gần như không phân biệt được với dạng protanopia vì đỏ bị nhìn thành tối hơn nhiều so với bình thường. Trong bảng màu thương hiệu, một cách xử lý hiệu quả là giữ khác biệt lớn về độ sáng giữa các màu chính, chứ không chỉ khác biệt về sắc độ. Cách kiểm tra nhanh nhất mà không cần công cụ nào là chuyển bản thiết kế sang thang xám: nếu ở thang xám mà hai thành phần vẫn tách bạch rõ ràng thì gần như chắc chắn chúng cũng tách bạch với mọi dạng rối loạn sắc giác.

Giới hạn của công cụ và cách bổ sung

Công cụ chỉ xử lý ảnh tĩnh, nên nó kiểm tra được một khung hình chứ không kiểm tra được cả một luồng thao tác trên website hay ứng dụng. Với trang web đang chạy, trình duyệt phổ biến hiện nay có sẵn phần mô phỏng khiếm khuyết thị giác trong công cụ dành cho nhà phát triển, cho phép bạn duyệt cả trang dưới chế độ mô phỏng và tương tác bình thường; đó là cách kiểm tra tốt hơn cho giao diện động. Về mặt kỹ thuật, ảnh có kích thước lớn sẽ khiến trình duyệt đứng vài giây vì mỗi điểm ảnh đều phải qua chín phép nhân, nên với ảnh nhiều triệu điểm ảnh hãy thu nhỏ trước. Bản mô phỏng luôn được xuất ra định dạng PNG, nên nếu ảnh gốc là JPEG dung lượng lớn thì tệp tải về sẽ nặng hơn bản gốc khá nhiều. Cuối cùng, ảnh có nền trong suốt vẫn giữ được vùng trong suốt vì phép biến đổi chỉ chạm ba kênh màu và không đụng tới kênh độ mờ.

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

Từ khóa liên quan

• mô phỏng mù màu
• kiểm tra thiết kế cho người mù màu
• color blindness simulator
• protanopia deuteranopia tritanopia
• mù màu đỏ lục
• mù màu là gì
• thiết kế thân thiện người mù màu
• bảng màu an toàn cho người mù màu
• wcag màu sắc
• tỷ lệ tương phản màu wcag
• accessibility thiết kế web
• biểu đồ cho người mù màu
• kiểm tra tương phản màu
• chuyển ảnh sang thang xám kiểm tra
• achromatopsia mất cảm nhận màu
• màu đỏ và xanh lá khó phân biệt
• thiết kế giao diện dễ tiếp cận
• kiểm tra ảnh mù màu online
• mô phỏng khiếm khuyết thị giác
• công cụ kiểm tra accessibility miễn phí