Do I need to install anything to use Color Blindness Simulator?

No installation needed. Color Blindness Simulator works directly in any modern web browser, Chrome, Firefox, Safari, or Edge.

Can I copy the generated CSS code?

Yes, all generated code can be copied to your clipboard with one click and used directly in your projects.

What types of color blindness does this tool simulate?

The simulator covers protanopia, deuteranopia, tritanopia, and achromatopsia, as well as partial variants like protanomaly, deuteranomaly, and tritanomaly, representing the full spectrum of color vision deficiencies.

How can I make my design more accessible to color-blind users?

Avoid relying on color alone to convey information. Use patterns, labels, or icons alongside color. Test your palette with this simulator and check contrast ratios with a contrast checker to ensure readability.

How common is color blindness?

Approximately 8 percent of males and 0.5 percent of females have some form of color vision deficiency. Deuteranomaly (reduced green sensitivity) is the most common type worldwide.

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

Xem cách hình ảnh và màu sắc xuất hiện đối với những người bị thiếu hụt thị lực màu.

Thả hình ảnh vào đây hoặc nhấp để tải lên

PNG, JPG, WebP

Các loại mù màu

Protanopia (~1% nam giới) · không có tế bào hình nón đỏ. Đỏ trông tối, khó phân biệt với xanh lá.

Deuteranopia (~1% nam giới) · không có tế bào hình nón xanh lá. Hình thức phổ biến nhất. Xanh lá và đỏ trông giống nhau.

Tritanopia (~0,003%) · không có tế bào hình nón xanh dương. Xanh dương trông xanh lục, vàng trông hồng.

Achromatopsia (~0,003%) · không có thị lực màu. Mọi thứ xuất hiện ở mức xám.

Protanomaly / Deuteranomaly / Tritanomaly · phiên bản một phần của các loại trên, với độ nhạy giảm (nhưng không vắng mặt).

Khoảng 8% nam giới và 0,5% nữ giới có một dạng thiếu hụt thị lực màu nào đó.

Tại Sao Thiết Kế Cho Người Khiếm Khuyết Thị Giác Màu Sắc Quan Trọng

Khiếm thị màu sắc (CVD) rất phổ biến. Viện Mắt Quốc gia Hoa Kỳ báo cáo rằng khoảng 1 trong 12 nam giới có một dạng CVD nào đó; phụ nữ bị ảnh hưởng với tỉ lệ thấp hơn nhiều vì các dạng phổ biến nhất được di truyền qua gen lặn liên kết X. Cộng lại, dân số toàn cầu có mức CVD nào đó lên đến hàng trăm triệu. Bất kỳ thiết kế hướng người dùng nào dựa vào màu đỏ và xanh lá để truyền đạt ý nghĩa (chỉ báo lỗi so với thành công, biểu đồ, viên trạng thái, thông báo xác thực) sẽ thất bại với một phần đáng kể người dùng trừ khi màu sắc được kết hợp với tín hiệu khác.

Đây cũng là yêu cầu khả năng tiếp cận chính thức. WCAG 2.2 Tiêu Chí Thành Công 1.4.1 («Sử Dụng Màu Sắc»), Cấp A, nêu quy tắc trực tiếp: «Màu sắc không được dùng là phương tiện thị giác duy nhất để truyền đạt thông tin, chỉ ra hành động, nhắc nhở phản hồi, hoặc phân biệt phần tử thị giác.» Cấp A là ngưỡng tuân thủ WCAG thấp nhất, không đạt nó có nghĩa là trang web không chỉ không thể truy cập mà còn không tuân thủ pháp luật ở các khu vực pháp lý yêu cầu tuân thủ WCAG (Section 508 Hoa Kỳ, Đạo luật Khả năng Tiếp cận EU, Đạo luật Bình đẳng Anh).

Tám Dạng CVD

Thị giác màu sắc của người phụ thuộc vào ba loại tế bào nón quang thụ thể: L-cones (bước sóng dài, đỉnh quanh màu đỏ), M-cones (bước sóng trung bình, đỉnh quanh màu xanh lá), và S-cones (bước sóng ngắn, đỉnh quanh màu xanh dương-tím). Mỗi dạng CVD tương ứng với một trong các cones này bị vắng mặt (-anopia) hoặc dịch chuyển độ nhạy (-anomaly).

