Проверка контраста (оценки WCAG AA / AAA)
Выберите цвет переднего плана и фона для расчёта соотношения контраста WCAG. Предварительный просмотр текста и четыре значка оценки (AA обычный, AA крупный, AAA обычный, AAA крупный) обновляются в реальном времени.
Как это работает
Как работает соотношение контраста
WCAG (Руководство по обеспечению доступности веб-контента) определяет контраст как соотношение между относительной яркостью двух цветов. Формула линеаризует каждый sRGB-канал, взвешивает их по чувствительности глаза человека (R 0,2126, G 0,7152, B 0,0722), затем вычисляет (более светлый + 0,05) / (более тёмный + 0,05). Результат варьируется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Расчёт выполняется в браузере по официальной формуле WCAG 2.x. Четыре значка оценки проверяются по порогам: AA — 4,5:1 (обычный) и 3:1 (крупный), AAA — 7:1 (обычный) и 4,5:1 (крупный). «Крупный текст» — это 24px / 18pt или более, либо 18,66px / 14pt жирным.
Почему важно минимально соответствовать AA
AA — юридически обязательный уровень во многих юрисдикциях (Закон о доступной среде РФ, EU EN 301 549, WCAG). Несоответствие AA для основного текста — наиболее распространённая проблема доступности и проще всего исправляется при проектировании, а не после запуска.
AAA рекомендован для длинного текста, государственных сервисов и интерфейсов с высокими ставками. Он строг — интуитивный выбор дизайнера «светло-серый на белом» обычно не проходит AAA. Если сайт в основном предназначен для беглого просмотра, целевой уровень — AA; если публикуются книги, статьи или критическая информация — AAA.
Распространённые ошибки
«На моём экране выглядит нормально.» Откалиброванные экраны, флуоресцентный офисный свет и использование смартфона на улице — всё это меняет воспринимаемый контраст. Используйте соотношение, а не глаз.
Проектирование тёмной темы путём инверсии hex-кодов. Инверсия меняет оттенок и ломает контраст. Заново проверяйте каждую цветовую пару после смены темы.
Доверие брендбукам. Многие фирменные палитры создавались до осознания требований WCAG. Если фирменный розовый на белом не проходит, предложите немного более тёмный розовый для основного текста, а оригинальный оставьте для декоративного использования.
Частые вопросы
›В чём разница между AA и AAA?
AA требует 4,5:1 для обычного текста и 3:1 для крупного. AAA ужесточает до 7:1 и 4,5:1. AAA рекомендован, но не всегда достижим.
›Что такое «крупный текст»?
WCAG определяет его как 18pt (24px) и больше, или 14pt (18,66px) жирным.
›Поддерживает ли инструмент прозрачность?
Пока нет. Выбирайте фактический цвет, который видит пользователь (передний план, наложенный на фон). Поддержка прозрачности может появиться позже.
›Почему мой бренд не проходит?
Многие фирменные палитры создавались из эстетических соображений, а не соображений доступности. Распространённые исправления: сделать акцентные цвета, используемые для текста, темнее; оставить светлые варианты для фонов или декоративных элементов.
›Соотношение то же самое, что «воспринимаемый контраст»?
Нет — WCAG 2.x использует упрощённую формулу на основе яркости. WCAG 3 (в разработке) использует APCA, которая лучше предсказывает воспринимаемый контраст, но ещё не стандартизирована.
›Какое соотношение для иконок или элементов управления?
WCAG 2.1 добавил минимум 3:1 для нетекстового контраста (иконки, элементы форм, индикаторы фокуса). Используйте тот же инструмент — достигайте или превышайте 3:1.
›Работает ли это для графиков?
Тот же порог применяется между соседними цветами, несущими смысл. Для визуализации данных 3:1 между соседними цветами — минимум по WCAG 1.4.11.
›Данные куда-нибудь отправляются?
Нет. Расчёт выполняется локально в браузере.
Похожие инструменты
Обновлено: