Контрастность и цвет · модуль 2
ДОСТУПНОСТЬ:
А-
А
А+
Обычный
Высокий
Интервал
СБРОС
WCAG 2.1 AA
ТР
Курсы 3
Расписание 2
Материалы 5
Достижения
Чат 1
Профиль
Настройки
Мои курсы > HTML-доступность > ARIA-атрибуты
Модуль 2 из 4 Урок 3/6
75%

Контрастность и цвет: делаем интерфейс видимым

1. Введение

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

Почему контраст критически важен:
  • Нарушения зрения. Около 4,5% населения Земли живут с дальтонизмом (цветовой слепотой). Еще больше людей имеют сниженную остроту зрения, катаракту, глаукому или другие нарушения, влияющие на восприятие контраста. С возрастом контрастная чувствительность неизбежно снижается — к 80 годам типичная острота зрения составляет около 20/40, что требует примерно в 1,5 раза более высокого контраста для комфортного чтения.
  • Условия освещения. На ярком солнце или при плохом освещении даже идеально читаемый в офисе текст может стать невидимым. Достаточный контраст — это запас прочности для любых условий.
  • Когнитивная нагрузка. Даже люди с идеальным зрением устают от низкоконтрастных интерфейсов. Чем выше контраст, тем меньше усилий требуется мозгу для распознавания символов.
Как глаз воспринимает контраст. Контраст — это не просто «светлее-темнее». Наше зрение реагирует на относительную яркость (relative luminance) — воспринимаемую яркость цвета с учетом того, как человеческий глаз по-разному чувствителен к разным длинам волн. Зеленый кажется нам ярче красного, а красный — ярче синего при одинаковой физической интенсивности. Именно поэтому контраст нельзя оценивать «на глаз» — нужны точные формулы и инструменты.

2. Коэффициент контрастности (CR)

Коэффициент контрастности (Contrast Ratio, CR) — это числовое значение, которое показывает, насколько сильно различаются по яркости два цвета. Он рассчитывается по формуле, принятой в стандарте WCAG:

CR = (L1 + 0.05) / (L2 + 0.05)

где:

  • L1 — относительная яркость более светлого цвета
  • L2 — относительная яркость более тёмного цвета

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

Относительная яркость каждого цвета рассчитывается по формуле:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

где R, G и B — это значения цветовых каналов после гамма-коррекции (sRGB-линеаризации).

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

Пороговые значения WCAG 2.2

WCAG 2.2 (уровень AA, обязательный для большинства проектов) устанавливает следующие требования:

Что проверяемМинимальный коэффициентУровень
Обычный текст (меньше 18pt или 14pt bold)4.5:1AA
Крупный текст (18pt+ или 14pt bold+)3:1AA
UI-компоненты (иконки, границы, состояния)3:1AA
Обычный текст (повышенный уровень)7:1AAA
Крупный текст (повышенный уровень)4.5:1AAA
Что считается крупным текстом?
  • Нежирный текст от 18pt (24px) и выше
  • Жирный текст от 14pt (около 18.66px) и выше
Почему именно такие цифры? Коэффициент 4.5:1 был выбран потому, что он компенсирует потерю контрастной чувствительности, типичную для людей со зрением 20/40 — это средний показатель для 80-летних людей. Коэффициент 7:1 (уровень AAA) рассчитан на людей со зрением 20/80. Важно: Требования к контрасту не изменились при переходе с WCAG 2.1 на WCAG 2.2. Что действительно добавилось в WCAG 2.2 — это новые критерии для индикаторов фокуса (насколько хорошо видно, какой элемент сейчас под клавиатурным фокусом).

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

Проверять контрастность «на глаз» — плохая идея. Вот основные инструменты, которые стоит использовать на разных этапах работы.

Онлайн-инструменты

  • WebAIM Contrast Checker — самый популярный бесплатный инструмент. Просто вводишь два цвета (hex-коды) и получаешь коэффициент + вердикт — проходит ли комбинация по WCAG AA и AAA. Не требует установки, работает в браузере.
  • WhoCanUse — инструмент, который показывает, как твоя цветовая комбинация воспринимается людьми с разными типами нарушений зрения (различные формы дальтонизма, низкое зрение и т.д.). Отличный способ визуализировать, почему доступность важна.
  • Contrast Rebellion — сайт-манифест против низкоконтрастных шрифтов. Полезен для вдохновения и понимания проблемы.

Плагины для Figma

  • Stark — комплексный плагин для проверки доступности прямо в Figma. Проверяет контрастность, симулирует цветовую слепоту, анализирует фокус и размеры тап-таргетов. Запускается через Plugins → Stark → Contrast или горячими клавишами.
  • Contrast — более легкий плагин, специализирующийся именно на проверке контрастности цветовых пар.

Браузерные инструменты

  • Axe DevTools — расширение для Chrome/Edge от Deque Systems. Сканирует страницу и находит проблемы с контрастностью (и другие нарушения доступности). Считается де-факто стандартом среди автоматизированных инструментов.
  • WAVE Evaluation Tool — расширение от WebAIM. Показывает контрастность прямо на странице с помощью цветового пипетки (eyedropper) и сообщает, проходит ли комбинация по WCAG. Поддерживает проверку с учетом прозрачности (alpha-канала).
  • Chrome DevTools — встроенный инструмент, который всегда под рукой:
    1. Открой DevTools (F12 или правый клик → «Проверить»)
    2. Выбери нужный элемент в панели Elements
    3. Перейди на вкладку Computed, найди свойство color и кликни на цветовой квадратик
    4. В открывшемся цветовом пикере DevTools покажет коэффициент контрастности
  • Chrome DevTools: CSS Overview — панель, которая показывает все цвета, используемые на странице, и отмечает проблемы с контрастностью.
  • TGPi Colour Contrast Analyser (CCA) — десктопное приложение, которое работает вне браузера и может проверять контрастность в любом приложении — не только на веб-страницах.

4. Типичные ошибки

Вот самые частые проблемы с контрастностью, которые видно в реальных проектах.

Серый на сером

Дизайнерский минимализм — главный враг доступности. Светло-серый текст на белом фоне или темно-серый на черном выглядят стильно, но нечитаемы. Проверяй любые оттенки серого через контраст-чекер — минимальный безопасный серый для белого фона — #767676 (дает 4.5:1). Лучше использовать #595959 или темнее.

Цветной текст на цветном фоне

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

Например, красный текст (#e00000) на белом фоне дает контраст около 4.0:1 — недостаточно для обычного текста.

Текст поверх фотографий

Изображения содержат участки разной яркости. Текст, который читается на одном участке фото, может стать невидимым на другом. Решения:

  • Добавлять полупрозрачную подложку под текст
  • Использовать тень (text-shadow) для улучшения читаемости
  • Размещать текст на однородном фоне в отдельном блоке

Техника G17 из WCAG рекомендует затемнять или осветлять область за текстом так, чтобы обеспечить нужный коэффициент контрастности.

Контраст только при наведении

Кнопка или ссылка, которые становятся читаемыми только при наведении курсора, недоступны для:

  • Пользователей клавиатуры (у них нет «наведения»)
  • Пользователей с нарушениями моторики
  • Мобильных пользователей (нет ховера)
Всегда обеспечивай достаточный контраст в состоянии по умолчанию.

5. Передача смысла не только цветом

WCAG Success Criterion 1.4.1 (Use of Color, уровень A) требует: цвет не должен быть единственным средством передачи информации.

Это значит, что если ты используешь цвет для обозначения чего-то важного, у пользователя должен быть второй способ понять это.

Поля ошибок

❌ Плохо: только красная рамка вокруг поля. Дальтоник может не увидеть красный цвет на фоне.

✅ Хорошо: красная рамка + иконка ошибки (❌ или ⚠️) + понятный текст ошибки под полем.

<!-- Плохо -->
<input class="error" />

<!-- Хорошо -->
<div class="field-error">
  <input aria-invalid="true" />
  <span role="alert">
    <span aria-hidden="true">⚠️</span>
    Email обязателен для заполнения
  </span>
</div>

Ссылки

❌ Плохо: ссылка отличается от обычного текста только цветом.

✅ Хорошо: ссылка выделена цветом и подчеркиванием (или другим визуальным маркером — жирностью, иконкой, рамкой).

/* Плохо */
a { color: blue; text-decoration: none; }

/* Хорошо */
a { color: blue; text-decoration: underline; }
/* Еще лучше */
a:not([class]) { text-decoration: underline; }

Графики и диаграммы

❌ Плохо: линии разного цвета без маркеров.

✅ Хорошо: линии разного цвета + разные маркеры (круги, квадраты, треугольники) + паттерны (штриховка, точки) + подписи данных напрямую на графике.

Индикаторы статуса

❌ Плохо: зеленый = успех, красный = ошибка, желтый = предупреждение.

✅ Хорошо: цвет + понятная иконка + текст.

<!-- Плохо -->
<span class="status-success"></span>

<!-- Хорошо -->
<span class="status-success">
  <span aria-hidden="true">✅</span>
  Готово
</span>

6. Практические рекомендации

Выбор цветовой палитры с запасом по контрасту

Не проектируй вплотную к минимальным значениям. Если WCAG требует 4.5:1 — стремись к 7:1 для обычного текста. Это даст запас прочности на случай:

  • Плохого калиброванного монитора
  • Яркого солнечного света
  • Возрастных изменений зрения у пользователя

Использование CSS-переменных

Вместо жестко закодированных цветов используй CSS Custom Properties. Это упрощает поддержку и позволяет быстро менять всю цветовую схему.

:root {
  --color-text-primary: #1a1a1a;
  --color-bg-primary: #ffffff;
  --color-text-secondary: #595959;
  --color-bg-secondary: #f5f5f5;
  --color-accent: #0066cc;
  --color-error: #cc0000;
}

body {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

/* Легко добавить темную тему */
[data-theme="dark"] {
  --color-text-primary: #f0f0f0;
  --color-bg-primary: #1a1a1a;
}

Тестирование в градациях серого

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

Как это сделать:
  • Mac: Настройки → Универсальный доступ → Дисплей → Цветовые фильтры → Оттенки серого
  • Windows: Параметры → Специальные возможности → Цветовые фильтры → Включить
  • Chrome DevTools: Rendering → Emulate vision deficiencies → Achromatopsia

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

Запас прочности: почему 7:1 лучше 4.5:1

Минимальные требования WCAG AA (4.5:1) — это нижняя граница, а не цель. Стремись к уровню AAA (7:1) для обычного текста. Это:

  • Улучшает читаемость для всех пользователей
  • Компенсирует потерю контраста при плохом освещении или некалиброванных мониторах
  • Делает интерфейс более универсальным без дополнительных усилий

7. Заключение

Контраст — не враг дизайна. Высокий контраст не означает уродство. Черный текст на белом фоне — классика, которая работает. Можно создавать красивые, стильные и одновременно доступные интерфейсы. Достаточный контраст — это про уважение к пользователю, про заботу о каждом, кто заходит на твой сайт.

Чек-лист для проверки

Перед сдачей проекта проверь:

  • Весь обычный текст имеет контраст ≥ 4.5:1
  • Весь крупный текст (18pt/24px и выше) имеет контраст ≥ 3:1
  • Все UI-компоненты (кнопки, границы полей, иконки) имеют контраст ≥ 3:1 с фоном
  • Никакая информация не передается только цветом — есть иконки, текст, паттерны
  • Ссылки имеют подчеркивание (или другой немодальный маркер) по умолчанию
  • Текст на фотографиях имеет подложку или достаточно контрастен на всех участках
  • Проверено в режиме оттенков серого

Ресурсы

  • WebAIM Contrast Checker — webaim.org/resources/contrastchecker
  • WCAG 2.2 — Understanding Contrast (Minimum) — w3.org/WAI/WCAG22/Understanding/contrast-minimum
  • WCAG 2.2 — Understanding Non-text Contrast — w3.org/WAI/WCAG22/Understanding/non-text-contrast
  • Contrast Rebellion — contrastrebellion.com
  • WhoCanUse — whocanuse.com
  • MDN: Color contrast — developer.mozilla.org
  • A11Y Project — Color Contrast — a11yproject.com/posts/color-contrast
Made on
Tilda