Проверка контраста палитры (до 12 цветов)

Обычная проверка контраста отвечает на один вопрос об одной паре. У бренда десяток цветов и десятки пар. Введите палитру, до 12 цветов, и таблица покажет коэффициент контраста WCAG для каждой пары: какие пары безопасны для текста, а какие годятся только для крупного текста, иконок и рамок. Расчёт идёт в вашем браузере; цвета никуда не отправляются.

Как вводить цвета

Один цвет на строку или через точку с запятой. Название перед двоеточием необязательно: Primary: #2f47d9. Поддерживаются hex (и с альфа-каналом), rgb(), rgba(), hsl(), hsla(), названия цветов вроде navy и CSS-переменные, скопированные из таблицы стилей, например --brand-500: #2f47d9;. Строка, которую не удалось прочитать, показана под полем, чтобы опечатка не потеряла цвет незаметно. Полупрозрачные цвета сначала смешиваются с фоном.

Как читать матрицу

Строки — цвета текста, столбцы — фоны. В каждой ячейке маленькая картинка пары, коэффициент и высший достигнутый уровень:

Коэффициент считается по формуле WCAG 2.x и отбрасывается, а не округляется, до двух знаков: 4,49 — это не 4,5. У каждой ячейки есть и текст для программ экранного доступа («Ink на Paper: 16,1 : 1, AAA»), а у таблицы есть заголовки строк и столбцов, поэтому её можно читать ячейка за ячейкой с клавиатуры.

Фильтр и экспорт

Выберите уровень, которого пара должна достичь, чтобы считаться прошедшей, и отметьте «Показывать в матрице только прошедшие пары», чтобы скрыть остальные. Список под матрицей содержит прошедшие пары, лучшие первыми. Копировать как CSS-переменные даёт палитру как пользовательские свойства с прошедшими парами в комментарии; Копировать как таблицу Markdown даёт прошедшие пары для страницы дизайн-системы или pull request.

Чего матрица не скажет

• Состояния элементов. Цвета при наведении, фокусе, нажатии, посещённой ссылки и отключённого состояния — отдельные пары; добавьте их отдельными строками.
• Неоднородный фон. Текст на фото или градиенте проверяйте на самом светлом и самом тёмном месте в проверке контраста, которая умеет брать цвета с изображения.
• Смысл, переданный только цветом. Красная ошибка и зелёный успех одинаковой яркости похожи для многих людей. WCAG требует ещё один признак, например иконку или текст (1.4.1 Использование цвета).
• Контраст на ваших реальных страницах. Проходящую палитру всё равно можно применить неправильно. Проверяйте живую страницу в проверке WCAG.

Это автоматический расчёт, а не полный аудит, и не юридическая консультация.

Как собрать палитру, которая проходит

Начните с двух опор: тёмных чернил для текста и светлой бумаги для фона. Проверьте цвет бренда относительно обоих, потому что большинство цветов проходит только с одной стороны. Для каждого цвета бренда подготовьте более тёмный оттенок для текста на белом и более светлый для текста на тёмном. Оставьте оттенок 3 : 1 для рамок и иконок, ведь контраст нетекстовых элементов относится к рамкам полей и кольцам фокуса. Важно не то, какая пара разрешена в теории, а до каких пар тема доходит на практике.

По EAA и немецкому BFSG стандарт EN 301 549 берёт контраст WCAG уровня AA, поэтому ориентируйтесь на 4,5 : 1 и 3 : 1. AAA не требуется. Pandus проверяет цвета, которые ваши страницы действительно используют, на каждой странице каждую неделю.

Частые вопросы

Сколько цветов можно ввести?

До 12. Для 12 цветов в матрице 132 пары. Если ввести больше, берутся первые 12, а проверка сообщит, сколько пропущено.

По какой формуле работает матрица?

По коэффициенту контраста WCAG 2.x, (L1 + 0,05) / (L2 + 0,05), где L — относительная яркость двух цветов, с отбрасыванием до двух знаков. На эту формулу ссылаются критерии WCAG 1.4.3, 1.4.6 и 1.4.11.

Отправляются ли мои цвета на сервер?

Нет. Матрица считается в вашем браузере, о палитре ничего не сохраняется и не отправляется.

Почему пара отличается в обоих направлениях?

Для непрозрачных цветов не отличается: коэффициент A на B равен B на A. Матрица всё равно показывает обе строки, чтобы быстро найти цвет текста. Для полупрозрачных цветов направления различаются, потому что цвет текста смешивается с фоном.

Делает ли проходящая палитра мой сайт доступным?

Нет. Это лишь значит, что у этих пар достаточный контраст. Правильно ли их применяют страницы, и всё остальное в WCAG ещё предстоит проверить.