Симуляция цветовой слепоты
Загрузите скриншот макета или сайта — инструмент покажет, как его видят люди с разными нарушениями цветового зрения.
Всё считается в вашем браузере: введённые данные никуда не отправляются.
Почему это важно
Нарушения цветового зрения есть примерно у 8% мужчин и 0,5% женщин — это миллионы потенциальных клиентов. Чаще всего человек хуже различает красный и зелёный. Если в интерфейсе ошибка отмечена только красным, а успех — только зелёным, часть посетителей не увидит разницы. То же касается графиков, карт, статусов заказов и кнопок.
Какие виды нарушений моделируются
| Вид | Что происходит | Распространённость |
|---|---|---|
| Протанопия | не работают «красные» колбочки, красный кажется тёмным | около 1% мужчин |
| Дейтеранопия | не работают «зелёные» колбочки, красный и зелёный сливаются | около 1% мужчин |
| Тританопия | путаются синий и жёлтый | редко, 0,01% |
| Ахроматопсия | мир видится в оттенках серого | очень редко |
Ещё чаще встречаются ослабленные формы — протаномалия и дейтераномалия, около 6% мужчин. Если интерфейс читается при полной форме нарушения, он будет понятен и при ослабленной.
Как сделать дизайн доступным
- Не передавайте смысл только цветом: добавьте иконку, подпись, штриховку или подчёркивание.
- Соблюдайте контраст текста и фона не ниже 4,5:1 по требованиям WCAG.
- В графиках используйте палитры, различимые при дальтонизме, и подписывайте линии прямо на графике.
- Ссылки в тексте выделяйте не только цветом, но и подчёркиванием.
Моделирование построено на модели Мачадо, Оливейры и Фернандеса (2009) — её используют инструменты разработчика в браузерах. Изображение обрабатывается в браузере и никуда не загружается.
Частые вопросы
Какие форматы изображений поддерживаются?
Любые, которые открывает браузер: PNG, JPEG, WebP, GIF (первый кадр), SVG. Большие изображения уменьшаются до ширины 900 пикселей для скорости.
Можно ли проверить сайт целиком?
Сделайте скриншот страницы и вставьте его сочетанием Ctrl+V. В Chrome также есть встроенная эмуляция: «Инструменты разработчика → Rendering → Emulate vision deficiencies».
Насколько точна симуляция?
Она показывает усреднённое восприятие при полной форме нарушения. У каждого человека картина индивидуальна, но для проверки интерфейса этого достаточно.