🎨
← Назад к руководствам

Доступный цветовой контраст: рекомендации WCAG для дизайнеров

· Теги: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Доступный цветовой контраст: рекомендации WCAG

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

Это руководство объясняет всё, что вам нужно знать о требованиях WCAG к цветовому контрасту, как им соответствовать и как создавать доступные интерфейсы без ущерба для визуального качества.

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

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

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

Коэффициент контрастности = (L1 + 0.05) / (L2 + 0.05)

Где L1 — относительная светимость более светлого цвета, а L2 — относительная светимость более тёмного цвета. Человеческий глаз более чувствителен к зелёному свету, чем к красному или синему, поэтому расчёт светимости по-разному взвешивает каналы.

Вам не нужно вычислять это вручную. Каждый инструмент проверки контрастности, включая наш конвертер цветов, делает это мгновенно.

Требования WCAG к контрасту

Руководство по доступности веб-контента (WCAG) определяет три уровня соответствия: A, AA и AAA. Требования к цветовому контрасту применяются на уровнях AA и AAA.

Уровень WCAG AA (рекомендуемый минимум)

AA — это минимальный стандарт для большинства веб-сайтов, требуемый законом во многих юрисдикциях (включая Европейский акт о доступности и нормативные акты по доступности в США, Канаде и Австралии).

| Категория текста | Минимальное отношение | Пример соответствующего серого на белом | |---------------|--------------|-------------------------------------| | Обычный текст (менее 18px / 14px жирный) | 4.5:1 | #767676 на белом | | Крупный текст (18px+ жирный или 24px+ обычный) | 3:1 | #9A9A9A на белом | | Компоненты UI (границы, иконки, поля форм) | 3:1 | Границы компонентов, индикаторы фокуса | | Недекоративная графика | 3:1 | Графики, инфографика, иконки |

Уровень WCAG AAA (повышенный)

AAA — это более высокий стандарт, обеспечивающий лучшую читаемость, особенно для пользователей с ослабленным зрением или проблемами контрастной чувствительности.

| Категория текста | Минимальное отношение | Пример соответствующего серого на белом | |---------------|--------------|-------------------------------------| | Обычный текст | 7:1 | #595959 на белом | | Крупный текст | 4.5:1 | #777777 на белом |

AAA не требуется для соответствия большинству нормативных актов, но рекомендуется для сайтов, обслуживающих пожилых людей или пользователей с нарушениями зрения.

Что охватывают эти требования

Требования WCAG к контрасту применяются к:

  • Текст — Весь основной текст, заголовки, подписи, метки и текст ссылок
  • Текст на изображениях — Текст, являющийся частью изображения (за исключением декоративного текста)
  • Компоненты UI — Кнопки, поля форм, ползунки, переключатели и их границы
  • Иконки — Важные иконки, передающие информацию (недекоративные)
  • Индикаторы фокуса — Контуры фокуса клавиатуры должны иметь контраст 3:1 относительно соседнего фона

Что эти требования НЕ охватывают

  • Логотипы — Текст, являющийся частью логотипа бренда или названия компании
  • Декоративные элементы — Чисто декоративные изображения без функционального назначения
  • Неактивные UI — Отключённые кнопки или элементы управления форм (хотя они всё равно должны быть воспринимаемы)
  • Сенсорный текст — Текст, являющийся частью фонового изображения, где текст не является существенным

Распространённые нарушения контраста и как их исправить

1. Светло-серый текст

Светло-серый текст на белом фоне — безусловно, самое распространённое нарушение контраста. Оттенок, такой как #CCCCCC на белом, имеет коэффициент контрастности всего 1.6:1 — значительно ниже минимума 4.5:1.

Исправление: Затемните серый текст. Для основного текста на белом стремитесь как минимум к #595959 (соответствует AAA). Даже #767676 (минимум AA для текста 14px) заметно темнее большинства «деликатных» серых вариантов.

2. Брендовые цвета, используемые для основного текста

Брендовые цвета часто слишком светлые при применении в качестве текста. Средне-синий, такой как #3366CC на белом, имеет коэффициент около 3.5:1 — ниже стандарта 4.5:1.

