С этим инструментом что-то не так?
О «Color Blindness CSS Reference Online»
Этот инструмент формирует CSS-справочник для разработки доступных палитр, работающих у людей с нарушениями цветового зрения. Показывает, как цвета выглядят при протанопии, дейтеранопии, тританопии и монохромазии, и подсказывает безопасные альтернативы.
Около 8% мужчин и 0,5% женщин имеют нарушение цветового зрения. Дизайн только под нормальное зрение исключает их. Используйте безопасные пары и не полагайтесь только на цвет (форма, текст, паттерн) — и ваш дизайн будет инклюзивным.
Полезно для проверки бренд-палитр, аудита существующих интерфейсов и обучения тому, какие пары лучше избегать.
Как пользоваться этим инструментом
Как получить CSS-сниппет фильтров для симуляции дальтонизма
Запуск без ввода
Поля ввода у инструмента нет — просто нажмите Run. Он вернёт готовый CSS-сниппет, который можно вставить в стили (без дополнительной конфигурации).
Что вы получите
Результат — единственное поле `css` с тремя классами фильтров: `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Каждый использует SVG-матрицу `feColorMatrix`, аппроксимирующую соответствующее нарушение цветовосприятия.
Применение
Добавьте нужный класс к `body` (или wrapper'у), чтобы посмотреть, как видят ваш дизайн ~8% мужчин с красно-зелёным дальтонизмом или гораздо меньшая доля с сине-жёлтым. Класс можно переключать прямо в devtools — без ребилда.
Оговорки
Это линейные приближения; реальное цветовосприятие сложнее. Sim Daltonism (macOS) или Coblis используют лучшие модели. Всегда сочетайте превью с проверкой контраста WCAG (wcag-contrast-checker-online) — цвет не должен быть единственным носителем информации.