Softonic

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

Bước 1 / 3 Loại mô phỏng

Khoảng 8% nam giới và 0,5% phụ nữ có một dạng suy giảm thị giác màu, phổ biến nhất là đỏ-xanh lá. Tải lên thiết kế, ảnh chụp màn hình hoặc hình minh họa, chọn một chế độ mô phỏng rồi so sánh ảnh gốc với kết quả mô phỏng cạnh nhau. Hữu ích để kiểm tra xem biểu đồ, bản đồ hoặc giao diện còn dễ hiểu khi không chỉ dựa vào màu sắc hay không.

Trình mô phỏng hoạt động như thế nào

  1. 1

    Thả vào một hình ảnh

    PNG, JPG, WebP hoặc SVG. Được xử lý trong trình duyệt - không có gì được tải lên.

  2. 2

    Chọn chế độ mô phỏng

    Chọn protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia hoặc achromatomaly.

  3. 3

    Xem trước song song

    Trình duyệt áp dụng phép biến đổi ma trận và hiển thị ảnh gốc cạnh mô phỏng đã chọn.

  4. 4

    Xuất ảnh mô phỏng

    Tải mô phỏng đã chọn dưới dạng PNG hoặc chụp ảnh màn hình phần so sánh để đánh giá thiết kế.

Các dạng suy giảm thị lực màu sắc

Tình trạng Tỷ lệ Đặc trưng
Deuteranomaly ~5% nam giới Dị thường màu đỏ-lục, hình nón M dịch chuyển
Protanomaly ~1% nam giới Dị thường màu đỏ-lục, hình nón chữ L dịch chuyển
Deuteranopia ~1% nam giới Không có hình nón M - khó phân biệt được màu đỏ-xanh
Protanopia ~1% nam giới L-cone vắng mặt - nhận thức về màu đỏ đã thay đổi
Tritanopia rất hiếm Không có hình nón chữ S - trục màu xanh-vàng sụp đổ
Tritanomaly rất hiếm Hình nón chữ S dịch chuyển - mất màu xanh-vàng nhẹ
Achromatopsia cực kỳ hiếm Mù màu hoàn toàn, chỉ có thang độ xám

Hầu hết nhà thiết kế bắt đầu với deuteranopia và protanopia vì suy giảm đỏ-xanh lá là phổ biến nhất, rồi thêm các chế độ dị thường và xanh dương-vàng để kiểm tra rộng hơn.

Ý nghĩa thiết kế

  • Đừng chỉ dựa vào màu đỏ/xanh lục để phân biệt trạng thái. Ngoài màu sắc, các chỉ báo lỗi/thành công cần có hình dạng, biểu tượng hoặc nhãn văn bản. Dấu X màu đỏ và dấu kiểm màu xanh lá cây có sự khác biệt rõ ràng; vòng tròn màu đỏ và màu xanh lá cây thì không.
  • Biểu đồ: sử dụng các mẫu tô màu, nhãn trực tiếp hoặc các bảng màu riêng biệt theo cảm nhận (ColorBrewer, Viridis). Tránh bảng màu đèn giao thông để trực quan hóa dữ liệu.
  • Bản đồ: đường viền và đường gạch để phân biệt các vùng; màu sắc một mình thất bại.
  • Siêu liên kết: không bao giờ chỉ được tạo kiểu theo màu sắc. Những đường gạch chân hoặc độ đậm giúp ích cho mọi người, kể cả những người có thị lực màu sắc bình thường.
  • Các trường biểu mẫu bắt buộc: dấu hoa thị màu đỏ cùng với nhãn “Bắt buộc” hoặc đường viền màu đỏ cùng với văn bản trợ giúp “Bắt buộc”.
  • Chỉ báo trạng thái: đèn giao thông màu đỏ/hổ phách/xanh đóng vai trò tăng cường, không bao giờ là tín hiệu duy nhất.