Исправление: Зарезервируйте брендовые цвета для заголовков и акцентов. Используйте почти чёрный (#1A1A1A до #333333) для основного текста. Проверьте, что любой цветной текст соответствует коэффициенту.

3. Индикаторы ссылок только цветом

Ссылки, отличающиеся от основного текста только цветом, не соответствуют Критерию успеха WCAG 1.4.1 (Использование цвета). Пользователи с дальтонизмом могут не воспринимать разницу.

Исправление: Всегда предоставляйте нецветовой индикатор для ссылок. Распространённые подходы:

  • Подчёркивание ссылок (самое надёжное решение)
  • Добавление иконки (стрелка или символ внешней ссылки)
  • Использование жирного начертания для встроенных ссылок
  • Фоновая подсветка

4. Текст поверх фоновых изображений

Текст, размещённый на фотографиях или градиентах, редко имеет достаточный контраст по всему изображению.

Исправление:

  • Добавьте полупрозрачный оверлей между изображением и текстом
  • Используйте text-shadow для тонкого эффекта обводки
  • Поместите текст в прямоугольный блок сплошного цвета
  • Убедитесь, что любая часть изображения, которая может оказаться за текстом, соответствует минимальному коэффициенту

5. Низкоконтрастный текст-заполнитель

Заполнители форм, такие как #BDBDBD на белом (1.9:1), распространены, но не соответствуют требованиям контраста.

Исправление: Затемните заполнители как минимум до #757575 (4.6:1). Ещё лучше — используйте метки вместо заполнителей: метки всегда видны и никогда не исчезают, когда пользователи начинают ввод.

Проверка цветового контраста

Автоматизированные инструменты

  • Browser DevTools — Chrome и Firefox DevTools имеют встроенную проверку контрастности. Проинспектируйте элемент и найдите коэффициент контрастности на панели «Styles» или «Accessibility».
  • Онлайн-проверки контрастности — Введите два цвета и мгновенно получите статус прохождения/непрохождения для AA и AAA.
  • Плагины для инструментов дизайна — Stark, A11y и Contrast доступны для Figma, Sketch и Adobe XD. Они проверяют контраст непосредственно в ваших дизайн-файлах.
  • Lighthouse — Аудит Google Lighthouse автоматически сообщает о нарушениях контраста.

Ручное тестирование

Автоматизированные инструменты могут проверять только контраст текста. Для полной проверки доступности:

  1. Выключите монитор — Можете ли вы различить все элементы интерфейса?
  2. Используйте фильтр оттенков серого — Правильно ли передаётся информация без цвета?
  3. Тестируйте с симулятором дальтонизма — Инструменты, такие как Colorblindly (расширение Chrome), показывают, как ваш сайт выглядит для пользователей с различными типами нарушений цветового зрения.
  4. Тестируйте под прямыми солнечными лучами — Высокий уровень внешнего освещения снижает воспринимаемый контраст.

Дизайн с учётом дальтонизма

Приблизительно 1 из 12 мужчин (8%) и 1 из 200 женщин (0.5%) имеют какую-либо форму нарушения цветового зрения. Наиболее распространённые типы:

  • Дейтеранопия (зелёная слепота, 6% мужчин) — Трудности с различением красного и зелёного
  • Протанопия (красная слепота, 2% мужчин) — Красный кажется темнее, путаница с зелёным
  • Тританопия (синяя слепота, редко) — Трудности с различением синего и жёлтого

Стратегии дизайна

  1. Никогда не полагайтесь только на цвет — Любая информация, передаваемая через цвет (состояния ошибок, индикаторы статуса, категории графиков), также должна передаваться через текст, иконки, узоры или положение.

  2. Избегайте проблемных комбинаций — Красный/зелёный, синий/фиолетовый, зелёный/коричневый и зелёный/синий — наиболее часто путаемые пары.

  3. Используйте узоры и текстуры — В графиках и диаграммах используйте пунктирные линии, штрихованные заливки и разные формы в дополнение к цвету.

  4. Добавляйте метки напрямую — В визуализациях данных подписывайте точки данных напрямую, а не полагайтесь на цветовую легенду.

  5. Тестируйте с симуляторами — Каждый дизайн должен быть протестирован через симуляторы дейтеранопии и протанопии перед публикацией.

Построение доступной цветовой системы

Шаг 1: Выберите доступные базовые цвета

Начните с цветов, которые естественно обеспечивают хороший контраст. Тёмно-синие, тёмно-зелёные и насыщенные красные могут быть доступными базовыми цветами при правильном сочетании.

Шаг 2: Создайте соответствующую шкалу

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

--text-primary: oklch(10% 0.01 0);    /* Почти чёрный, ~19:1 на белом */
--text-secondary: oklch(35% 0.02 0);  /* Тёмно-серый, ~9:1 на белом */
--text-muted: oklch(45% 0.02 0);      /* Средне-серый, ~5.5:1 на белом */
--text-disabled: oklch(60% 0.02 0);   /* Светло-серый, ~3:1 на белом */

Шаг 3: Проверьте каждую комбинацию

Каждая пара переднего плана и фона в вашей дизайн-системе должна быть проверена:

  • Основной текст на поверхности — минимум 4.5:1 (рекомендуется 7:1)
  • Вторичный текст на поверхности — минимум 4.5:1
  • Приглушённый текст на поверхности — минимум 3:1 (только для несущественного текста)
  • Интерактивные элементы — минимум 3:1 для состояний
  • Индикаторы фокуса — минимум 3:1

Практический чек-лист для разработчиков

  • [ ] Весь основной текст соответствует или превышает коэффициент контрастности 4.5:1
  • [ ] Весь крупный текст соответствует или превышает коэффициент контрастности 3:1
  • [ ] Ссылки имеют нецветовой индикатор (подчёркивание, иконка или изменение начертания)
  • [ ] Поля форм имеют видимые границы или фон (а не только текст-заполнитель)
  • [ ] Индикаторы фокуса имеют контраст 3:1 относительно соседнего фона
  • [ ] Состояния ошибок сочетают цвет с текстом или иконками
  • [ ] Графики и диаграммы используют узоры или прямые метки в дополнение к цвету
  • [ ] Текст-заполнитель соответствует минимуму 4.5:1
  • [ ] Отключённые элементы визуально различимы, но всё ещё воспринимаемы
  • [ ] Дизайн протестирован с симуляторами дальтонизма

Заключение

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

Используйте наш бесплатный онлайн-конвертер цветов со встроенной проверкой контрастности для проверки ваших цветовых комбинаций на соответствие стандартам WCAG AA и AAA.