Выберите цвет текста и фона, чтобы проверить читаемость и требования WCAG.
Как пользоваться проверкой
- Введите HEX-код текста и фона либо выберите цвета через системную палитру.
- Посмотрите коэффициент контраста и живой пример текста, ссылки и кнопки.
- Проверьте таблицу уровней WCAG AA и AAA для обычного и крупного текста.
- Скопируйте короткий отчёт или нажмите «Поменять местами», чтобы проверить обратное сочетание.
- Нажмите «Сбросить», чтобы вернуться к цветам по умолчанию.
Что означает коэффициент контраста
Коэффициент контраста показывает разницу яркости между текстом и фоном по формуле WCAG 2.2. Значение находится в диапазоне от 1:1 (цвета совпадают) до 21:1 (чёрный на белом). Чем выше число, тем легче прочитать текст.
Уровни AA и AAA
| Проверка | AA | AAA |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст | 3:1 | 4.5:1 |
| Графические объекты | 3:1 | не применяется |
Крупным текстом WCAG считает текст не меньше 18 пунктов либо не меньше 14 пунктов при жирном начертании. Это примерно 24 пикселя обычного текста или 18-19 пикселей жирного, но точный порог задают пункты, а не пиксели.
Официальное описание формулы: Understanding Success Criterion 1.4.3.
Другие инструменты
Пипетка цветов определяет HEX, RGB и HSL пикселя загруженного изображения.
Палитра из картинки находит доминантные цвета изображения.
Частые вопросы
Какие цвета заданы по умолчанию?
По умолчанию сравниваются текст #111111 и фон #FFFFFF. Введите свои коды или выберите цвета через системную палитру.
Можно ли вводить HEX без решётки?
Да. Поле принимает код как с решёткой, так и без неё, а также короткую запись из трёх символов, например #FFF.
Что произойдёт при вводе неверного значения?
Поле подсветится, появится сообщение об ошибке, а расчёт сохранит последнюю корректную пару цветов.
Чем отличаются проверки AA и AAA?
Уровень AA задаёт минимальный порог доступности, уровень AAA задаёт повышенный порог. Оба уровня используют один и тот же коэффициент контраста, но с разными порогами.
Зачем нужна проверка для графических объектов?
Порог 3:1 применяют к иконкам, границам полей и другим элементам интерфейса, которые не являются текстом. Уровень AAA для таких объектов WCAG не определяет.
Учитывает ли сервис прозрачность цвета?
Нет. Сервис сравнивает непрозрачные цвета в формате HEX и не учитывает alpha-канал и полупрозрачные слои.
Отправляются ли введённые цвета на сервер?
Нет. Расчёт выполняется в браузере, значения не отправляются на сервер.