Dạng	Tế bào nón bị ảnh hưởng	Hiệu ứng thị giác
Protanopia	Không có L-cone	Màu đỏ trông tối; màu đỏ và xanh lá dễ nhầm lẫn.
Protanomaly	L-cone bị dịch chuyển	Giảm độ nhạy màu đỏ; nhầm lẫn đỏ-xanh lá một phần.
Deuteranopia	Không có M-cone	Màu xanh lá và đỏ trông giống nhau.
Deuteranomaly	M-cone bị dịch chuyển	Dạng CVD phổ biến nhất, giảm độ nhạy màu xanh lá, nhầm lẫn đỏ-xanh lá từ nhẹ đến trung bình.
Tritanopia	Không có S-cone	Màu xanh dương trông xanh lá, màu vàng trông hồng. Rất hiếm.
Tritanomaly	S-cone bị dịch chuyển	Giảm khả năng phân biệt xanh dương-vàng.
Achromatopsia	Tất cả cones đều vắng mặt	Hoàn toàn không có thị giác màu sắc; thế giới trông như thang độ xám. Thường đi kèm với nhạy cảm ánh sáng và giảm độ nhạy thị lực.
Achromatomaly	Tất cả cones đều bị suy giảm	Giảm mạnh khả năng phân biệt màu sắc trên toàn phổ.

Deuteranomaly là dạng phổ biến nhất vì các gen quang sắc tố L-cone và M-cone nằm liền kề trên nhiễm sắc thể X và chỉ khác nhau một vài amino acid. Các đột biến nhỏ dễ dàng dịch chuyển đỉnh độ nhạy của M-cone gần hơn với L-cone, làm giảm khả năng phân biệt giữa màu đỏ và xanh lá của não.

Tại Sao Nam Giới Bị Ảnh Hưởng Nhiều Hơn

Các gen quang sắc tố L-cone (OPN1LW) và M-cone (OPN1MW) đều nằm trên nhiễm sắc thể X. Nam giới chỉ thừa hưởng một X (từ mẹ); nữ giới thừa hưởng hai (một từ mỗi cha mẹ). Để biểu hiện khiếm khuyết lặn, phụ nữ cần có gen khiếm khuyết trên cả hai nhiễm sắc thể X, trong khi nam giới chỉ cần có nó trên X duy nhất. Phép tính này tạo ra sự khác biệt khoảng 10× về tỉ lệ mắc giữa nam và nữ đối với CVD đỏ-xanh lá cụ thể. Gen S-cone nằm trên nhiễm sắc thể 7 và là autosomal, tritanopia và tritanomaly ảnh hưởng đến nam và nữ với tỉ lệ tương tự, nhưng cả hai dạng này rất hiếm gặp ngay từ đầu.

Yêu Cầu Độ Tương Phản WCAG Cũng Áp Dụng

Ngoài SC 1.4.1, WCAG còn áp đặt tỉ lệ tương phản tối thiểu cho văn bản và thành phần UI, tất cả được đo dựa trên cặp màu thực tế hiển thị:

SC 1.4.3 Tương Phản (Tối Thiểu), Cấp AA: ít nhất 4,5:1 cho văn bản thân thông thường, 3:1 cho văn bản lớn hoặc đậm.
SC 1.4.6 Tương Phản (Nâng Cao), Cấp AAA: 7:1 cho văn bản thông thường, 4,5:1 cho văn bản lớn.
SC 1.4.11 Tương Phản Phi Văn Bản, Cấp AA: 3:1 cho thành phần UI và đối tượng đồ họa (viền nút, chỉ báo focus, viền icon).

Dùng trình mô phỏng này cùng với công cụ kiểm tra độ tương phản. Hai màu có thể có tỉ lệ tương phản 4,5:1 hoàn toàn tốt trong tầm nhìn bình thường nhưng vẫn không thể phân biệt được đối với người mắc deuteranopia. Trình mô phỏng bắt chế độ thất bại thứ hai mà việc kiểm tra tương phản thuần túy bỏ sót.

Các Sai Lầm Thiết Kế Phổ Biến Và Cách Khắc Phục

Chỉ báo trạng thái đỏ / xanh lá cho thành công so với lỗi. Kết hợp với icon (✗ / ✓), nhãn văn bản, hoặc hình dạng riêng biệt. Đừng bao giờ chỉ dựa vào màu sắc.
Liên kết có màu không có gạch chân. Nhiều người dùng CVD không thể phân biệt liên kết có màu với văn bản xung quanh. Thêm gạch chân, thay đổi độ đậm font, hoặc cả hai.
Biểu đồ thanh chỉ phân màu theo danh mục. Thêm mẫu nền, nhãn trực tiếp, hoặc dùng bảng màu an toàn cho người mù màu (Viridis, Cividis, Magma, Okabe-Ito, bộ CVD-safe của ColorBrewer).
Heatmap với gradient đỏ→xanh lá. Chuyển sang các bảng màu đồng đều về mặt cảm nhận, Viridis của Matplotlib (mặc định từ năm 2017) và Cividis (Nuñez và cộng sự, 2018, được thiết kế đặc biệt cho người xem có CVD) đều an toàn.
Xác thực form chỉ bằng văn bản đỏ. Kết hợp với icon, thông báo lỗi rõ ràng, và thay đổi viền field có thể nhìn thấy.
Hướng dẫn «Nhấp vào nút xanh lá». Hãy đề cập đến vị trí hoặc nhãn, không phải màu sắc.
Chú giải bản đồ với màu tương tự nhau. Bản đồ choropleth với thang đỏ-cam-vàng có thể thu về hai màu không thể phân biệt dưới deuteranopia. Dùng thang một màu (xanh dương nhạt đến đậm) hoặc bảng màu phân kỳ an toàn cho CVD.
Mã màu thiết kế game. Điển hình, Apricorn trong Pokémon Crystal đầu và PokéStop mã màu gốc trong Pokémon GO đưa ra các quyết định đỏ-xanh lá mà nhiều người chơi CVD không thể giải quyết.

Bảng Màu An Toàn Cho Người Mù Màu

Viridis: Bảng màu tuần tự mặc định của Matplotlib từ năm 2017. Đồng đều về mặt cảm nhận trên cả tầm nhìn bình thường và CVD.
Cividis: Được thiết kế đặc biệt cho người xem có CVD (Nuñez, Anderton và Renslow, PLOS ONE 2018). Duy trì khoảng cách cảm nhận đồng đều ngay cả khi mô phỏng deuteranopia hoặc protanopia.
ColorBrewer: Các bảng màu của Cynthia Brewer dành cho bản đồ học. Trang web đánh dấu rõ ràng các biến thể an toàn CVD cho dữ liệu tuần tự, phân kỳ và định tính.
Okabe-Ito: Bảng màu định tính tám màu được thiết kế bởi Masataka Okabe và Kei Ito cho khả năng tiếp cận trong xuất bản khoa học. Bảng màu được khuyến nghị cho dữ liệu phân loại với tối đa 8 danh mục.

DevTools Trình Duyệt Cũng Có Trình Mô Phỏng CVD

Cả Chrome và Edge DevTools đều có tùy chọn «Mô phỏng khiếm khuyết thị giác» tích hợp (trong tab Rendering) có thể mô phỏng protanopia, deuteranopia, tritanopia và achromatopsia trên toàn bộ viewport. Accessibility Inspector của Firefox cũng cung cấp trình mô phỏng tương tự. Những công cụ này rất tốt cho việc kiểm tra toàn trang trong các buổi đánh giá thiết kế, công cụ một màu này bổ sung cho chúng bằng cách cô lập từng mẫu màu một để bạn có thể đưa ra quyết định bảng màu mà không bị phần còn lại của trang gây nhầm lẫn so sánh.

Các Bài Kiểm Tra Chẩn Đoán Bạn Có Thể Đã Nghe

Bảng Ishihara (Shinobu Ishihara, 1917), các bảng chấm màu nổi tiếng với con số ẩn. Tiêu chuẩn trong cơ sở lâm sàng để sàng lọc khiếm khuyết đỏ-xanh lá.
Bài kiểm tra Farnsworth-Munsell 100 màu: sắp xếp các nắp theo thứ tự màu liên tục. Kiểm tra khả năng phân biệt tinh tế, không chỉ có/không có CVD.
Anomaloscope: điều chỉnh hỗn hợp đỏ-xanh lá để khớp với tham chiếu vàng. Được dùng để phân loại lâm sàng về loại và mức độ nghiêm trọng của CVD.

Công cụ này không phải là công cụ chẩn đoán, nó mô phỏng cách một màu nhất định xuất hiện với người có các dạng CVD khác nhau để bạn có thể thiết kế phù hợp, không phải kiểm tra thị lực của ai đó.

Các Lỗi Phổ Biến

Coi CVD là mối quan tâm ngách. Một trong 12 nam giới là phần đáng kể trong cơ sở người dùng của bất kỳ sản phẩm tiêu dùng nào, và hầu hết trong số họ không bao giờ báo cáo vì họ đã tìm cách khắc phục suốt cuộc đời.
Giả định «chế độ tối» hoặc «độ tương phản cao» đã đủ. Độ tương phản và CVD là các trục độc lập. Bảng màu tương phản cao vẫn có thể dựa vào sự phân biệt đỏ-xanh lá mà thất bại.
Chỉ kiểm tra với deuteranopia. Deuteranopia là dạng phổ biến nhất nhưng không phải duy nhất, protanopia, tritanopia và các biến thể -anomaly một phần đều tạo ra sự nhầm lẫn khác nhau. Hãy kiểm tra tất cả chúng.
Chỉ dùng trình mô phỏng, bỏ qua công cụ kiểm tra độ tương phản. Bảng màu có thể an toàn với CVD và vẫn không đạt ngưỡng tương phản tối thiểu WCAG 1.4.3. Hãy dùng cả hai công cụ.
Chọn màu theo tên thay vì theo khoảng cách cảm nhận. «Đỏ, xanh lá và xanh dương» nghe có vẻ cách xa nhau; trong CVD nó có thể thu về «tối, tối, xanh dương.» Hãy kiểm tra các mẫu màu thực tế.

Câu Hỏi Thường Gặp

Trình mô phỏng chính xác đến đâu?

Mô phỏng CVD là xấp xỉ, không phải kết xuất hoàn hảo. Các thuật toán chuẩn (phương pháp 1997 của Brettel, Viénot và Mollon, được tinh chỉnh bởi Viénot 1999 và Machado và cộng sự 2009) chiếu màu lên «đường nhầm lẫn» cho cone bị thiếu hoặc dịch chuyển trong không gian màu LMS. Kết quả là những gì ai đó với dichromacy đầy đủ sẽ thấy trung bình, nhưng người dùng CVD thực tế khác nhau theo từng cá nhân, não bù đắp bằng tín hiệu từ độ sáng, ngữ cảnh và kinh nghiệm trước đó mà một mô phỏng tĩnh không thể tái tạo.

Ảnh hoặc màu của tôi có được gửi đi đâu không?

Không. Trình mô phỏng chạy hoàn toàn trong trình duyệt của bạn sử dụng phần tử canvas để áp dụng phép biến đổi màu từng pixel. Không có gì được tải lên, ghi log, hoặc lưu trữ. Điều này quan trọng khi ảnh bạn đang kiểm tra là bản mock-up thiết kế chưa phát hành, ảnh chụp màn hình UI bảo mật, hoặc bất cứ thứ gì bạn không muốn chia sẻ với bên thứ ba.

Tôi có nên thiết kế cho tất cả tám dạng CVD không?

Trong thực tế, thiết kế cho các dạng phổ biến nhất (deuteranopia và deuteranomaly) bao phủ đại đa số người dùng. Thêm kiểm tra đối với protanopia sẽ bao phủ hầu hết phần còn lại. Tritanopia và tritanomaly đủ hiếm để đáp ứng các bài kiểm tra deutan / protan thường là đủ, mặc dù thiết kế có thể truy cập đúng cách không dựa vào màu sắc chút nào (kết hợp với icon, mẫu nền, hoặc nhãn) tự động bao phủ tất cả mọi người.

Bảng màu hiện tại của tôi có «CVD-safe» trong tên. Tôi có vẫn cần kiểm tra không?

Có. «CVD-safe» thường có nghĩa là các màu danh mục của bảng màu có thể phân biệt được dưới mô phỏng, nhưng ngay khi bạn kết hợp giao diện thực (văn bản trên nền có màu, icon trên fill, trạng thái hover dịch chuyển 5% độ sáng) bạn có thể đưa lại sự nhầm lẫn. Kiểm tra các cặp màu kết hợp của bạn, không chỉ bảng màu nguồn.

Sự khác biệt giữa protanopia và protanomaly là gì?

Protanopia là sự vắng mặt hoàn toàn của quang sắc tố L-cone (đỏ), người mắc không có khả năng nhạy sáng với màu đỏ chức năng nào cả. Protanomaly là sự dịch chuyển trong đỉnh độ nhạy của L-cone thay vì sự vắng mặt, người mắc có khả năng phân biệt màu đỏ giảm nhưng không phải bằng không. Cùng mô hình cho deutera-/deuter- và trita-/triton-: -anopia là dạng mạnh, -anomaly là dạng một phần.

Kính chỉnh màu (EnChroma) có thực sự hiệu quả không?

Với nhiều người có khiếm khuyết đỏ-xanh lá, có, chúng mở rộng khoảng cách cảm nhận giữa một số màu đỏ và xanh lá bằng cách lọc các bước sóng chồng lấp cụ thể giữa L-cone và M-cone. Chúng không «chữa khỏi» CVD hay làm cho người dichromat thấy màu bình thường; tình trạng quang sắc tố không thay đổi. Hiệu quả khác nhau theo từng cá nhân và điều kiện ánh sáng; ánh sáng ban ngày ngoài trời có xu hướng là nơi chúng giúp ích nhiều nhất.