Cách dùng Mô phỏng mù màu
- Kéo thả ảnh, nhấp để chọn ảnh, hoặc dán ảnh chụp màn hình bằng Ctrl+V.
- So sánh ảnh gốc với các phiên bản mô phỏng cho từng kiểu suy giảm thị giác màu.
- Tìm những thông tin bị mất đi, ví dụ màu trạng thái đỏ/xanh lá, các chuỗi trong biểu đồ hoặc trạng thái lỗi.
- Chuyển sang Bảng màu để kiểm tra màu thương hiệu hoặc màu biểu đồ, và nhận cảnh báo với các cặp màu khó phân biệt.
Mù màu là gì?
Suy giảm thị giác màu (CVD) ảnh hưởng khoảng 1 trên 12 nam giới và 1 trên 200 nữ giới gốc Bắc Âu. Hầu hết người bị CVD vẫn nhìn thấy màu sắc, chỉ là phạm vi màu hẹp hơn. Các kiểu phổ biến gồm:
| Loại | Tế bào nón bị ảnh hưởng | Biểu hiện |
|---|---|---|
| Deuteranomaly / deuteranopia | Xanh lá (M) | Khó phân biệt đỏ và xanh lá, là dạng phổ biến nhất |
| Protanomaly / protanopia | Đỏ (L) | Màu đỏ trông tối hơn và dễ lẫn với xanh lá và nâu |
| Tritanomaly / tritanopia | Xanh dương (S) | Nhầm lẫn giữa xanh dương/xanh lục và vàng/hồng, hiếm gặp |
| Achromatopsia | Tất cả | Không nhận biết màu sắc, rất hiếm, nhưng là bài kiểm tra thang xám hữu ích |
“-anopia” nghĩa là thiếu một loại tế bào nón; “-anomaly” nghĩa là loại tế bào nón bị lệch, một dạng nhẹ hơn.
Cách hoạt động của mô phỏng
Mỗi pixel được chuyển sang RGB tuyến tính và nhân với các ma trận thị giác màu từ Machado, Oliveira và Fernandes (2009), một mô hình sinh lý được sử dụng rộng rãi. Mức độ đầy đủ áp dụng cho các kiểu “-anopia” và mức 60% cho các kiểu “-anomaly”. Achromatopsia sử dụng độ sáng tương đối. Mọi thứ chạy trên canvas trong trình duyệt của bạn; ảnh lớn sẽ được thu nhỏ về chiều rộng 900px để xử lý nhanh hơn.
Thiết kế cho người mù màu
- Đừng chỉ dựa vào màu sắc (WCAG 1.4.1): thêm biểu tượng, nhãn, họa tiết hoặc chữ vào thông báo trạng thái, lỗi biểu mẫu và chuỗi biểu đồ.
- Thay đổi độ sáng, không chỉ sắc độ: xanh lá đậm và đỏ nhạt vẫn dễ phân biệt với hầu hết mọi người. Bộ chuyển đổi OKLCH giúp bạn dễ dàng kiểm soát độ sáng.
- Dùng bảng màu biểu đồ thân thiện với người mù màu, chẳng hạn xanh dương/cam thay vì đỏ/xanh lá.
- Giữ độ tương phản chữ cao, kiểm tra các cặp màu bằng Contrast Checker.
Mô phỏng chỉ xấp xỉ trải nghiệm trung bình; cách mỗi người cảm nhận màu khác nhau, nên kiểm thử với người dùng thật vẫn rất có giá trị.
Cũng được tìm dưới tên: mù màu, kiểm tra mù màu, protanopia, deuteranopia, tritanopia, colorblind test, khả năng truy cập.
Các công cụ dùng kèm tốt với Mô phỏng mù màu
- Kiểm tra độ tương phản APCA — Tính độ tương phản độ sáng APCA (Lc) giữa chữ và nền, xem chúng phù hợp với những trường hợp nào, và so sánh với tỷ lệ WCAG 2 truyền thống.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
- Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.