Проверка цветового контраста

Что такое Проверка цветового контраста?

Проверка цветового контраста — это бесплатный онлайн-инструмент для расчёта коэффициента контраста WCAG, предназначенный для дизайнеров, разработчиков и специалистов по тестированию доступности. Он принимает цвет переднего плана (текста) и цвет фона, вычисляет относительную яркость каждого из них и показывает коэффициент контраста в виде значения от 1:1 до 21:1. Затем он сообщает, соответствует ли это значение уровню AA WCAG 2.1 (4.5:1 для обычного текста, 3:1 для крупного) и уровню AAA (7:1 для обычного, 4.5:1 для крупного), и отрисовывает два цвета в виде живого предпросмотра с образцом текста, чтобы вы могли с одного взгляда оценить читаемость. Используйте его, чтобы убедиться, что основной текст, кнопки, ссылки и подписи читаемы, прежде чем публиковать дизайн.

Как пользоваться Проверка цветового контраста

1. Введите или вставьте цвет переднего плана (текста) в виде значения HEX или щёлкните по встроенному палитре, чтобы выбрать его визуально.
2. Сделайте то же самое для цвета фона, на котором располагается текст.
3. Прочитайте результат коэффициента контраста, показанный в виде значения вроде 4.5:1 (1:1 — одинаковые цвета, 21:1 — чистый чёрный на белом).
4. Проверьте значки AA и AAA для обычного и крупного текста (18pt / 14pt полужирный и крупнее), чтобы увидеть, какие уровни проходят.
5. Посмотрите на предпросмотр с образцом текста, отрисованный вашими двумя цветами, чтобы убедиться, что текст легко читается.
6. Корректируйте любой из цветов, пока не достигнете уровня контраста, необходимого вашему дизайну.

Примеры

Передний план #595959, Фон #ffffff

Коэффициент 7.00:1 — проходит AA и AAA для обычного и крупного текста

Передний план #999999, Фон #ffffff

Коэффициент 2.85:1 — не проходит AA для обычного текста и AAA, не соответствует ничему из требуемого для основного текста

Передний план #767676, Фон #ffffff

Коэффициент 4.54:1 — проходит AA обычный и AA крупный, но не проходит AAA обычный

Часто задаваемые вопросы

Какие коэффициенты контраста требует WCAG?

Уровень AA WCAG 2.1 требует не менее 4.5:1 для обычного текста и 3:1 для крупного. Уровень AAA строже: 7:1 для обычного текста и 4.5:1 для крупного. Эта проверка показывает значок прохождения/непрохождения для каждого из этих четырёх порогов.

Что считается крупным текстом?

WCAG определяет крупный текст как 18pt (около 24px) и больше, либо 14pt (около 18.66px) и больше для полужирного начертания. У крупного текста требования к контрасту ниже, потому что более крупные символы легче читать, поэтому значки крупного текста могут проходить, когда значки обычного текста — нет.

Как вычисляется коэффициент контраста?

Используется официальная формула WCAG: относительная яркость каждого цвета вычисляется из его линеаризованных каналов sRGB, а коэффициент равен (более светлый + 0.05) / (более тёмный + 0.05). Результат лежит в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).

Поддерживаются ли альфа-канал, RGB или именованные цвета?

Ввод только в HEX (сокращённый #rgb или #rrggbb), для каждого поля есть встроенная палитра. Альфа-канал/непрозрачность и частичная прозрачность не учитываются — сначала сведите полупрозрачные слои в сплошной цвет, а затем проверьте его.

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

Нет. Расчёты яркости и коэффициента выполняются полностью в вашем браузере с помощью JavaScript — никакие цвета не загружаются и ничего не отправляется на сервер, поэтому инструмент работает конфиденциально и даже офлайн после загрузки страницы.