Mô phỏng mù màu

Xem cách màu sắc hiển thị với người có các loại khiếm khuyết thị giác màu khác nhau. Khoảng 8% nam giới và 0,5% phụ nữ mắc một dạng mù màu nào đó.

#

Về khiếm khuyết thị giác màu

Mù màu đỏ-xanh lá

Loại phổ biến nhất, ảnh hưởng đến ~8% nam giới. Bao gồm mù màu đỏ (không có tế bào hình nón đỏ) và mù màu xanh lá (không có tế bào hình nón xanh lá). Người mắc các tình trạng này gặp khó khăn trong việc phân biệt màu đỏ và xanh lá.

Mù màu xanh dương-vàng

Mù màu xanh dương ảnh hưởng đến ít hơn 0,01% dân số. Người mắc tình trạng này gặp khó khăn trong việc phân biệt màu xanh dương và màu vàng.

Mẹo thiết kế

Đừng chỉ dựa vào màu sắc để truyền đạt thông tin. Sử dụng hoa văn, nhãn và độ tương phản đủ. Kiểm tra thiết kế của bạn với công cụ mô phỏng này để đảm bảo khả năng tiếp cận.

Hướng dẫn WCAG

WCAG 2.1 yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn. Sử dụng công cụ Kiểm tra tương phản của chúng tôi để xác minh sự tuân thủ.

Mở công cụ kiểm tra tương phản →

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

Color vision deficiency affects approximately 8% of males and 0.5% of females of Northern European descent — roughly 300 million people worldwide. The most common type is deuteranomaly (reduced green sensitivity, ~5% of males), followed by protanomaly (reduced red sensitivity, ~1%). Total color blindness (achromatopsia) is extremely rare, affecting about 1 in 33,000 people.
Deuteranopia and protanopia (red-green color blindness) should be your top priority since they affect the largest population — combined, roughly 7-8% of males. If your design passes accessibility checks for deuteranopia, it will typically work for protanopia too, as both affect the red-green perception axis. Always also test tritanopia for designs that rely heavily on blue-yellow distinctions.
Never use color as the only way to convey information. Supplement color with patterns, icons, labels, or underlines. For charts and graphs, use distinct shapes or textures alongside colors. Maintain sufficient contrast ratios (WCAG AA minimum 4.5:1 for text). Avoid problematic combinations like red/green, green/brown, blue/purple, and green/gray. Use this simulator to verify your designs look clear under all types.
Red-green color blindness (protanopia and deuteranopia) affects the long and medium wavelength cones, making reds and greens appear similar — often as brownish or yellowish tones. Blue-yellow color blindness (tritanopia) affects the short wavelength cones, making blues appear greenish and yellows appear pinkish. Red-green is far more common (8% of males) than blue-yellow (less than 0.01% of the population).
This tool simulates individual colors rather than full images. To test how an entire image or illustration appears under color blindness, you can check each key color from your design. For full-image simulation, browser extensions like ChromeLens or built-in developer tools in Chrome (Rendering panel > Emulate vision deficiencies) can simulate color blindness on entire web pages.

Bài viết liên quan