Color Blindness Simulator

Об этом инструменте

Симулятор цветовой слепоты применяет CSS-фильтры цветовых матриц к образцам цветов, позволяя увидеть, как дизайны выглядят для людей с различными типами нарушений цветовосприятия.

Используйте этот инструмент при разработке UI-компонентов, графиков, карт или любого визуального контента, использующего цвет для передачи информации.

Типы цветовой слепоты

• Нормальное зрение: Нормальное зрение: полное цветовосприятие
• Протанопия (красно-слепота): Протанопия: отсутствие красных колбочек (~1% мужчин)
• Дейтеранопия (зелено-слепота): Дейтеранопия: отсутствие зелёных колбочек (наиболее распространённая, ~1% мужчин)
• Тританопия (сине-слепота): Тританопия: отсутствие синих колбочек (редкая, ~0,003%)
• Ахроматопсия (нет цвета): Ахроматопсия: нет цветовосприятия, только оттенки серого (очень редкая)
• Ахроматомалия (снижение цвета): Ахроматомалия: сниженная чувствительность к цвету нескольких типов колбочек

Как использовать

1. Выберите тип симуляции в выпадающем меню.
2. Наблюдайте, как изменяются цветовые образцы и спектр при применённом фильтре.
3. Сравнивайте с нормальным зрением для выявления проблемных цветовых сочетаний.

Случаи использования

UI/UX-дизайнеры проверяют различимость состояний кнопок и индикаторов статуса. Создатели визуализации данных обеспечивают доступность цветов диаграмм.

Частые вопросы

• Насколько точны эти симуляции? — Используются проверенные преобразования цветовых матриц, это хорошие приближения.
• Каков процент людей с цветовой слепотой? — Около 8% мужчин и 0,5% женщин имеют какую-либо форму нарушения цветовосприятия.
• Как лучше всего проектировать для людей с цветовой слепотой? — Сочетайте цвет с другими визуальными подсказками: форма, паттерн, подпись, текстура. Обеспечьте достаточный контраст и тестируйте с несколькими типами симуляции.