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

Xem hình ảnh của bạn qua đôi mắt của người bị khiếm khuyết thị giác màu. Chọn loại, xem trước và tải kết quả xuống. Mọi thứ chạy trong trình duyệt.

Cách Trình mô phỏng mù màu hoạt động

Công cụ mô phỏng mù màu áp dụng ma trận biến đổi màu lên ảnh của bạn để cho thấy nó trông như thế nào với người mắc chứng protanopia (mù đỏ), deuteranopia (mù xanh lá), tritanopia (mù xanh dương) hoặc achromatopsia (mù màu hoàn toàn). Các ma trận được áp dụng từng pixel bằng Canvas.getImageData() và Canvas.putImageData() trong trình duyệt. Không có dữ liệu ảnh nào được truyền đến máy chủ.

Các mô phỏng dựa trên các mô hình nhận thức đã được công bố từ nghiên cứu về rối loạn thị giác màu sắc. Chúng là xấp xỉ về cách hệ thống thị giác của người bị ảnh hưởng xử lý màu sắc, không phải là bản sao chính xác của trải nghiệm cá nhân, vốn thay đổi giữa mỗi người. Công cụ được thiết kế để giúp các nhà thiết kế và lập trình viên xác định vấn đề tương phản hoặc mã màu sẽ ảnh hưởng đến một tỷ lệ đáng kể khán giả của họ: khoảng 8% nam và 0,5% nữ có một dạng rối loạn thị giác màu sắc nào đó.

Tác giả: Bastien Sulyan

Cách sử dụng Trình mô phỏng mù màu, từng bước

Kéo thả ảnh vào khu vực tải lên hoặc nhấp để duyệt file.
Chọn loại rối loạn thị giác màu sắc từ menu: protanopia, deuteranopia, tritanopia hoặc achromatopsia.
Xem kết quả mô phỏng bên cạnh ảnh gốc trong bảng so sánh.
Chuyển đổi giữa các loại mô phỏng để so sánh cách mỗi tình trạng ảnh hưởng đến ảnh.
Dùng chế độ cạnh nhau để xác định các vùng mà chỉ màu sắc truyền đạt thông tin có thể bị mất.

Trường hợp sử dụng thường gặp

Nhà thiết kế UI kiểm tra xem chỉ báo trạng thái đỏ-xanh có phân biệt được với người dùng bị deuteranopia trước khi phát hành tính năng không.
Tác giả trực quan hóa dữ liệu xác minh rằng biểu đồ nhiều đường với chuỗi được mã hóa màu vẫn đọc được trong mô phỏng protanopia.
Nhà thiết kế thương hiệu đánh giá cách logo với màu gradient đọc dưới achromatopsia để đảm bảo nó giữ hình dạng và tương phản có thể nhận ra.
Nhà phát triển game kiểm tra xem các vùng bản đồ được mã hóa màu có phân biệt được với người chơi bị tritanopia không và thêm họa tiết để bổ sung mã màu.

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

Các mô phỏng mù màu có độ chính xác như thế nào?

Các mô phỏng áp dụng ma trận biến đổi nhận thức từ nghiên cứu đã công bố về rối loạn thị giác màu sắc. Chúng là xấp xỉ có cơ sở khoa học về các trường hợp điển hình của mỗi tình trạng. Trải nghiệm cá nhân thay đổi: mức độ khác nhau giữa những người có cùng chẩn đoán, và mô phỏng không thể tính đến các chiến lược bù trừ mà một số người dùng phát triển. Coi đầu ra là chỉ báo hữu ích, không phải kiểm tra dứt khoát.

Công cụ có bao gồm tất cả các loại mù màu không?

Bốn loại được bao gồm là các dạng rối loạn thị giác màu sắc phổ biến nhất và mù màu hoàn toàn. Các loại trichromacy bất thường (protanomaly, deuteranomaly, tritanomaly), đại diện cho thiếu hụt một phần, không được mô hình hóa riêng trong phiên bản hiện tại.

Ảnh của tôi có được phân tích trên máy chủ để tạo ra mô phỏng không?

Không. Biến đổi ma trận màu được tính toán cục bộ bằng Canvas.getImageData() để đọc mảng pixel và Canvas.putImageData() để ghi kết quả. Tất cả quá trình xử lý diễn ra trong tab trình duyệt và dữ liệu ảnh ở trên thiết bị của bạn.

Tôi có thể dùng công cụ này để kiểm tra tỉ lệ tương phản màu không?

Công cụ này cho thấy màu sắc trông như thế nào với người có rối loạn thị giác màu sắc nhưng không tính toán tỉ lệ tương phản WCAG theo số. Để kiểm tra tương phản theo số, dùng công cụ Color Converter, bao gồm trình kiểm tra tương phản WCAG.

Công cụ có hoạt động với ảnh chứa văn bản không?

Có. Phép biến đổi được áp dụng cho toàn bộ mảng pixel, bao gồm bất kỳ văn bản nào được kết xuất trong ảnh. Điều này cho phép bạn kiểm tra xem màu văn bản so với nền của nó có đọc được dưới mỗi tình trạng mô phỏng hay không.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh