Mô phỏng mù màu: xem thiết kế, biểu đồ qua mắt người mù màu
Mục lục
Cách xem thiết kế, biểu đồ, poster qua mắt người mù màu đỏ, lục, lam bằng công cụ Mô phỏng mù màu của ColorME. Kèm hai ví dụ thật có số đo tương phản trước và sau khi sửa, năm cách sửa, bảng màu Okabe-Ito cho người mù màu với mã HEX, và các giới hạn của mô phỏng.
Trả lời nhanh: để xem một thiết kế hay biểu đồ qua mắt người mù màu, mở công cụ Mô phỏng mù màu của ColorME, tải ảnh lên, chọn một trong bốn kiểu (Mù màu đỏ, Mù màu lục, Mù màu lam, Không thấy màu) rồi kéo thanh ở giữa để so ảnh gốc với ảnh mô phỏng. Nếu hai màu khác nhau ở bên trái mà giống nhau ở bên phải, người mù màu sẽ không phân biệt được chúng. Theo trang công cụ, việc này miễn phí và không cần đăng nhập. Còn nếu bạn đang tìm một bảng màu cho người mù màu, phần bảng màu Okabe-Ito bên dưới có sẵn tám mã màu.
Xem nhanh với biểu đồ mẫu có sẵn của công cụ: bên trái là mắt thường, bên phải đổi theo kiểu mù màu đang chọn. Ảnh chụp màn hình: ColorME.
Mù màu ảnh hưởng tới thiết kế như thế nào?
Người mù màu không nhìn thấy đen trắng như nhiều người vẫn nghĩ. Phần lớn họ thấy màu, nhưng một số cặp màu trở nên rất giống nhau. Theo Viện Mắt Quốc gia Hoa Kỳ (NEI), dạng phổ biến nhất khiến người ta khó phân biệt đỏ với lục, và khoảng 1 trên 12 nam giới có khiếm khuyết sắc giác (nguồn: NEI). Trang công cụ của ColorME ghi con số tương tự: khoảng 8% nam giới và 0,5% nữ giới.
Với người làm thiết kế, điều đó có nghĩa là cứ khoảng 12 nam giới xem thiết kế của bạn thì có một người có thể không đọc được biểu đồ chỉ phân biệt bằng đỏ và xanh lục. Bốn kiểu công cụ mô phỏng, kèm lời mô tả ghi ngay trong công cụ:
| Nút trong công cụ | Tên gọi | Công cụ mô tả |
|---|---|---|
| Mù màu đỏ | Protanopia | Khó phân biệt đỏ với lục, màu đỏ trông tối hơn. Khoảng 1% nam giới. |
| Mù màu lục | Deuteranopia | Dạng phổ biến nhất: đỏ, lục, cam, nâu dễ lẫn vào nhau. Khoảng 5–6% nam giới (cả dạng nhẹ). |
| Mù màu lam | Tritanopia | Hiếm gặp: khó phân biệt lam với lục, vàng với hồng. |
| Không thấy màu | Achromatopsia | Rất hiếm: chỉ thấy sáng tối. Cũng là cách kiểm tra thiết kế có đủ tương phản sáng tối không. |
Nếu chỉ có thời gian thử một kiểu, hãy thử Mù màu lục vì đó là dạng phổ biến nhất, rồi thử thêm Không thấy màu để kiểm tra tương phản sáng tối.
Trước khi làm: công cụ có gì, giới hạn ở đâu?
- Chi phí, tài khoản: theo trang công cụ, miễn phí, không cần đăng nhập. Mọi lần thử trong bài được làm khi chưa đăng nhập.
- Ảnh đưa vào: JPG, PNG, WebP. Chúng tôi đã thử cả ba. Khi thử chọn một file văn bản (.txt), công cụ báo "Không mở được file này, hãy chọn ảnh JPG, PNG hoặc WebP." (thử lại ngày 13/10/2026).
- Cách đưa ảnh vào: bấm Tải ảnh lên, thả ảnh vào khung, hoặc dán bằng Ctrl/Cmd + V (theo trang công cụ). Chúng tôi chỉ thử cách chọn file.
- Kích thước: ảnh lớn được thu về tối đa 1600 px cạnh dài. Ảnh thử 2400 × 1600 px cho ra file 1600 × 1067 px; ảnh nhỏ 400 × 266 px giữ nguyên kích thước.
- File tải về: luôn là PNG, tên có kèm kiểu mô phỏng, ví dụ chart-do-luc-deuteranopia.png. Với ảnh chụp, file PNG nặng hơn ảnh gốc nhiều: ảnh JPG 465,9 KB cho ra file 2,82 MB.
- Mức độ: công cụ mô phỏng mức mù màu nặng. Không có thanh chỉnh mức nhẹ.
- Chỉ xem, không sửa: công cụ cho bạn thấy vấn đề, không tự đổi màu giúp bạn. Cách sửa nằm ở nửa sau của bài.
Video quay màn hình (42 giây, không tiếng): tải biểu đồ lên, chọn Mù màu lục, kéo thanh so sánh, chọn Không thấy màu; mở poster chữ đỏ trên nền lục, kéo thanh, bấm Tải ảnh; mở bản poster đã sửa và so lại. Biểu đồ và poster mẫu do ColorME tự vẽ. Ảnh chụp màn hình: ColorME.
Cách xem thiết kế qua mắt người mù màu: 4 bước
Bước 1. Mở công cụ và tải ảnh lên
Vào colorme.vn/tools/color-blind. Xuất thiết kế, biểu đồ hoặc chụp màn hình giao diện thành ảnh, rồi bấm Tải ảnh lên. Chưa có ảnh sẵn thì bấm dòng Hoặc thử với biểu đồ mẫu ngay bên dưới.
Màn hình bắt đầu. Ảnh chụp màn hình: ColorME.
Bước 2. Chọn kiểu mù màu
Ảnh hiện ra với một thanh dọc ở giữa. Nửa trái có nhãn Mắt thường, nửa phải mang tên kiểu đang chọn. Hàng nút phía trên gồm Mù màu đỏ, Mù màu lục, Mù màu lam, Không thấy màu, Ảnh khác và Tải ảnh. Bấm một kiểu, ảnh đổi ngay; dòng chữ dưới ảnh giải thích kiểu đó.
Dưới cùng là bốn ảnh nhỏ cho thấy cả bốn kiểu cùng lúc. Bấm vào ảnh nhỏ nào thì ảnh lớn chuyển sang kiểu đó. Đây là cách nhanh nhất để biết kiểu nào làm thiết kế của bạn "vỡ" nặng nhất.
Biểu đồ mẫu có sẵn của công cụ, kiểu Mù màu đỏ. Ảnh chụp màn hình: ColorME.
Bước 3. Kéo thanh ở giữa để so sánh
Kéo thanh sang trái để thấy nhiều phần mô phỏng hơn, sang phải để thấy nhiều ảnh gốc hơn. Hãy kéo qua lại ở đúng chỗ hai màu nằm cạnh nhau: nếu ranh giới giữa hai màu biến mất khi thanh đi qua, bạn đã tìm ra chỗ cần sửa.
Thanh giữ nguyên vị trí khi bạn đổi kiểu mù màu và quay về giữa khi bạn mở ảnh khác.
Kéo thanh so sánh trên một biểu đồ chỉ phân biệt bằng màu. Biểu đồ mẫu do ColorME tự vẽ. Ảnh chụp màn hình: ColorME.
Bước 4. Tải ảnh mô phỏng về
Bấm Tải ảnh để lưu ảnh của kiểu đang chọn (cả tấm ảnh mô phỏng, không có thanh so sánh). Ảnh này tiện để gửi kèm khi góp ý cho đồng nghiệp hoặc khách hàng: một tấm ảnh "người mù màu lục thấy thế này" thuyết phục hơn nhiều so với một câu nhận xét. Muốn thử thiết kế khác, bấm Ảnh khác; kiểu mù màu đang chọn được giữ lại.
Ví dụ 1: biểu đồ chỉ phân biệt bằng màu
Chúng tôi vẽ một biểu đồ cột có bốn kênh bán hàng, mỗi kênh một màu: đỏ, xanh lục, cam, nâu. Với mắt thường, bốn màu này khác nhau rõ. Dưới kiểu Mù màu lục, cả bốn thành bốn sắc vàng nâu.
Kiểu Mù màu lục: chú giải bốn kênh gần như mất tác dụng. Ảnh chụp màn hình: ColorME.
Ảnh gốc và bốn file PNG tải về từ công cụ.
Để có con số thay vì cảm giác, chúng tôi đo màu trong các file tải về và tính tỉ lệ tương phản giữa cột Website (đỏ) và cột Cửa hàng (lục) theo công thức của WCAG. Trong ảnh gốc, hai màu này chỉ chênh sáng tối 1,57:1, tức mắt thường phân biệt chúng gần như hoàn toàn nhờ sắc màu. Ở bản Mù màu lục, sắc màu không còn giúp được nữa và độ chênh sáng tối chỉ còn 1,13:1. Bản Không thấy màu cho thấy điều tương tự với cột lục và cột cam: 1,08:1.
Bài học: bản Không thấy màu là phép thử nhanh nhất. Nếu hai màu gần như cùng một mức xám, chúng đang dựa hoàn toàn vào sắc màu để khác nhau.
Ví dụ 2: chữ đỏ trên nền xanh lục
Đỏ trên lục là cặp màu quen thuộc mỗi dịp cuối năm. Chúng tôi dựng một poster mẫu như vậy rồi đưa vào công cụ.
Nửa phải là điều một người mù màu lục thấy: dòng chữ nhỏ và nút bấm gần như biến mất. Poster mẫu do ColorME tự vẽ. Ảnh chụp màn hình: ColorME.
Dùng bốn ảnh nhỏ để chuyển nhanh giữa các kiểu, rồi tải ảnh về. Ảnh chụp màn hình: ColorME.
Tỉ lệ tương phản chữ so với nền, đo từ chính các file:
| Ảnh | Bản đầu (đỏ trên lục) | Bản sửa (kem trên lục đậm) |
|---|---|---|
| Ảnh gốc | 1,02:1 | 8,04:1 |
| Mù màu đỏ | 1,50:1 | 7,64:1 |
| Mù màu lục | 1,32:1 | 8,58:1 |
| Mù màu lam | 1,15:1 | 7,98:1 |
| Không thấy màu | 1,04:1 | 8,24:1 |
Con số đáng chú ý nhất nằm ở dòng đầu: ngay trong ảnh gốc, chữ đỏ và nền lục gần như cùng độ sáng (1,02:1). Poster đọc được với mắt thường chỉ vì đỏ và lục là hai sắc màu đối nhau. Lấy sắc màu đi là chữ mất. WCAG yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn; bạn có thể đo cặp màu của mình bằng công cụ kiểm tra độ tương phản.
Ảnh gốc và file PNG tải về từ công cụ. Bản sửa chỉ đổi hai màu, bố cục giữ nguyên.
Sửa thiết kế thế nào để người mù màu vẫn hiểu?
Nguyên tắc gốc nằm ở tiêu chí 1.4.1 của WCAG: không dùng màu làm cách duy nhất để truyền thông tin (W3C: Use of Color). Bạn vẫn dùng màu, nhưng luôn có thêm một dấu hiệu thứ hai. Năm cách chúng tôi đã áp dụng cho hai ví dụ trên:
- Tách độ sáng trước, sắc màu sau. Chọn chữ sáng trên nền tối hoặc ngược lại. Bản sửa của poster giữ nền lục nhưng làm nó đậm hơn và đổi chữ sang màu kem.
- Thêm nhãn chữ trực tiếp. Ghi tên hoặc chữ cái ngay trên cột, trên đường, thay vì bắt người xem dò chú giải theo màu.
- Thêm hoạ tiết. Sọc chéo, sọc ngang, chấm giúp hai vùng khác nhau ngay cả khi in đen trắng.
- Ghi số liệu. Một con số trên đầu cột không phụ thuộc vào màu.
- Đổi sang bảng màu đã được chọn sẵn cho người mù màu (xem phần dưới), tránh đặt đỏ cạnh lục, lục cạnh nâu, lam cạnh tím.
Ảnh gốc và hai file PNG tải về từ công cụ. Biểu đồ mẫu do ColorME tự vẽ.
Kiểm tra lại bản sửa. Ảnh chụp màn hình: ColorME.
Bản sửa cũng cho thấy vì sao không nên chỉ dựa vào bảng màu: ở kiểu Không thấy màu, cột lục và cột hồng tím của biểu đồ mới vẫn gần cùng một mức xám (1,11:1). Chính sọc ngang, chữ cái và con số mới là thứ giữ cho hai cột này khác nhau.
Bảng màu cho người mù màu: Okabe-Ito
Một bảng màu được dùng rộng rãi cho mục đích này do hai nhà nghiên cứu Masataka Okabe và Kei Ito đề xuất trong bộ hướng dẫn Color Universal Design (trang gốc của tác giả). Nó gồm tám màu được chọn sao cho cả người mù màu lẫn người không mù màu đều phân biệt được:
| Màu | Mã HEX | RGB |
|---|---|---|
| Đen | #000000 | 0, 0, 0 |
| Cam | #E69F00 | 230, 159, 0 |
| Lam da trời | #56B4E9 | 86, 180, 233 |
| Lục ngả lam | #009E73 | 0, 158, 115 |
| Vàng | #F0E442 | 240, 228, 66 |
| Lam | #0072B2 | 0, 114, 178 |
| Đỏ son | #D55E00 | 213, 94, 0 |
| Tím hồng | #CC79A7 | 204, 121, 167 |
Biểu đồ sửa ở trên dùng bốn màu trong bảng này: lam, cam, lục ngả lam và tím hồng. Hai lưu ý khi dùng:
- Bảng màu giúp các màu khác nhau, không bảo đảm chữ đủ tương phản với nền. Vàng và lam da trời trên nền trắng rất khó đọc khi dùng cho chữ hay nét mảnh.
- Dù dùng bảng màu nào, hãy đưa thiết kế hoàn chỉnh vào công cụ mô phỏng một lần trước khi gửi đi. Màu của thương hiệu, ảnh nền hay độ trong suốt đều có thể làm kết quả khác với dự tính.
Cần dựng một bảng màu riêng? Bạn có thể bắt đầu từ bánh xe màu, đọc lại 6 nguyên tắc phối màu cơ bản, rồi kiểm tra bằng công cụ mô phỏng. Khái niệm bảng màu được giải thích trong thư viện thuật ngữ.
Thử với ảnh chụp
Công cụ nhận cả ảnh chụp, hữu ích khi bạn chọn ảnh sản phẩm mà màu sắc là thông tin chính: quần áo, giày, đồ ăn, bản đồ. Chúng tôi thử ba ảnh nhiều màu.
Ảnh gốc và file PNG tải về từ công cụ. Ảnh: Stepan (kệ sách), Piyush Haswani (giày), Hazel J (tủ bánh) / Unsplash.
Kiểu Mù màu lam trên ảnh kệ sách. Ảnh: Stepan / Unsplash. Ảnh chụp màn hình: ColorME.
Với ảnh lớn, công cụ vẫn phản hồi tức thì: trên máy thử, mỗi lần đổi kiểu với ảnh 1600 × 1067 px mất chưa tới một phần mười giây.
Dùng trên điện thoại
Trang công cụ ghi rằng nó chạy được trên máy tính lẫn điện thoại. Chúng tôi thử ở chiều rộng điện thoại (390 px, giả lập trên Chrome máy tính, không phải một chiếc điện thoại thật): bốn nút kiểu mù màu xếp thành hai hàng, thanh so sánh vẫn nằm giữa ảnh, ảnh tải về có cùng kích thước và dung lượng với bản tải trên máy tính, trang không trượt ngang.
Giao diện ở chiều rộng 390 px. Ảnh chụp màn hình: ColorME.
Ảnh của bạn được xử lý ở đâu?
Trang công cụ trả lời câu "Ảnh của tôi có bị tải lên máy chủ không?" như sau: "Ảnh được xử lý ngay trên trình duyệt của bạn. Khi bạn tải về, ColorME nhận một bản ảnh kết quả để theo dõi cách công cụ được dùng. Nếu bạn đăng nhập, file tải về được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày."
Nói cách khác: nếu thiết kế còn trong giai đoạn bảo mật, bạn có thể xem mô phỏng trên màn hình mà không bấm Tải ảnh.
Mô phỏng chính xác tới đâu?
Trang công cụ ghi: "Công cụ dùng mô hình Machado (2009) được dùng rộng rãi trong nghiên cứu, thể hiện mức mù màu nặng. Người mù màu nhẹ sẽ thấy khác biệt ít hơn." Có ba điều nên nhớ khi đọc kết quả:
- Đây là trường hợp nặng nhất. Phần lớn người có khiếm khuyết sắc giác ở mức nhẹ hơn. Thiết kế qua được bản mô phỏng nặng thì cũng ổn với mức nhẹ.
- Mô phỏng là ước lượng. Không ai biết chính xác người khác thấy gì; màn hình, ánh sáng phòng và từng người đều tạo ra khác biệt. Hãy dùng kết quả để tìm các cặp màu dễ lẫn, đừng dùng nó để khẳng định "người mù màu thấy đúng màu này".
- Công cụ không kiểm tra thị lực. Nó không cho biết bạn có mù màu hay không. Việc đó cần bài kiểm tra của bác sĩ mắt.
Khi nào cần cách khác?
- Cần biết hai mã màu có đủ tương phản không: dùng công cụ kiểm tra độ tương phản; công cụ mô phỏng chỉ cho xem, không cho số.
- Cần lấy mã màu từ một tấm ảnh trước khi sửa: dùng công cụ trích xuất bảng màu từ ảnh.
- Cần xem mô phỏng ngay trong file thiết kế đang mở, theo từng mức nhẹ, vừa, nặng: dùng chế độ xem thử mù màu có sẵn trong phần mềm thiết kế bạn đang dùng, nếu có.
- Cần kiểm tra một trang web đang chạy: chụp màn hình trang rồi đưa ảnh vào công cụ; công cụ không nhận đường link.
Câu hỏi thường gặp
Làm sao để biết mình có bị mù màu không?
Công cụ này không dùng để chẩn đoán. Theo NEI, bác sĩ mắt thường chỉ cần một bài kiểm tra đơn giản để xác định. Nếu bạn hay nhầm đỏ với lục hoặc nâu, hãy đi khám mắt.
Người mù màu có thấy đen trắng không?
Phần lớn là không. Dạng chỉ thấy sáng tối (kiểu Không thấy màu trong công cụ) rất hiếm. Dạng phổ biến là khó phân biệt đỏ với lục.
Nên thử kiểu nào trước?
Mù màu lục, vì công cụ ghi đây là dạng phổ biến nhất. Sau đó thử Không thấy màu để kiểm tra tương phản sáng tối. Bốn ảnh nhỏ dưới ảnh chính cho bạn xem cả bốn kiểu cùng lúc.
Đỏ và xanh lục có bị cấm dùng cùng nhau không?
Không. Bạn vẫn dùng được nếu hai màu khác nhau rõ về độ sáng và thông tin không chỉ nằm ở màu: thêm biểu tượng, nhãn chữ hoặc hoạ tiết. Trong ví dụ poster, vấn đề là đỏ và lục có cùng độ sáng.
Có tải được ảnh mô phỏng về không?
Có. Bấm Tải ảnh để lưu file PNG của kiểu đang chọn. Ảnh lớn được thu về tối đa 1600 px cạnh dài.
Công cụ có tự sửa màu giúp tôi không?
Không. Nó chỉ mô phỏng để bạn thấy vấn đề. Bạn sửa trong phần mềm thiết kế rồi đưa bản mới vào kiểm tra lại, như trong video ở đầu bài.
