Как пользоваться проверкой цветового контраста
- Укажите «Цвет текста (HEX)» и при необходимости настройте параметры.
- Запустите инструмент и изучите результаты, подтверждения и ограничения.
- Скопируйте или скачайте результат, затем сверьте его с реальным сайтом, исходными данными или учётными записями компании.
Попробуйте конкретный пример
Сравните кнопку фирменного цвета с белым и тёмным текстом, прежде чем выбрать цвет подписи.
Как понимать результаты
Контраст рассчитывается по введённым цветам и стандартной формуле относительной яркости. Размер и насыщенность шрифта, состояния и весь интерфейс всё равно требуют проверки доступности. Одна подходящая пара цветов не подтверждает общее соответствие.
Частые вопросы
Достаточно ли подходящего цветового контраста для всех требований доступности?
Не полностью. Нужны также навигация с клавиатуры, семантические теги, индикаторы фокуса и альтернативный текст.
Что считается крупным текстом?
В WCAG крупным обычно считается текст от 18pt или от 14pt жирного начертания, в зависимости от отрисовки шрифта.
Поддерживаются ли прозрачные цвета?
Сейчас нужны непрозрачные значения HEX. Сначала рассчитайте итоговый смешанный цвет.
Каковы требования WCAG к цветовому контрасту?
WCAG 2 на уровне AA требует контраста не менее 4,5:1 для обычного текста и 3:1 для крупного (примерно от 24 px обычного или 18,66 px жирного); на уровне AAA — не менее 7:1 для обычного и 4,5:1 для крупного текста. Нетекстовые элементы, например значки и рамки полей ввода, на уровне AA тоже требуют не менее 3:1. Чёрный на белом — 21:1, а светло-серый текст на белом часто не дотягивает до 4,5:1 — самая частая ошибка.