Представь, что ты открываешь сайт, а текст на нем едва различим — сливается с фоном, глаза напрягаются, читать невозможно. Для многих людей это не случайность, а постоянная реальность. Контраст — это не про эстетику, а про возможность пользоваться интерфейсом.
Почему контраст критически важен:
Нарушения зрения. Около 4,5% населения Земли живут с дальтонизмом (цветовой слепотой). Еще больше людей имеют сниженную остроту зрения, катаракту, глаукому или другие нарушения, влияющие на восприятие контраста. С возрастом контрастная чувствительность неизбежно снижается — к 80 годам типичная острота зрения составляет около 20/40, что требует примерно в 1,5 раза более высокого контраста для комфортного чтения.
Условия освещения. На ярком солнце или при плохом освещении даже идеально читаемый в офисе текст может стать невидимым. Достаточный контраст — это запас прочности для любых условий.
Когнитивная нагрузка. Даже люди с идеальным зрением устают от низкоконтрастных интерфейсов. Чем выше контраст, тем меньше усилий требуется мозгу для распознавания символов.
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:1
AA
Крупный текст (18pt+ или 14pt bold+)
3:1
AA
UI-компоненты (иконки, границы, состояния)
3:1
AA
Обычный текст (повышенный уровень)
7:1
AAA
Крупный текст (повышенный уровень)
4.5:1
AAA
Что считается крупным текстом?
Нежирный текст от 18pt (24px) и выше
Жирный текст от 14pt (около 18.66px) и выше
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 — встроенный инструмент, который всегда под рукой:
Открой DevTools (F12 или правый клик → «Проверить»)
Выбери нужный элемент в панели Elements
Перейди на вкладку Computed, найди свойство color и кликни на цветовой квадратик
В открывшемся цветовом пикере 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; }
Графики и диаграммы
❌ Плохо: линии разного цвета без маркеров.
✅ Хорошо: линии разного цвета + разные маркеры (круги, квадраты, треугольники) + паттерны (штриховка, точки) + подписи данных напрямую на графике.
Если в градациях серого интерфейс теряет смысл (непонятно, где ошибка, где успех, где ссылки) — значит, ты слишком полагаешься на цвет.
Запас прочности: почему 7:1 лучше 4.5:1
Минимальные требования WCAG AA (4.5:1) — это нижняя граница, а не цель. Стремись к уровню AAA (7:1) для обычного текста. Это:
Улучшает читаемость для всех пользователей
Компенсирует потерю контраста при плохом освещении или некалиброванных мониторах
Делает интерфейс более универсальным без дополнительных усилий
7. Заключение
Контраст — не враг дизайна. Высокий контраст не означает уродство. Черный текст на белом фоне — классика, которая работает. Можно создавать красивые, стильные и одновременно доступные интерфейсы. Достаточный контраст — это про уважение к пользователю, про заботу о каждом, кто заходит на твой сайт.
Чек-лист для проверки
Перед сдачей проекта проверь:
Весь обычный текст имеет контраст ≥ 4.5:1
Весь крупный текст (18pt/24px и выше) имеет контраст ≥ 3:1
Все UI-компоненты (кнопки, границы полей, иконки) имеют контраст ≥ 3:1 с фоном
Никакая информация не передается только цветом — есть иконки, текст, паттерны
Ссылки имеют подчеркивание (или другой немодальный маркер) по умолчанию
Текст на фотографиях имеет подложку или достаточно контрастен на всех участках
Проверено в режиме оттенков серого
8. Практические задания
Выполните задания, чтобы закрепить знания по контрастности и цвету.
Задание 1. Контрастность (критерий 1.4.3)
Дизайнер предложил следующие цветовые пары для текста на сайте. Какие из них соответствуют уровню AA (коэффициент контраста ≥ 4.5:1 для основного текста)? Отметьте проходящие варианты.
A. Черный текст (#000000) на белом фоне (#FFFFFF)
B. Серый текст (#777777) на белом фоне (#FFFFFF)
C. Белый текст (#FFFFFF) на темно-синем фоне (#1A237E)
D. Красный текст (#FF0000) на зеленом фоне (#00FF00)
Вариант
Коэффициент
Соответствие
A. Черный на белом
21:1
✅ Проходит
B. Серый (#777) на белом
4.48:1
✅ Проходит (минимально)
C. Белый на темно-синем
~15.5:1
✅ Проходит
D. Красный на зеленом
~2.3:1
❌ Не проходит
Пояснение: Для обычного текста требуется коэффициент минимум 4.5:1. Вариант B — на грани, но допустим. Вариант D проваливается из-за одинаковой яркости красного и зеленого (~2.3:1).
Задание 2. Передача смысла не только цветом (критерий 1.4.1)
На странице интернет-магазина статус заказа отображается только цветом: зеленый — «Доставлен», желтый — «В пути», красный — «Отменен». Какие проблемы это создает? Предложите решение.
Проблемы:
Пользователи с дальтонизмом (около 4,5% населения) могут не различать зеленый, желтый и красный.
Пользователи скринридеров не получат информацию о статусе.
Добавить иконки: ✅ «Доставлен», ⚠️ «В пути», ❌ «Отменен».
Добавить текстовую метку статуса рядом с цветным индикатором.
Использовать ARIA-атрибуты для скринридеров: aria-label="Статус заказа: Доставлен".
Задание 3. Контраст для крупного текста (критерий 1.4.3)
У вас есть заголовок размером 24px жирным шрифтом на фоне #4A6FA5. Какой минимальный коэффициент контраста требуется для уровня AA? Проверьте, проходит ли этот заголовок, если текст белый (#FFFFFF).
Требование: Для крупного текста (18pt+ или 14pt bold+) минимальный коэффициент для уровня AA — 3:1.
Проверка:
Белый текст (#FFFFFF) на фоне #4A6FA5 дает коэффициент 4.0:1.
4.0:1 ≥ 3:1 → ✅ Заголовок проходит уровень AA.
Пояснение: Для обычного текста потребовалось бы 4.5:1. Но для крупного текста требования ниже.
Задание 4. Тест «охота за критериями»
Для каждого из следующих барьеров найдите соответствующий критерий успеха WCAG и укажите одну достаточную технику для устранения барьера.
Барьер
Критерий WCAG (№ и название)
Техника (ID или описание)
Цвет используется как единственное средство передачи информации
Использовать семантический элемент (button, input) или добавить tabindex + обработчики Enter/Пробел
Недостаточный контраст
1.4.3 Контрастность (AA)
Изменить цветовую пару, чтобы достичь CR ≥ 4.5:1 для обычного текста или 3:1 для крупного
📚 Полный список источников по WCAG (русскоязычные ресурсы)
Официальные стандарты и переводы
Источник
Описание
Ссылка
WCAG 2.0 — Уполномоченный русский перевод
Официальный перевод, опубликованный 28 февраля 2013 года. Организатор перевода — Информационный центр ООН в Москве. Единственный авторизованный W3C перевод на русский язык.
Единственный МООК по веб-доступности на русском языке. Опирается на WCAG 2.1. Бесплатный, без ограничений по времени. Подходит для преподавателей, разработчиков и дизайнеров.
Бесплатный курс (~12 часов) на основе опыта Яндекса. 6 модулей: от основ инклюзии до этичной коммуникации. Для продакт- и проджект-менеджеров, дизайнеров, разработчиков.
Поиск по запросу «Яндекс Практикум инклюзия»
Секреты цифровой доступности
VK
Открытая платформа VK с 30+ видеоуроками и 20 практическими материалами. Основана на исследованиях и опыте VK.
Поиск по запросу «VK Секреты цифровой доступности»
Инструменты для проверки доступности
Инструмент
Описание
Ссылка
WAVE
Браузерное расширение для выявления ошибок доступности. Есть русскоязычные гайды.