Контраст и читаемость

Контраст текста и фона — минимальное соотношение яркости, при котором текст остаётся читаемым для людей с ослабленным зрением; регулируется стандартом WCAG.

Зачем нужно

Плохой контраст — одно из самых распространённых нарушений доступности (a11y). Он затрудняет чтение для пожилых пользователей, людей с нарушениями зрения, при использовании устройства при ярком солнечном свете. WCAG 2.1 задаёт конкретные числовые требования к контрасту, нарушение которых делает сайт недоступным для части аудитории.

Где используется

  • Весь текстовый контент: параграфы, заголовки, подписи
  • Интерактивные элементы: кнопки, ссылки, поля форм
  • Иконки, несущие смысл
  • Placeholder-текст в полях ввода

Требования WCAG

WCAG 2.1 AA (минимальный уровень)

Тип текста Минимальный контраст
Обычный текст (< 18px / < 14px bold) 4.5:1
Крупный текст (≥ 18px / ≥ 14px bold) 3:1
Элементы UI (кнопки, поля, иконки) 3:1
Декоративный текст / логотипы Нет требований

WCAG 2.1 AAA (расширенный уровень)

Тип текста Требование
Обычный текст 7:1
Крупный текст 4.5:1

Расчёт контраста

Контраст рассчитывается по формуле: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость (luminance) двух цветов. Проверять вручную не нужно — существуют инструменты.

Практические примеры

HTML-разметка не влияет на контраст напрямую — это зона CSS

<!-- Разметка -->
<p class="caption">Подпись к изображению</p>
<button class="btn-primary">Отправить</button>

/* Недостаточный контраст — ПЛОХО */
.caption { color: #aaaaaa; background: #ffffff; } /* ~2.3:1 */

/* Достаточный контраст — ХОРОШО */
.caption { color: #767676; background: #ffffff; } /* 4.54:1 */

/* Кнопка */
.btn-primary {
  color: #ffffff;
  background: #1a73e8; /* контраст с белым ~4.7:1 — OK */
}

Placeholder — особый случай

/* Placeholder часто слишком светлый по умолчанию */
input::placeholder {
  color: #767676; /* минимум для WCAG AA */
}

Dark mode — проверять оба режима

@media (prefers-color-scheme: dark) {
  body {
    color: #e8eaed;       /* на тёмном фоне */
    background: #202124;
  }
}

Инструменты проверки контраста

  • WebAIM Contrast Checker — ввести hex-коды вручную
  • Chrome DevTools → Elements → Computed → Color: показывает контраст
  • axe DevTools (расширение) — автоматическое сканирование страницы
  • Figma → плагины Contrast, Stark — на этапе дизайна

Частые ошибки

Ошибка Почему плохо Как правильно
Серый текст на белом фоне без проверки Может не проходить WCAG AA Проверяй каждый цветовой вариант
Текст поверх фотографии без подложки Контраст непредсказуем Добавляй полупрозрачную подложку или shadow
Ориентация только на «выглядит нормально» Не учитывает слабовидящих Используй инструменты с числовым контрастом
Не проверять тёмную тему В dark mode контрасты меняются Тестируй оба режима

Связанные темы

Ресурсы