В этой статье
Что такое контраст цветов и почему это важно
Контраст цветов — это разница в яркости между двумя цветами, обычно текстом переднего плана и его фоном. Достаточный контраст гарантирует, что текст читаем для всех, включая людей с пониженным зрением или дальтонизмом. Плохой контраст делает контент трудным или невозможным для чтения, исключая миллионы пользователей.
Руководство по обеспечению доступности веб-контента (WCAG) определяет минимальные коэффициенты контраста, гарантирующие читаемость для широкого диапазона зрительных возможностей. Соблюдение этих стандартов — не просто лучшая практика, а законодательное требование во многих юрисдикциях.
Как работают коэффициенты контраста WCAG
WCAG использует относительную яркость для расчёта коэффициентов контраста между двумя цветами. Формула даёт коэффициент от 1:1 (нет контраста, идентичные цвета) до 21:1 (максимальный контраст, чёрный на белом).
- Относительная яркость рассчитывается из линеаризованных значений sRGB по формуле: L = 0.2126R + 0.7152G + 0.0722B
- Коэффициент контраста: (L1 + 0.05) / (L2 + 0.05), где L1 — более светлый цвет, L2 — более тёмный
- Обычный текст (менее 18pt или 14pt полужирный) требует минимум 4.5:1 для AA и 7:1 для AAA
Попробуйте бесплатно — без регистрации
Проверить контраст →Уровни соответствия WCAG AA и AAA
WCAG определяет два уровня соответствия для контраста цветов. Уровень AA является минимальным стандартом, требуемым большинством нормативных актов по доступности, тогда как AAA обеспечивает повышенную доступность для пользователей с более серьёзными нарушениями зрения.
- AA обычный текст — требует коэффициента контраста не менее 4.5:1 для текста менее 18pt (или 14pt полужирный)
- AA крупный текст — требует не менее 3:1 для текста 18pt и более (или 14pt полужирный и более)
- AAA обычный текст — требует не менее 7:1 для наивысшего уровня читаемости
- AAA крупный текст — требует не менее 4.5:1 для крупного текста на повышенном уровне
- Нетекстовый контраст — компоненты интерфейса и графические объекты требуют не менее 3:1 по отношению к соседним цветам
Советы по доступному дизайну цветов
Дизайн с учётом доступности не означает жертвования эстетикой. Эти практические советы помогут создавать красивые дизайны, которыми смогут пользоваться все.
- Начните с контраста — сначала выберите цвета текста и фона, затем стройте палитру вокруг них
- Никогда не полагайтесь только на цвет — используйте иконки, паттерны или подписи вместе с цветом для передачи смысла
- Тестируйте с реальным контентом — текст-заполнитель может выглядеть хорошо, но реальный контент может выявить проблемы
- Рассматривайте тёмный режим отдельно — цвета, проходящие в светлом режиме, могут не пройти в тёмном и наоборот
- Используйте инструмент проверки контраста — автоматизированные инструменты обнаруживают проблемы быстрее ручной проверки
Часто задаваемые вопросы
Какой минимальный коэффициент контраста для соответствия WCAG?
Для WCAG 2.1 уровня AA обычный текст требует коэффициента контраста не менее 4.5:1, а крупный текст (18pt или 14pt полужирный) — не менее 3:1. Уровень AAA повышает эти требования до 7:1 и 4.5:1 соответственно. Большинство законов о доступности ссылаются на уровень AA как минимальный стандарт.
Важен ли контраст цветов для изображений и иконок?
Да. Критерий успеха WCAG 2.1 1.4.11 требует, чтобы компоненты интерфейса и графические объекты имели контраст не менее 3:1 с соседними цветами. Это включает иконки, границы полей, индикаторы фокуса и элементы диаграмм. Декоративные изображения освобождены от этого требования.
Как исправить низкий контраст, не меняя цвета бренда?
Вы можете изменить яркость цветов бренда, сохраняя тот же тон и насыщенность. Например, затемните светло-голубой для текста или осветлите тёмный фон. Другой подход — использовать цвета бренда для крупных декоративных элементов и нейтральные цвета с высоким контрастом для основного текста.