Цветовой контраст и доступность: практическое руководство

Ты выбираешь цвет, который отлично смотрится на мониторе. Выкатываешь. А потом кто-то говорит, что не может прочитать текст.

Это случается чаще, чем кажется. Примерно 1 из 12 мужчин и 1 из 200 женщин имеют ту или иную форму нарушения цветового зрения. Добавь экраны с низким контрастом, яркое солнце и стареющие глаза — и вдруг твой выбор цветов затрагивает множество людей.

Хорошая новость: для этого есть чёткие правила. Называются WCAG-требования к контрасту, и они проще, чем звучат.

Что такое коэффициент контраста?

Коэффициент контраста — это число, описывающее, насколько два цвета различаются по яркости. Он колеблется от 1:1 (нет контраста — одинаковый цвет) до 21:1 (максимальный контраст — чёрный на белом).

Глаза воспринимают не все различия в цвете одинаково. Коэффициент контраста учитывает, как человеческое зрение реально воспринимает яркость, а не просто математическую разницу цветов.

Краткая справка:

| Коэффициент контраста | Как выглядит | Проходит? | |---|---|---| | 1:1 – 2:1 | Почти невидимо | Нет | | 3:1 | Читаемо, но с напряжением | AA только для крупного текста | | 4.5:1 | Комфортное чтение | AA для обычного текста | | 7:1 | Очень чётко | AAA для обычного текста | | 21:1 | Максимум (чёрный на белом) | Всё |

AA vs. AAA: в чём разница?

WCAG определяет два уровня соответствия, важных для цвета:

Уровень AA (стандарт, к которому стремятся большинство сайтов):

• Обычный текст (менее 18pt): нужен коэффициент 4.5:1
• Крупный текст (18pt+ или 14pt+ жирный): нужен коэффициент 3:1
• UI-компоненты и графические объекты: нужен коэффициент 3:1

Уровень AAA (золотой стандарт):

• Обычный текст: нужен коэффициент 7:1
• Крупный текст: нужен коэффициент 4.5:1

Большинство организаций целятся в AA. AAA идеален, но может быть ограничивающим для дизайна — мало какие комбинации цветов достигают 7:1 и при этом хорошо выглядят.

Частые провалы контраста

Они постоянно встречаются в реальных проектах:

Светло-серый текст на белом фоне: тот самый утончённый, «элегантный» серый текст? Часто не проходит по контрасту. #999999 на белом — всего 2.85:1, не проходит даже для крупного текста.

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

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

Текст на изображениях: без тёмного оверлея или тени текста текст на фотографиях редко стабильно соответствует стандартам контраста.

Учёт дальтонизма

Коэффициенты контраста помогают, но не решают всё. Дальтонизм означает, что некоторые пользователи буквально не могут различить определённые пары цветов.

Не полагайся только на цвет для передачи информации:

• Красный/зелёный для ошибки/успеха? Добавь также иконки или текстовые метки
• Графики с цветовым кодированием? Добавь паттерны, подписи или разные формы
• Обязательные поля, отмеченные только красным? Добавь звёздочку или текст «(обязательно)»

Самые частые типы:

• Дейтеранопия (красно-зелёная, ~6% мужчин): красный и зелёный выглядят похоже
• Протанопия (красно-зелёная, ~2% мужчин): красный кажется тёмным/коричневатым
• Тританопия (сине-жёлтая, редко): синий и жёлтый трудно различить

Практические шаги для исправления цветов

Шаг 1: переведи свои брендовые цвета в hex с помощью конвертера цветов. Для проверки контраста нужны точные значения.

Шаг 2: проверь каждую комбинацию текст/фон. Не только основной текст — проверь кнопки, ссылки, подписи, метки форм, сообщения об ошибках.

Шаг 3: исправь провалы, подстраивая яркость. Обычно можно сохранить тот же оттенок и насыщенность, затемнив или осветлив для достижения нужного коэффициента.

Шаг 4: тестируй с симуляторами. Chrome DevTools имеет встроенный симулятор нарушений зрения (панель Rendering > Emulate vision deficiencies).

Шаг 5: проверь также свои SVG-графику и изображения. Иконки с плохим контрастом так же проблематичны, как и текст.

Быстрые победы

Если торопишься, эти безопасные комбинации всегда проходят AA:

• Чёрный (#000000) + белый (#FFFFFF) — 21:1
• Тёмно-серый (#333333) + белый — 12.6:1
• Белый текст + тёмно-синий (#003366) — 9.9:1
• Чёрный текст + светло-жёлтый (#FFF9C4) — 18.1:1
• Тёмно-зелёный (#2E7D32) + белый — 5.1:1

А эти часто проваливаются:

• Средний серый (#808080) + белый — 3.9:1 (не проходит AA обычный текст)
• Красный (#FF0000) + чёрный — 5.25:1 (проходит AA, но не AAA)
• Оранжевый (#FF8C00) + белый — 3.0:1 (не проходит AA обычный текст)

---

Доступность — это не просто соответствие нормам, а уверенность, что все могут реально пользоваться тем, что ты создаёшь. Начни с проверки коэффициентов контраста текста. Исправь очевидные провалы. Потом переходи к кнопкам, иконкам и второстепенному тексту. Маленькие изменения — большое влияние.