Загрузка...
Загрузка...
Руководство по требованиям WCAG к контрасту цветов: уровни AA и AAA, коэффициенты контрастности, инструменты проверки и практические рекомендации.
Практическое руководство по созданию цветовых палитр с учётом WCAG: выбор базовых цветов, генерация оттенков, проверка контраста и инструменты.
CSS & ДизайнСравнение форматов цветов в веб-разработке: HEX, RGB, HSL, HSV. Когда какой формат выбирать, конвертация и практические рекомендации.
Веб-разработкаПолное руководство по веб-доступности для разработчиков. Стандарты WCAG, практические рекомендации, юридические аспекты и влияние доступности на SEO.
CSS & ДизайнПолное руководство по CSS box-shadow: синтаксис, множественные тени, inset, размытие, распространение. Практические примеры и приёмы для веб-дизайна.
Поделитесь с коллегами или изучите другие материалы блога
Контраст текста и интерактивных элементов — один из базовых критериев доступности. WCAG (Web Content Accessibility Guidelines) задаёт минимальные коэффициенты контрастности для разных уровней соответствия. В этой статье рассмотрены требования, формулы расчёта и способы проверки.
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Крупный текст — минимум 18px обычного начертания или 14px полужирного.
Коэффициент контрастности вычисляется по относительной яркости (luminance):
(L1 + 0.05) / (L2 + 0.05)
где L1 — яркость более светлого цвета, L2 — более тёмного. Результат от 1:1 (нет контраста) до 21:1 (чёрный на белом).
| Фон | Текст | Контраст |
|---|---|---|
| #ffffff | #000000 | 21:1 |
| #ffffff | #333333 | 12.6:1 |
| #ffffff | #666666 | 5.7:1 |
| #ffffff | #999999 | 2.8:1 (не проходит AA) |
| #3b82f6 | #ffffff | 4.5:1 (на границе AA) |
| #2563eb | #ffffff | 5.1:1 |
Используйте формулу относительной яркости. Для sRGB:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
где R, G, B — линейные значения каналов (гамма-коррекция применяется к каждому каналу).
Сервис Color Contrast на rechecker.ru позволяет ввести цвета (HEX, RGB, HSL) и получить коэффициент контрастности, а также рекомендации по WCAG.
Для конвертации между форматами цветов используйте Color Converter.
Кнопки, ссылки и элементы форм должны иметь контраст минимум 3:1 с фоном. Для состояний :focus и :hover также рекомендуется соблюдать контраст.
Элементы, не несущие информации (декоративные линии, иконки без смысловой нагрузки), не подпадают под требования контраста. Но если иконка передаёт смысл, контраст обязателен.
Требования контраста не распространяются на логотипы и фирменные знаки. Остальной текст на странице должен соответствовать WCAG.
При градиентном или сложном фоне выбирайте самый проблемный участок (минимальный контраст) и проверяйте его. При необходимости добавьте полупрозрачный overlay под текст.
При наложении полупрозрачного текста на фон эффективный контраст зависит от фона под ним. Проверяйте итоговый цвет после композитинга. Для overlay-текста на изображениях используйте затемнение или размытие фона.
Библиотеки вроде Material UI, Chakra UI задают цвета по умолчанию. Проверяйте кастомные темы на соответствие WCAG. Переопределение цветов может нарушить контраст.
Создание доступных палитр с нуля — в Как создать доступную цветовую палитру для сайта.
Для ручной проверки контраста можно использовать формулу WCAG. Сначала преобразуйте sRGB в линейные значения:
R_lin = R <= 0.03928 ? R/12.92 : ((R+0.055)/1.055)^2.4
Аналогично для G и B. Затем относительная яркость:
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Коэффициент контрастности: (L1 + 0.05) / (L2 + 0.05), где L1 — светлый, L2 — тёмный.
При наложении текста на изображение контраст меняется в зависимости от области. Варианты:
Текст 18px и выше (14px полужирный) может иметь контраст 3:1 для уровня AA. Это не освобождает от проверки — некоторые пользователи увеличивают размер шрифта в браузере, и контраст может измениться.
Декоративные изображения (фон, иллюстрации без смысловой нагрузки) не подпадают под требования контраста. Но если изображение содержит текст или важную информацию — контраст обязателен.
Исключение WCAG: логотипы и фирменные знаки не требуют минимального контраста. Остальной контент на странице должен соответствовать.
Инструменты вроде axe, WAVE, Lighthouse проверяют контраст автоматически. Они не заменяют ручную проверку: автоматика может пропустить сложные случаи (градиенты, overlay, динамический контент).
WCAG 2.2 уточняет: графические объекты и компоненты интерфейса должны иметь контраст минимум 3:1 с соседними цветами. Иконки, кнопки, чекбоксы, границы — всё подпадает под это требование. Если иконка передаёт важную информацию, контраст должен быть не ниже 3:1.
С возрастом контрастная чувствительность снижается. Пользователи 40+ и 60+ лет хуже различают низкоконтрастный текст. Рекомендация AAA (7:1) особенно полезна для аудитории с возрастными изменениями зрения.
Помимо Color Contrast на rechecker.ru, используйте:
Требования WCAG ориентированы на экран. Для печатных материалов действуют свои стандарты (например, ISO 9241), но принцип достаточного контраста сохраняется.
Нужно ли соблюдать контраст для placeholder в полях ввода? Рекомендуется. Placeholder с низким контрастом затрудняет чтение. Многие гайдлайны рекомендуют контраст не ниже 4.5:1 или хотя бы 3:1.
Что делать, если бренд-цвет не проходит проверку? Используйте его для крупных элементов, фона, декора. Для текста и мелких элементов подберите контрастный цвет из палитры или затемнённый/осветлённый вариант.
Как проверить контраст в Figma? Плагины Contrast и Stark позволяют проверять контраст между выбранными слоями. Интегрируйте проверку в процесс дизайна.
На мобильных экранах яркость и угол обзора влияют на восприятие контраста. На улице при ярком солнце низкоконтрастный текст становится нечитаемым. Рекомендуется запас по контрасту для мобильной версии.
Добавьте проверку контраста в пайплайн: axe-core, pa11y или Lighthouse в headless-режиме. Падение сборки при нарушении контраста предотвращает регрессии.
Элементы в состоянии :focus должны быть видимы. Контур фокуса (outline) должен иметь контраст минимум 3:1 с фоном. Не удаляйте outline без замены на видимую альтернативу.
Ссылки, отличающиеся только цветом от основного текста, должны иметь контраст 4.5:1 с фоном. Дополнительное подчёркивание улучшает восприятие и удовлетворяет критерию «не только цвет».