Контраст и доступность цвета

Если текст плохо читается на фоне, не важно, как красив цвет. Контраст — это не вкус, а измеримая величина.

«Цвет нельзя использовать как единственный способ передать информацию». — принцип WCAG

Контраст между текстом и фоном измеряется коэффициентом от 1:1 (нет контраста) до 21:1 (чёрное на белом). Стандарт доступности WCAG требует минимум 4.5:1 для обычного текста и 3:1 для крупного (от 18px или 14px жирного) на уровне AA. Это не каприз: низкий контраст — самая частая ошибка доступности в вебе.

Почему это касается всех

Плохой контраст бьёт не только по людям со слабым зрением. Любой человек на ярком солнце с телефоном, в дешёвом мониторе или просто уставший — все они теряют бледный серый текст. Доступный контраст делает интерфейс лучше для всех, а не только для меньшинства.

  ШКАЛА КОНТРАСТА (текст на фоне)

  1:1   ░ серое на сером   — не видно
  3:1   ▒ минимум для крупного
  4.5:1 ▓ минимум для обычного (AA)
  21:1  █ чёрное на белом  — максимум

  Цельтесь не ниже 4.5:1 для текста

Не только цветом

Около 8% мужчин не различают красный и зелёный. Если «ошибка» отмечена только красным, а «успех» только зелёным, для них это одинаковые поля. Дублируйте смысл: иконка, текст, форма. Ссылку выделяйте не только цветом, но и подчёркиванием.

  ПЛОХО: смысл только цветом
  [ красное поле ]   [ зелёное поле ]

  ХОРОШО: цвет + иконка + текст
  [ ✗ Ошибка ]       [ ✓ Готово ]

Как делают ПЛОХО

Светло-серый текст #aaaaaa на белом фоне «для воздушности», обязательные поля помечены только красной рамкой. Часть людей не видит ни текста, ни того, какое поле незаполнено.

Как делают ХОРОШО

Текст тёмный, контраст не ниже 4.5:1, ошибка показана красной рамкой плюс иконкой и подписью «Заполните поле». Проверяют палитру контраст-чекером ещё на этапе макета.

Случай	Минимум по WCAG AA
Обычный текст	4.5:1
Крупный текст (18px+ / 14px bold)	3:1
Иконки и границы элементов	3:1

Чек-лист

Контраст текста проверен и не ниже 4.5:1.
Смысл не передаётся одним только цветом.
Ссылки отличимы не только цветом (подчёркивание).
Палитру проверяю контраст-чекером в макете.

Проверять контраст на глаз бесполезно — то, что кажется читаемым вам на дорогом мониторе в тёмной комнате, развалится на дешёвом экране при дневном свете. Поэтому держите под рукой чекер контраста: он есть прямо в браузерных инструментах разработчика, в плагинах для дизайн-редакторов и на сайтах вроде WebAIM. Привычка проверять цифру, а не доверять ощущению, отличает профессионала.

Около 8% мужчин плохо различают цвета, и самые частые формы — дейтеранопия и протанопия — путают именно красный с зелёным. Значит, «зелёное поле — верно, красное — ошибка» для миллионов людей выглядит одинаково. Решение простое: добавляйте дублирующий сигнал — иконку галочки или крестика, подпись, штриховку. Тогда смысл считывается даже в чёрно-белой распечатке.

Отдельная ловушка — текст поверх фотографий и градиентов. Фон неоднороден: над светлым участком буквы тонут, над тёмным читаются, и контроль теряется. Лечится подложкой-затемнением или полупрозрачной плашкой под текстом. И помните, что низкий контраст вредит всем, а не только людям с особенностями зрения: на ярком солнце экран телефона выцветает, и бледно-серый текст исчезает у любого. Плюс за доступностью теперь стоит и юридическое давление — законы вроде ADA и стандарт WCAG всё чаще делают контраст не пожеланием, а обязанностью.

Сделайте проверку контраста таким же обязательным шагом, как проверку орфографии в тексте. Это занимает секунды, а спасает от самой массовой ошибки доступности в вебе. Полезно с самого начала закладывать в палитру пары «текст-фон», которые гарантированно проходят порог, и не полагаться на «потом подправим». И всегда дублируйте смысл, который вы передаёте цветом: иконкой, подписью, формой. Тогда ваш интерфейс останется понятным и для человека с особенностями зрения, и для любого пользователя на ярком солнце или дешёвом экране — то есть в реальных, а не лабораторных условиях.

Итог

Контраст и независимость от цвета — это не «дополнительная опция для инвалидов», а базовое качество. Доступный интерфейс удобнее всем и в любых условиях.

Доступный контраст и независимость от цвета — это не дополнительная опция для меньшинства, а базовое качество, которое выручает каждого. Сделайте проверку контраста таким же рефлексом, как проверку орфографии.