🎨 Nhiều Tester làm việc trong lĩnh vực phát triển phần mềm cả chục năm vẫn chưa từng nghĩ nghiêm túc về mù màu (color blindness), tuy nó ảnh hưởng trực tiếp đến chất lượng sản phẩm. Đa số người bị mù màu không biết mình bị, vì họ nghĩ cách nhìn của mình là bình thường. Vì thế, khi gặp khó khăn trong việc sử dụng phần mềm của chúng ta họ nghĩ rằng phần mềm của chúng ta “khó sử dụng.” Tester nên nhớ rằng người dùng không phàn nàn không có nghĩa là họ không gặp khó khăn.
Mù màu là gì?
Rối loạn sắc giác (Color Vision Deficiency – CVD) hay thường được gọi chung là “mù màu” không phải là “chỉ thấy trắng đen” như nhiều người lầm tưởng. Phần lớn người bị mù màu vẫn nhìn thấy màu, nhưng:
- Khó phân biệt một số màu nhất định
- Nhìn màu khác với người bình thường
- Dễ nhầm các màu có độ tương phản thấp
Thống kê phổ biến trên thế giới cho thấy nam giới thường bị mù màu nhiều hơn nữ giới:
- ~0.5% nữ giới
- ~8% nam giới
👉 Nghĩa là cứ 12 người dùng nam thì có thể có 1 người gặp vấn đề về màu sắc.
Các dạng mù màu thường gặp
| Loại | Khó phân biệt | Ví dụ thực tế |
| Deuteranopia (phổ biến nhất) | Đỏ – Xanh lá | Nút đỏ và xanh trông gần giống nhau |
| Protanopia | Đỏ | Màu đỏ bị tối, gần như nâu/xám |
| Tritanopia (hiếm) | Xanh dương – Vàng | Biểu đồ màu sẽ bị nhìn sai hoàn toàn |
Kiểm tra bạn có bị mù màu không: Bài kiểm tra mù màu
Tại sao đây là vấn đề lớn với sản phẩm phần mềm?
Rất nhiều hệ thống đang mắc lỗi kiểu này do chỉ dùng màu để truyền đạt thông tin, ví dụ:
- 🟢 Màu xanh = thành công
- 🟡 Màu vàng = cảnh báo
- 🔴 Màu đỏ = lỗi
Với người bình thường, điều này giúp hiển thị mọi thứ rõ ràng giúp nhận diện nhanh. Nhưng với người mù màu, các thông tin trên màn hình có thể trở thành ba màu giống nhau. Dẫn đến hậu quả, khi sử dụng phần mềm đó, người bị mù màu sẽ:
- Không biết thông tin đang hiển thị là lỗi hay thành công. Dễ bị nhầm trạng thái đơn hàng
- Hiểu sai báo cáo, các biểu đồ, hay bảng điều khiển (dashboard)
- Gặp khó khăn khi sử dụng các hệ thống tài chính, y tế, giao thông, v.v…
Vì vậy, đây không còn là “giao diện đẹp hay xấu” mà là tính khả dụng (usability) và khả năng truy cập (accessibility) tốt hay không.
Mù màu ảnh hưởng đến Tester như thế nào?
Có thể bỏ sót bug UX
Nếu Tester nhìn màu bình thường thấy rõ sự khác biệt giữa các thông tin với màu sắc, nên cho rằng giao diện (UI) ổn. Nhưng với người dùng mù màu, họ không phân biệt được. Lỗi này không phải do lập trình sai, mà nằm ở trải nghiệm người dùng.
Có thể chính là người bị mù màu
Nếu Tester bị mù màu mà chính họ không biết, có thể dẫn đến một số vấn đề trong quá trình kiểm thử bên dưới làm cho Tester không phát hiện rằng chất lượng phần mềm (về khía cạnh tính khả dụng) đang không được tốt:
- Không nhận ra UI dùng màu sai
- Không phát hiện sự thiếu tương phản
- Không thấy icon bị lỗi quá “chìm” (màu của icon và màu nền rất giống nhau)
Để cải thiện chung cho vấn đề này, Tester cùng với nhóm phát triển phần mềm cần thay đổi tư duy chất lượng của mình. Nên nhớ rằng chất lượng không chỉ là làm đúng theo yêu cầu, phần mềm không bị tắt đột ngột (crash), chức năng chạy đúng (không sai logic). Mà Tester còn phải đặt câu hỏi như “Người dùng khác mình có sử dụng được phần mềm của mình không?”
3 công cụ kiểm tra mù màu dành cho Tester
Chrome DevTools (có sẵn trên trình duyệt)
Các bước thực hiện
- Mở DevTools (F12)
- Click ‘More tools’ trong DevTools → click ‘Rendering’
- Chọn các chế độ giả lập ở mục ‘Emulate vision deficiencies’
(Blurred vision/ Protanopia/ Deuteranopia/ Tritanopia) - Và, kiểm thử trực tiếp ứng dụng như người mù màu nhìn thấy.
Kết quả chọn mô phỏng không màu đỏ: hình ảnh trở nên vàng nhạt.
Công cụ mô phỏng màu
| Công cụ | Dùng để làm gì |
| Color Oracle (Windows/Mac/Linux) | Mô phỏng toàn bộ màn hình |
| Stark (plugin Figma/XD) | Kiểm tra contrast & mù màu trong thiết kế |
| Coblis – Color Blindness Simulator (web) | Upload ảnh UI để kiểm tra |
Công cụ kiểm tra độ tương phản (contrast)
Một số công cụ dùng để kiểm tra độ tương phản:
- WebAIM Contrast Checker
- Lighthouse (trên Chrome >> DevTools)
Ghi chú: Chuẩn WCAG yêu cầu độ tương phản của chữ trên ứng dụng web như sau
| Nội dung | Độ tương phản tối thiểu |
| Text thường | 4.5 : 1 |
| Text lớn | 3 : 1 |
Một số lưu lỗi UI Tester nên chú ý
Dưới đây là một số lỗi UI thường gặp. Tester nên chú ý trong quá trình kiểm thử sẽ giúp phát hiện những lỗi này sớm hơn, thậm chí là ngay trong giai đoạn thảo luận yêu cầu:
- Chỉ đổi màu viền text field sang đỏ mà không hiển thị kèm câu thông báo lỗi
- Các thông tin trên biểu đồ chỉ phân biệt bằng màu (nên có thêm nhãn/label, giá trị)
- Thông tin hiển thị trạng thái chỉ có chấm màu như 🔴, 🟢(nên kèm theo nhãn)
- Text màu xám nhạt trên nền trắng (nên sử dụng màu đen hoặc màu đậm để tăng độ tương phản
- Liên kết không có gạch chân, chỉ khác màu (nên có gạch chân và kèm chú thích nổi (tooltip) khi rê chuột qua (hover).
Để cải thiện vấn đề này, Tester nên:
- Không dùng màu làm yếu tố duy nhất → Thêm icon, text, pattern
- Kiểm tra độ tương phản (sử dụng các công cụ ở phần trên)
- Test bằng công cụ giả lập mù màu
- Hỏi UI/UX designer: “Nếu người dùng không phân biệt được màu thì sao?”
Cuối cùng, mình muốn nhắn nhủ với tất cả Tester rằng, kiểm thử mù màu là một phần của tư duy chất lượng, và nó giúp đánh giá tính khả dụng (Usability) và khả năng truy cập (accessibility) mọi thông tin hạng mục trong hệ thống web của chúng ta.
Happy testing!
