Симулятор зрения
Введите адрес страницы и посмотрите на неё восемью разными способами зрения, рядом со страницей без фильтров. Ссылки, предупреждения и графики, которые держатся только на цвете, сразу бросаются в глаза.
Три датчика и что бывает, когда одного нет
Сетчатка измеряет цвет тремя типами колбочек, каждый из которых наиболее чувствителен к своей полосе света: длинным волнам (красный), средним (зелёный) и коротким (синий). Мозг вычисляет цвет, сравнивая три сигнала. Если один тип отсутствует или смещён, часть этих сравнений становится невозможной, и цвета, которые различаются только по этой оси, начинают выглядеть одинаково.
Гены красных и зелёных колбочек находятся на X-хромосоме, поэтому примерно у 1 мужчины из 12 есть та или иная форма красно-зелёного нарушения, а у женщин примерно у 1 из 200. У большинства из них колбочка ослаблена, а не отсутствует. То, что они видят, находится где-то между нормальным зрением и полной симуляцией, показанной здесь.
Восемь режимов
| Режим | Что моделирует | Что обычно ломается |
|---|---|---|
| Нормальное зрение | Эталон, показан без фильтров | |
| Дейтеранопия | Нет работающих зелёных колбочек; вместе с лёгкими формами около 6% мужчин | Красный и зелёный цвета статусов, оранжевый рядом с зелёным |
| Протанопия | Нет работающих красных колбочек; около 2% мужчин вместе с лёгкими формами | Красный текст на тёмном фоне, который становится почти чёрным |
| Тританопия | Нет работающих синих колбочек; меньше 1 человека из 10 000 | Синий на фоне зелёного, жёлтый на фоне розового |
| Ахроматопсия | Только яркость. А также страница на монохромной электронной книге или чёрно-белой распечатке | Любой смысл, который передаёт оттенок |
| Слабое зрение | Сниженная резкость, как при чтении без очков | Мелкий текст, тонкие шрифты, иконки без подписей |
| Катаракта | Помутневший, пожелтевший хрусталик, часто после 60 лет | Бледно-серый текст, светло-синие ссылки |
| Экран на солнце | Телефон на улице в полдень | Всё, что имеет умеренный контраст |
Три режима дальтонизма используют матрицы преобразования, опубликованные Machado, Oliveira и Fernandes в 2009 году, при полной степени нарушения, применённые в линейном RGB, чтобы яркость оставалась верной. Остальные режимы построены на фильтрах CSS: оттенки серого для ахроматопсии, размытие в 2,5 пикселя для слабого зрения, размытие с сепией и сниженным контрастом для катаракты, сильно сниженный контраст с повышенной яркостью для солнца.
Проверка за пять минут
- Дейтеранопия, затем ссылки. Найдите ссылки внутри абзаца. Если их больше не отличить от окружающего текста, добавьте подчёркивание.
- Дейтеранопия, затем состояния. Посмотрите на ошибки форм, метки наличия товара, точки «в сети» и легенды графиков. Красное и зелёное сообщения должны отличаться ещё и иконкой или словом.
- Ахроматопсия. Убедитесь, что основная кнопка по-прежнему выделяется на фоне второстепенной. Если обе стали одинаково серыми, оттенок был единственным различием между ними.
- Слабое зрение. Заголовок, навигацию и главное действие всё ещё должно быть можно найти по форме и положению.
- Солнце, ширина телефона. Текст, который здесь исчезает, надо затемнить в первую очередь. Измерьте его в калькуляторе контрастности.
WCAG формулирует стоящее за всем этим правило в критерии успеха 1.4.1: цвет не должен быть единственным визуальным средством передачи информации.
Как делается превью и его ограничения
Наш сервер скачивает HTML (до 2,5 MB), удаляет все скрипты, фреймы и обработчики событий и отправляет результат вашему браузеру, который показывает его в изолированном фрейме (sandbox). Фрейм не может выполнять код или отправлять формы. Его изображения, шрифты и таблицы стилей ваш браузер запрашивает напрямую с исходного сайта.
У этого два побочных эффекта. Содержимое, которое сайт строит на JavaScript, например карусели, разделы с ленивой загрузкой или целые одностраничные приложения, может отсутствовать или выглядеть недоделанным. А некоторые веб-шрифты отказываются загружаться вне своего домена, так что гарнитура может отличаться от живой страницы.
Симуляция это приближение, показанное на вашем экране вашим глазам. Она хорошо показывает, где дизайн зависит от цвета. Она не может сказать, что воспринимает конкретный человек. Отзывы людей с нарушением цветового зрения или слабым зрением ценнее любого фильтра.
Частые вопросы
Какой тип дальтонизма самый распространённый?
Дейтераномалия, ослабленная реакция зелёных колбочек. Вместе с дейтеранопией, её полной формой, она встречается примерно у 6% мужчин. Поэтому инструмент открывается в режиме дейтеранопии.
Дальтоники видят мир чёрно-белым?
Почти никогда. Полное отсутствие цветового зрения (ахроматопсия) встречается примерно у 1 человека из 30 000. Большинство людей с нарушением видят множество цветов и путают определённые пары, обычно по красно-зелёной оси.
Какие цвета безопасно сочетать?
Пары, которые явно различаются по светлоте, остаются различимыми при любом фильтре, например тёмно-синий с жёлтым или оранжевым. Красный с зелёным, зелёный с коричневым и синий с фиолетовым это сочетания, которых стоит избегать, когда два цвета означают разное.
Почему моя страница в превью выглядит сломанной?
Превью работает без JavaScript. Если макет, меню или содержимое зависят от скриптов, этих частей не будет. Фильтры при этом правильно применяются ко всему, что отображается.
Можно ли проверить страницу, для которой нужен вход?
Нет. Наш сервер запрашивает страницу как анонимный посетитель и не имеет доступа к вашей сессии, так что получает только экран входа. Для страниц за входом используйте эмуляцию нарушений зрения, встроенную в инструменты разработчика Chrome или Firefox.