Симулятор Цветослепоты — Видьте Цвета Глазами Других
Введите шестнадцатеричный код цвета и сравните рядом, как он выглядит при красно-зелёной слепоте (дейтеранопия, протанопия), сине-жёлтой слепоте (тританопия) и полной цветовой слепоте (ахроматопсия). Каждый образец показывает симулированные значения HEX и RGB.
Как это работает
Цветовая слепота в цифрах
Нарушение цветового зрения затрагивает около 300 миллионов человек во всём мире — примерно 8% мужчин и 0,5% женщин северноевропейского происхождения. Красно-зелёные варианты являются наиболее распространёнными: дейтеранопия и дейтераномалия (слабость к зелёному) вместе затрагивают около 5% мужчин, тогда как протанопия и протаномалия (слабость к красному) — около 2,5%. Тританопия (сине-жёлтая) встречается значительно реже — менее чем 1 случай на 10 000 человек вне зависимости от пола. Полная ахроматопсия ещё более редка: 1 случай на 30 000.
Эти цифры означают, что из каждых 12 мужчин, посещающих ваш сайт или приложение, примерно один не может различить определённые цветовые сочетания так, как вы задумывали. Продукты с высоким трафиком — будь то информационная панель, кнопка покупки или предупредительный баннер — должны учитывать эту аудиторию. Моделирование того, что видят эти пользователи, — первый шаг к инклюзивному дизайну.
Как работает симуляция
В человеческом глазу есть три типа колбочек, чувствительных к длинноволновому (красный), средневолновому (зелёный) и коротковолновому (синий) свету. Цветовая слепота возникает, когда один или несколько типов колбочек отсутствуют или имеют изменённую спектральную чувствительность. Исследователи моделируют это в цветовом пространстве LMS, которое напрямую соответствует реакциям колбочек, и выводят матрицы преобразования, предсказывающие восприятие глаза с дефицитом цветового зрения для заданного значения RGB.
Этот симулятор использует упрощённые матрицы Machado 2009, применяемые непосредственно в пространстве sRGB. Метод жертвует небольшой физиологической точностью ради скорости и простоты — перцептивная разница незначительна для дизайнерской работы. Все выходные значения ограничены диапазоном 0–255, поскольку коэффициенты матрицы могут давать значения вне гаммы для очень насыщенных входных цветов. Симуляция ахроматопсии сводит все каналы к стандартному значению яркости (0,299R + 0,587G + 0,114B), имитируя полное отсутствие цветового восприятия.
Ни одна симуляция не может идеально воспроизвести реальный опыт цветовой слепоты, поскольку реакция колбочек варьируется между людьми. Используйте этот инструмент как практическую эвристику, а не как окончательный диагноз: если пара цветов выглядит сбивающе похожей в симуляторе, она, вероятно, создаст проблемы хотя бы для некоторых пользователей с нарушением цветового зрения.
Советы по дизайну для доступности при цветовой слепоте
Самый эффективный приём — никогда не полагаться только на цвет для передачи информации. Сочетайте цвет с формой, узором или текстовой меткой. Сегмент круговой диаграммы не должен различаться только оттенком — добавьте прямую метку или отдельную штриховку. Ошибка валидации формы не должна обозначаться только красной рамкой — добавьте иконку и явное сообщение об ошибке. Эти принципы изложены в критерии успеха 1.4.1 WCAG 2.1 (Использование цвета) и обязательны для соответствия уровню AA.
При выборе цветовой палитры тестируйте пары переднего и заднего фона с помощью проверщика контрастности (WCAG требует минимальный коэффициент 4,5:1 для обычного текста и 3:1 для крупного). Помимо контраста, отдавайте предпочтение сочетаниям оттенков, которые остаются различимыми при симуляции дейтеранопии: пары синий-оранжевый работают хорошо, тогда как пары красный-зелёный проблематичны. Избегайте использования красного и зелёного как единственных различителей для любого статуса или категории данных.
Частые вопросы
›Что такое дейтеранопия?
Дейтеранопия — форма красно-зелёной цветовой слепоты, вызванная отсутствием средневолновых (чувствительных к зелёному) колбочек. Люди с дейтеранопией испытывают трудности с различением красных и зелёных оттенков, которые выглядят как жёлтые, коричневые или серые тона. Это наиболее распространённый тип нарушения цветового зрения, затрагивающий около 1% мужчин.
›В чём разница между дейтеранопией и протанопией?
Обе являются красно-зелёной цветовой слепотой, но затрагивают разные типы колбочек. Протанопия предполагает отсутствие длинноволновых (чувствительных к красному) колбочек; дейтеранопия — отсутствие средневолновых (чувствительных к зелёному) колбочек. На практике красные цвета выглядят значительно темнее при протанопии, чем при дейтеранопии, поскольку L-колбочки несут важную информацию о яркости.
›Сколько людей в мире страдают цветовой слепотой?
Примерно 300 миллионов человек во всём мире имеют ту или иную форму нарушения цветового зрения. Около 8% мужчин и 0,5% женщин северноевропейского происхождения затронуты. Красно-зелёные варианты (дейтеранопия, дейтераномалия, протанопия, протаномалия) составляют подавляющее большинство случаев.
›Цветовая слепота чаще встречается у мужчин?
Да. Гены, кодирующие фотопигменты длинноволновых и средневолновых колбочек (OPN1LW и OPN1MW), расположены на X-хромосоме. Поскольку у мужчин есть только одна X-хромосома, одного дефектного аллеля достаточно для возникновения цветовой слепоты. У женщин две X-хромосомы, поэтому обе копии должны нести дефект — что делает цветовую слепоту у женщин значительно более редкой.
›Что такое ахроматопсия?
Ахроматопсия (монохроматизм палочек) — состояние, при котором все три типа колбочек нефункциональны, и зрение полностью зависит от палочковых клеток. Поражённые люди видят мир в оттенках серого, имеют очень низкую остроту зрения на ярком свету и зачастую крайне чувствительны к свету. Это чрезвычайно редкое состояние, затрагивающее примерно 1 человека на 30 000.
›Насколько точны симуляции цветовой слепоты?
Симуляции используют устоявшиеся матрицы линейного преобразования (Machado 2009), которые тесно соответствуют экспериментальным данным о воспринимаемых цветах дихроматов. Для целей дизайна и тестирования доступности точность более чем достаточна. Существует индивидуальная вариабельность — у некоторых людей более лёгкая аномальная трихроматия, а не полная дихроматия — поэтому рассматривайте симуляцию как консервативный наихудший сценарий.
›Как проектировать для людей с цветовой слепотой без полного перепроектирования?
Начните с аудита существующей палитры с помощью этого симулятора. Для любой пары образцов, которая выглядит одинаково при дейтеранопии или протанопии, спросите себя, поймёт ли пользователь ваш контент без различия цветов. Добавьте иконки, метки или узоры там, где это необходимо. Выбирайте контрастные оттенки, которые остаются различимыми — синий и оранжевый вместо красного и зелёного. Проверьте контрастность WCAG для всех пар текст/фон.
›Работает ли этот инструмент с именами цветов CSS или значениями HSL?
Этот инструмент принимает только шестнадцатеричные коды (#RRGGBB или #RGB). Для использования имён цветов CSS или значений HSL сначала преобразуйте их в шестнадцатеричный формат с помощью нашего Конвертера цветов, а затем вставьте результат сюда.
Похожие инструменты
Обновлено: