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

Короче — о чем идет речь в этом руководстве

  1. Какие соотношения требует WCAG
  2. Почему большой текст может быть менее контрастным
  3. Как проверить контрастность на практике
  4. Как заранее выбрать доступную цветовую палитру

Какие коэффициенты требуются WCAG

WCAG определяет коэффициент контрастности как число от 1:1 (полное отсутствие контраста — одинаковый цвет) до 21:1 (максимально возможный контраст — чистый черный цвет на чистом белом). На уровне АА (обязательный уровень в большинстве мест, включая Израиль), требование составляет соотношение не менее 4.5:1 между обычным текстом и фоном за ним. При более строгом ААА уровень, требование возрастает до 7:1.

Почему допускается использование большого текста с меньшим контрастом

Крупный текст остается читаемым даже при более низкой контрастности, поэтому WCAG устанавливает для него более простой порог: 3:1 на уровне AA (вместо 4,5:1) и 4.5:1 на уровне ААА (вместо 7:1). «Крупный текст» определяется как текст размером 18 пунктов или больше (около 24 пикселей) или 14 пунктов или больше (около 18,7 пикселей), если он выделен жирным шрифтом. Например, большие заголовки могут «позволить» немного меньший контраст, чем обычный основной абзац, и при этом соответствовать требованиям.

Иллюстративная диаграмма Comparing contrast ratios Three text-on-background examples with different contrast ratios Contrast Ratio Between Text and Background Sample text 1.8:1 — ✕ fails Sample text 7.1:1 — ✓ meets AAA too Sample text 5.4:1 — ✓ meets level AA Regular text: at least 4.5:1 · Large text (24px+, or 18.7px bold): at least 3:1 Tools like the WebAIM Contrast Checker give you the exact ratio before you finalize a color palette
Три примера текста на фоне: слишком низкое соотношение (1,8:1) не соответствует даже базовому уровню; два других соотношения соответствуют требованиям AA и AAA соответственно.

Как проверить коэффициент контрастности на практике

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

💡 Практический совет

Не только текст: то же требование к контрастности (с более простым порогом, 3:1) также применимо к графическим компонентам пользовательского интерфейса, таким как контуры полей формы, функциональные значки и границы кнопок, а не только к буквам.

Как заранее выбрать доступную цветовую палитру

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

Хотите узнать, соответствуют ли ваши документы требованиям контрастности?

Наш инструмент проверяет цветовой контраст в рамках автоматического сканирования каждого PDF-файла на вашем сайте.

Сканируйте ваш сайт бесплатно ←