Bỏ qua tới nội dung
Toolbench

Mô phỏng mù màu

Hai màu, nhìn theo bốn cách khác — vì vấn đề không phải thiết kế xấu đi, mà là hai ý nghĩa biến thành một màu.

Chạy hoàn toàn trong trình duyệt của bạn

Đang tải công cụ...

Cách sử dụng

  1. Nhập hai màu mang ý nghĩa khác nhau trong thiết kế của bạn.
  2. Đọc lần lượt từng dòng: mỗi dòng là cùng cặp màu đó dưới một dạng thị giác.
  3. Dòng nào bị đánh dấu khó phân biệt thì cần thêm tín hiệu thứ hai — nhãn chữ, biểu tượng, hình dạng.
  4. Làm lại với mọi cặp màu mang ý nghĩa, không chỉ với màu thương hiệu.

Tính năng

  • Mô phỏng protanopia, deuteranopia, tritanopia và mất màu hoàn toàn.
  • Báo cả độ tương phản giữa hai màu ở từng dạng, không chỉ hiển thị hình.
  • Cảnh báo khi cặp màu gộp lại thành một.
  • Phép biến đổi thực hiện trong không gian RGB tuyến tính, nơi công thức thực sự có nghĩa.
  • Chạy hoàn toàn trong trình duyệt.

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

Rốt cuộc cần nhìn vào điều gì?
Không phải màu có đẹp không — mà là chúng có còn là hai màu hay không. Chấm trạng thái đỏ và lục là ví dụ kinh điển: với phần lớn người xem thì khác nhau rõ, còn với khoảng một trong mười hai nam giới bị mù màu đỏ–lục thì gần như giống hệt. Nếu một dòng bị đánh dấu, thiết kế cần thứ gì đó ngoài màu sắc để mang ý nghĩa ấy.
Mô phỏng chính xác tới đâu?
Đây là xấp xỉ, và nói thẳng là như vậy. Các ma trận này mô hình hóa ba dạng mù màu hoàn toàn — người thiếu hẳn một loại tế bào nón — trong khi phần lớn trường hợp thực tế là dạng lệch chứ không mất hẳn, và mức lệch khác nhau ở mỗi người. Cặp màu vượt qua được ở đây thì nhiều khả năng ổn; cặp màu trượt ở đây thì chắc chắn cần sửa.
Chỉ cần đủ tương phản là được chưa?
Với chữ trên nền thì tương phản là tiêu chuẩn, và công cụ có hiển thị. Với hai màu mang ý nghĩa khác nhau thì tương phản là điều kiện cần chứ chưa đủ: người mù màu có thể thấy hai chấm khác nhau về độ sáng mà vẫn không biết chấm nào là lỗi. Hãy thêm nhãn chữ hoặc hình dạng.

Dải màu đầy đủ từ một màu gốc, kèm màu chữ thực sự đạt độ tương phản trên từng bậc.

Chuyển đổi giữa hex, RGB và HSL, và kiểm tra hai màu có đọc được cùng nhau không.

Dựng gradient, xem trước toàn khung, rồi sao chép khai báo — vị trí điểm màu để CSS tự canh nếu bạn không đặt.

Mô phỏng mù màu — Kiểm tra một cặp màu