Дальтонизм, или нарушение цветового зрения — это «аномалия цветового зрения, влияющая на способность различать определённые оттенки, чаще всего красный и зелёный» (источник: INSERM, Национальный институт здоровья и медицинских исследований Франции). Это состояние затрагивает приблизительно 8% мужчин и 0,5% женщин в популяциях европейского происхождения — примерно 300 миллионов человек в мире.
Но сводить проблему контраста только к дальтонизму было бы ошибкой. Недостаточный контраст затрагивает всех: людей, которые смотрят в телефон на ярком солнце, уставших пользователей в конце дня, пожилых людей со снижающейся остротой зрения, и даже разработчиков, которые тестируют свой сайт на идеально откалиброванном мониторе, не осознавая, что 90% их пользователей имеют совсем другой экран.
Контраст — это не функциональная проблема. Ваша кнопка работает, ваша ссылка кликабельна, ваша форма отправляет данные. Но если никто не может прочитать текст или отличить кнопку от фона, функциональность бесполезна. Это визуальная проблема, и она решается визуальными инструментами.
Что дальтонизм реально меняет в восприятии сайта
Дальтонизм — это не полное отсутствие цветового зрения в большинстве случаев. Существует несколько типов, каждый из которых по-разному влияет на восприятие.
Дейтераномалия — самая распространённая форма. Она затрагивает примерно 6% мужчин и снижает чувствительность к зелёному. Зелёные и красные тона сливаются, оранжевые и жёлтые становятся трудноразличимыми. Это тип, о котором большинство дизайнеров имеют смутное представление, не всегда осознавая реальные последствия.
Протаномалия (примерно 1% мужчин) снижает чувствительность к красному. Красные оттенки выглядят темнее и сливаются с коричневыми и тёмно-зелёными. Сообщение об ошибке красным цветом на тёмном фоне может буквально исчезнуть для этих пользователей.
Тританомалия (менее 0,01% населения) влияет на восприятие синего и жёлтого. Она редка, но существует.
Ахроматопсия (восприятие в оттенках серого) встречается крайне редко, но представляет собой крайний случай, когда имеет значение только контраст яркости.
Для веб-сайта последствия конкретны и многочисленны.
Индикатор статуса, использующий только красный и зелёный (успех/ошибка), непригоден для дейтеранопа. Цветная ссылка без подчёркивания может быть невидимой, если её цвет сливается с окружающим текстом. Кнопка действия, цвет фона которой имеет достаточный контраст для нормального зрения, может стать нечитаемой при дейтераномалии.
И эти проблемы — не маргинальные случаи. При 8% затронутых мужчин в команде из 25 разработчиков статистически есть 1–2 дальтоника. В вашей базе из 100 000 пользователей примерно 4 000 мужчин воспринимают ваш сайт иначе, чем вы его проектировали.
Контраст по WCAG: числа, которые нужно знать
WCAG определяют минимальные коэффициенты контрастности между текстом и его фоном. Эти коэффициенты рассчитываются на основе относительной яркости двух цветов по шкале от 1:1 (нет контраста) до 21:1 (максимальный контраст, чёрный на белом).
Для уровня AA, наиболее часто требуемого нормативами:
Обычный текст (менее 18 пунктов или менее 14 пунктов полужирным) должен иметь коэффициент контрастности не менее 4.5:1. Крупный текст (18 пунктов и более или 14 пунктов полужирным и более) требует коэффициента не менее 3:1. Нетекстовые элементы интерфейса (иконки, границы полей, индикаторы состояния) также должны соблюдать коэффициент 3:1 (критерий 1.4.11).
Для уровня AAA требования строже: 7:1 для обычного текста и 4.5:1 для крупного текста.
Эти числа не произвольны. Они основаны на исследованиях зрительного восприятия и учитывают возрастное снижение чувствительности к контрасту. Человеку 80 лет нужен примерно втрое больший контраст, чем 20-летнему, чтобы прочитать тот же текст в тех же условиях.
Проблема в том, что эти коэффициенты рассчитаны для нормального цветового зрения. Контраст 4.5:1 между тёмно-красным текстом и тёмно-зелёным фоном технически соответствует критерию WCAG, но может быть недостаточным для дейтеранопа, который не различает эти два цвета. WCAG признают это в критерии 1.4.1 (использование цвета): информация не должна передаваться исключительно через цвет.
Поэтому проверки коэффициента контрастности недостаточно. Нужно также проверять контраст так, как его воспринимают люди с разными типами дальтонизма.
Почему классические инструменты недостаточны
Наиболее используемые инструменты анализа контраста (встроенная проверка контраста в Chrome DevTools, расширения типа WAVE или axe DevTools, аудиты Lighthouse) отлично справляются со своей задачей: вычислением коэффициента контрастности между двумя конкретными цветами.
Но у них есть ряд ограничений.
Они проверяют объявленный контраст, а не отрендеренный. Если фоновое изображение, градиент или эффект прозрачности снижают фактический контраст, эти инструменты могут не обнаружить этого. Белый текст на градиентном фоне от светло-голубого к тёмно-синему может иметь достаточный контраст вверху зоны, но недостаточный внизу. Инструмент измеряет одну пару цветов, а не реальность рендеринга.
Они не симулируют дальтонизм в контексте автоматизированного тестирования. Chrome DevTools позволяет симулировать дальтонизм вручную, но эта проверка не автоматизируется в CI/CD pipeline. Вы можете симулировать дейтераномалию для одной страницы за раз, но не для 200 страниц при каждом деплое.
Они не обнаруживают регрессии. Аудит Lighthouse даёт вам оценку на определённый момент. Он не предупреждает, когда разработчик меняет цвет фона, ухудшающий контраст. Вы узнаёте об этом только при следующем аудите — если кто-то вспомнит его запустить.
Они анализируют элементы по отдельности, а не общий рендеринг. Контраст элемента зависит от его визуального контекста. Серый текст средней яркости может быть отлично читаемым на белом фоне, но стать нечитаемым, если за ним разместят цветную панель после изменения макета. Инструменты анализа DOM не улавливают эти визуальные взаимодействия.
Визуальное тестирование с симуляцией дальтонизма
Автоматизированное визуальное тестирование предлагает принципиально иной подход. Вместо анализа CSS-кода оно захватывает реальный рендеринг страницы в том виде, в каком он отображается в браузере, а затем сравнивает его с эталоном для обнаружения любых изменений.
В применении к контрасту и дальтонизму этот механизм даёт мощные возможности.
Захват реального рендеринга. Визуальное тестирование делает скриншот того, что браузер реально отображает. Градиенты, фоновые изображения, прозрачность, тени — всё учитывается. Измеренный контраст — это реальный контраст, а не теоретический, рассчитанный из CSS.
Встроенная симуляция дальтонизма. Применяя фильтры симуляции дальтонизма (матрицы цветовой трансформации для дейтеранопии, протанопии и тританопии) к захваченным скриншотам, визуальное тестирование может проверить, что контраст остаётся достаточным для каждого типа цветового зрения. То, что было разовым ручным тестом, становится систематическим автоматизированным тестом.
Обнаружение регрессий. Если разработчик меняет цвет, фон или градиент, визуальное тестирование обнаруживает разницу. Если эта разница значительна (превышает настроенный порог допуска), тест не проходит и блокирует деплой. Регрессия контраста перехватывается до попадания в продакшн.
Кросс-браузерная проверка. Браузеры рендерят цвета неодинаково. Различия в рендеринге шрифтов, сглаживании и управлении цветовыми профилями могут влиять на воспринимаемый контраст. Кросс-браузерное визуальное тестирование фиксирует эти различия и гарантирует достаточный контраст во всех целевых браузерах.
Исчерпывающий охват. В отличие от ручного аудита, проверяющего несколько репрезентативных страниц, автоматизированное визуальное тестирование может охватить весь ваш сайт при каждом деплое. Каждую страницу, каждый компонент, при каждом условии симуляции.
Как интегрировать проверку контраста в ваш workflow
Настройка проверки контраста через визуальное тестирование следует структурированному подходу.
Определите критичные компоненты. Формы, кнопки действий, сообщения об ошибках и успехе, индикаторы состояния, навигационные ссылки — это элементы, где проблема контраста оказывает наибольшее влияние на пользовательский опыт. Начните с них.
Создайте базовые снимки в нормальных условиях. Захватите ваши страницы и компоненты в их эталонном состоянии. Эти скриншоты служат точкой сравнения для обнаружения будущих регрессий.
Добавьте базовые снимки с симуляцией дальтонизма. Для каждой критичной страницы или компонента создайте дополнительные базовые снимки с фильтрами симуляции: дейтеранопия, протанопия и тританопия. Это даёт вам три дополнительных набора снимков, отражающих то, что ваши дальтоники реально видят.
Установите строгие пороги допуска. Для тестов контраста допуск к различиям должен быть низким. Изменение цвета на несколько оттенков может опустить коэффициент контрастности ниже порога WCAG. Порог различия в 1–2% подходит для таких тестов.
Интегрируйте в CI/CD. Настройте тесты для автоматического запуска при каждом pull request. Если тест контраста не проходит, pull request блокируется до исправления. Это единственный способ гарантировать, что регрессии контраста не попадут в продакшн.
Обучайте команду. Главное препятствие для цветовой доступности — не техническое, а незнание. Делитесь результатами тестов симуляции дальтонизма с вашими дизайнерами и разработчиками. Покажите им наглядно, что видят дальтоники. Осознание меняет поведение навсегда.
Такой инструмент, как Delta-QA, позволяет настроить этот мониторинг без продвинутых технических навыков. Вы настраиваете свои страницы, условия тестирования и пороги допуска в визуальном интерфейсе. Захват и сравнение выполняются автоматически.
За пределами дальтонизма: контраст как универсальная проблема
Дальтонизм — наиболее документированный случай, но контраст затрагивает гораздо более широкую аудиторию.
Условия освещения. Согласно исследованию Google (2018), 70% времени использования мобильных устройств проходит вне оптимальных условий освещения. То, что читается в кондиционированном офисе, становится нечитаемым на ярком солнце.
Старение. В 60 лет количество света, достигающего сетчатки, уменьшается примерно на треть по сравнению с 20 годами. Пожилые люди всё активнее используют цифровые технологии.
Зрительная усталость. После многих часов перед экраном способность различать слабые контрасты снижается. Это задокументированное явление, затрагивающее практически всех офисных работников.
Качество экранов. Дешёвые экраны, проекторы в переговорных, интерактивные киоски — реальный контраст значительно варьируется в зависимости от оборудования.
Проектировать с учётом контраста — это не просто соблюдать WCAG, чтобы избежать судебного иска. Это признание того, что читаемость — предварительное условие любого взаимодействия, а оптимальные условия чтения — исключение, а не правило.
FAQ
Как узнать, есть ли у моего сайта проблемы с контрастом для дальтоников?
Самый прямой способ — симулировать различные типы дальтонизма и визуально проверить результат. Chrome DevTools предлагает эту функцию в ручном режиме (вкладка Rendering, Emulate vision deficiencies). Для систематической и автоматизированной проверки визуальное тестирование со встроенными фильтрами симуляции позволяет охватить весь сайт при каждом деплое.
Гарантирует ли коэффициент контрастности WCAG читаемость для дальтоников?
Не обязательно. Коэффициент контрастности WCAG основан на относительной яркости, которая не зависит от оттенка. Контраст 4.5:1 между двумя цветами с достаточно различающейся яркостью соответствует стандарту, но если эти цвета сливаются при дейтеранопии, текст может оставаться трудноразличимым. Критерий 1.4.1 WCAG дополнительно требует, чтобы цвет не был единственным средством передачи информации.
Какие типы дальтонизма нужно тестировать в первую очередь?
Дейтераномалия и дейтеранопия (путание красного и зелёного, связанное с зелёным каналом) затрагивают примерно 6% мужчин и являются приоритетом. Протаномалия и протанопия (путание красного и зелёного, связанное с красным каналом) затрагивают примерно 2% мужчин. Тританопия (путание синего и жёлтого) очень редка и представляет собой дополнительный тест. Тестирование как минимум дейтеранопии охватывает большинство случаев.
Может ли визуальное тестирование заменить ручной аудит контраста?
Визуальное тестирование обнаруживает регрессии контраста (изменение, ухудшающее контраст относительно базового снимка). Оно не выполняет расчёт коэффициента контрастности для каждой пары текст/фон. Два подхода дополняют друг друга: ручной или автоматизированный аудит (через axe-core) выявляет начальные нарушения, а визуальное тестирование предотвращает будущие регрессии.
Как избежать проблем с контрастом ещё на этапе дизайна?
Три фундаментальных правила: никогда не использовать цвет как единственный индикатор (всегда добавлять текст, иконку или паттерн), использовать цветовые палитры, проверенные на дальтонизм (инструменты типа Sim Daltonism или Color Oracle позволяют проверять в реальном времени), и всегда проверять коэффициент контрастности перед утверждением выбора цвета. Современные design systems интегрируют эти проверки в свои цветовые токены.
Сколько людей реально затронуты проблемами контраста?
Помимо 300 миллионов дальтоников в мире, проблемы контраста потенциально затрагивают каждого в зависимости от условий использования. ВОЗ оценивает, что 2,2 миллиарда человек имеют нарушения зрения, включая 1 миллиард случаев нескорректированной пресбиопии. И любой пользователь, смотрящий на экран в неблагоприятных условиях освещения, временно страдает от недостаточного контраста.
Для углубления
- Визуальное тестирование и изображения Retina: если вы не тестируете в HiDPI, вы не видите то, что видят ваши пользователи
- Визуальное тестирование Remix: почему full-stack фреймворк делает визуальное тестирование ещё более критичным
- Визуальное тестирование для Ruby on Rails: почему view specs недостаточны и как визуальное тестирование заполняет пробел
- Визуальное тестирование Shift-Right: почему визуальное тестирование не заканчивается на деплое
Заключение
Контраст — это визуальная проблема. Не функциональная, не структурная, не проблема кода. Это проблема того, что люди видят, когда смотрят на ваш сайт, в их реальных условиях использования, с их реальным зрением.
Инструменты анализа кода обнаруживают нарушения коэффициентов контрастности в CSS. Это необходимо, но недостаточно. Визуальное тестирование проверяет контраст в реальном рендеринге, с симуляцией дальтонизма, во всех браузерах и при всех разрешениях, автоматизированно и непрерывно.
8% мужчин — дальтоники. 100% пользователей затронуты условиями освещения, зрительной усталостью и различным качеством экранов. Контраст — не нишевая тема. Это основа читаемости вашего интерфейса.