Lựa chọn bảng màu tốt cho thiết kế an toàn về màu sắc

  • Viridis (được sử dụng theo mặc định trong matplotlib, D3): từ tím đến vàng, đồng nhất về mặt nhận thức.
  • ColorBrewer định tính: 8 màu riêng biệt được thiết kế để duy trì khả năng phân biệt ở các dạng CVD thông thường.
  • Okabe-Ito: Bảng màu 8 màu được thiết kế đặc biệt dành cho người mù màu.

Công cụ và thử nghiệm

  • Xem trước trình mô phỏng (công cụ này), kiểm tra trực quan nhanh chóng.
  • Trình kiểm tra độ tương phản WCAG, đảm bảo văn bản vẫn có thể đọc được bất kể cảm nhận về màu sắc.
  • Thử nghiệm trên người dùng thực, không có gì thay thế được việc hiển thị thiết kế của bạn cho người dùng mù màu thực tế.

Sự thật thú vị

Các trình mô phỏng thị giác màu hiện đại dùng phép xấp xỉ ma trận để ánh xạ phản hồi của tế bào nón sang RGB. Hãy xem bản xem trước như một kiểm tra thiết kế thực tế, không phải chẩn đoán y khoa hay bản sao chính xác nhận thức của một người cụ thể.

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

Đây là phép xấp xỉ hữu ích, nhưng cảm nhận màu thật khác nhau giữa từng người. Hầu hết suy giảm đỏ-xanh lá nằm trên phổ từ nhẹ đến nặng, vì vậy hãy dùng bản xem trước như tín hiệu thiết kế chứ không phải chẩn đoán.

Deuteranomaly bao gồm phần lớn người dùng mù màu nhất (~5% nam giới). Thử nghiệm đối với deuteranopia (dạng nghiêm trọng) là một kiểm tra thận trọng - nếu một thiết kế hoạt động ở đó thì nó cũng hoạt động đối với dị thường nhẹ hơn.

Có, mặc dù ít thường xuyên hơn (~0,5%). Thiếu màu đỏ-xanh là bệnh lặn liên kết với X, vì vậy nam giới (XY) chỉ cần một X bị ảnh hưởng; phụ nữ (XX) cần cả hai. Tritanopia là nhiễm sắc thể thường và ảnh hưởng đến giới tính như nhau.

Không trực tiếp có trong công cụ này, đó là mô phỏng chung cho tầm nhìn kém, cũng liên quan đến việc giảm độ mờ và độ tương phản. Để mô phỏng đầy đủ khả năng truy cập, các công cụ chuyên dụng như Lighthouse của Chrome hoặc NoCoffee sẽ hỗ trợ những công cụ đó.

Công cụ liên quan

Bộ chọn màu Material Design

Duyệt bảng màu Material Design. Sao chép bất kỳ sắc độ nào (từ 50 đến A700) dưới dạng HEX, RGB hoặc HSL chỉ với một thao tác chạm.

Công cụ tăng độ phân giải ảnh

Phóng to ảnh độ phân giải thấp lên 2×, 3× hoặc 4× bằng siêu phân giải AI hoặc nội suy cổ điển, đồng thời giữ các chi tiết quan trọng.

Trình thay đổi kích thước ảnh hàng loạt

Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.

Trình tạo chữ graffiti

Tạo chữ graffiti theo kiểu tag, bong bóng, khối, stencil, neon và wild. Chỉnh màu rồi xuất PNG hoặc SVG ngay trong trình duyệt.

Trình tạo thẻ tên

Tạo tối đa 60 thẻ tên có thể in từ danh sách Tên | dòng thứ hai. Chọn 8 thẻ hoặc 15 nhãn trên mỗi trang A4 hay US Letter rồi in ngay trên thiết bị của bạn.

Nén GIF

Giảm kích thước GIF động trong trình duyệt bằng cách thu nhỏ kích thước, giữ ít khung hình hơn và chỉnh chất lượng mã hóa. Xem trước vòng lặp trước khi tải xuống.