Проверка контрастности цветов (WCAG AA/AAA)

• Мгновенный расчёт контраста по WCAG: проверка контрастности цветов рассчитывает коэффициент контраста WCAG и все результаты «пройдено/не пройдено» при каждом нажатии клавиши. Не нужно нажимать кнопку — введите цвета и сразу увидите результаты.
• Безопасно и на 100% приватно: все расчёты контраста выполняются полностью в вашем браузере по формуле относительной яркости WCAG 2.1. Данные о цветах никогда не отправляются на сервер.
• Полный охват WCAG 2.1 — AA и AAA: проверяются все соответствующие критерии WCAG 2.1: AA и AAA для обычного текста, AA и AAA для крупного текста и AA для элементов интерфейса (SC 1.4.11). Включает живой предпросмотр, показывающий, как выглядят ваши цвета при каждом размере текста.
• 100% бесплатно — без регистрации: полностью бесплатно, без аккаунта, без премиум-тарифа, без лимитов использования и без рекламы, блокирующей интерфейс. Проверяйте контрастность цветов столько раз, сколько нужно.

• Веб-разработка и UI-дизайн: фронтенд-разработчики и UI-дизайнеры используют проверку контрастности цветов, чтобы убедиться, что сочетания цвета текста и фона соответствуют требованиям WCAG AA до релиза. Раннее выявление проблем с контрастом избавляет от дорогостоящих доработок по доступности.
• Проверка фирменных цветов: дизайнеры используют проверку контрастности цветов, чтобы убедиться, что фирменные цвета соответствуют стандартам доступности при использовании в качестве текста на фоне. Многие фирменные палитры не проходят WCAG AA — проверка показывает, какие сочетания безопасны.
• Электронная коммерция и страницы товаров: команды интернет-магазинов используют проверку контрастности цветов, чтобы описания товаров, цены и кнопки призыва к действию соответствовали требованиям контраста WCAG AA — это улучшает читаемость для всех пользователей, включая людей со слабым зрением.
• Дизайн документов и презентаций: авторы контента и дизайнеры презентаций используют проверку контрастности цветов, чтобы убедиться, что текст слайдов, подписи к графикам и текст инфографики читаются на выбранном фоне.
• Дизайн мобильных приложений: дизайнеры мобильных приложений используют проверку контрастности цветов, чтобы элементы интерфейса соответствовали требованиям WCAG AA как в светлых, так и в тёмных темах — это критично для пользователей с нарушениями зрения на небольших экранах.
• Аудит и соответствие требованиям доступности: консультанты по доступности и команды QA используют проверку контрастности цветов как быстрый инструмент первого этапа при аудитах WCAG. Она выявляет проблемы контраста, которые нужно устранить до формального тестирования со вспомогательными технологиями.

Контраст цветов по WCAG — это минимальный коэффициент контраста между цветом переднего плана (текста) и фона, требуемый Руководством по доступности веб-контента (WCAG), чтобы контент был читаемым для людей со слабым зрением или нарушениями цветовосприятия. Коэффициент контраста рассчитывается по относительной яркости каждого цвета — значению, производному от линеаризованных значений каналов sRGB. Коэффициенты варьируются от 1:1 (без контраста, одинаковые цвета) до 21:1 (максимальный контраст, чёрный на белом). Наша браузерная проверка контрастности цветов рассчитывает этот коэффициент мгновенно и оценивает его по всем соответствующим критериям успеха WCAG 2.1.

1. Введите свои цвета: наберите значение HEX (например, #0066cc ) или значение RGB (например, rgb(0, 102, 204) ) в поля переднего плана и фона либо используйте встроенный выбор цвета. Также можно выбрать готовую цветовую пару, чтобы быстро начать.
2. Мгновенный расчёт: проверка контрастности цветов вычисляет относительную яркость WCAG 2.1 для каждого цвета и определяет коэффициент контраста. Все расчёты выполняются локально в вашем браузере — данные о цветах никогда не отправляются на сервер.
3. Просмотрите результаты: таблица результатов показывает статус «пройдено/не пройдено» для всех соответствующих критериев WCAG 2.1. Живой предпросмотр показывает, как выглядят ваши цвета при обычном тексте, крупном тексте и размерах элементов интерфейса.

• AA — обычный текст (4,5:1): минимальный коэффициент контраста для основного текста, подписей и меток меньше 18 pt (24 px) обычной насыщенности или 14 pt (18,67 px) полужирного. Требуется для соответствия WCAG 2.1 уровня AA.
• AA — крупный текст (3:1): минимальный коэффициент контраста для текста от 18 pt (24 px) обычной насыщенности или от 14 pt (18,67 px) полужирного. Заголовки обычно относятся к крупному тексту.
• AA — элементы интерфейса (3:1): минимальный коэффициент контраста для визуального представления элементов интерфейса (кнопки, поля форм, индикаторы фокуса) и графических объектов. Определён в WCAG 2.1 SC 1.4.11.
• AAA — расширенный (7:1 / 4,5:1): расширенные требования к контрасту для соответствия AAA — 7:1 для обычного текста и 4,5:1 для крупного текста. AAA — самый высокий уровень, и он не обязателен для всего контента.

Проверка контрастности цветов оценивает коэффициенты контраста по математическим порогам WCAG 2.1. Прохождение проверки коэффициента контраста не гарантирует полную доступность — соответствие WCAG также требует корректного семантического HTML, навигации с клавиатуры, совместимости со скринридерами и других факторов, не связанных с цветом. Кроме того, формула контраста WCAG не учитывает все виды нарушений цветовосприятия. Полная валидация доступности требует ручного тестирования со вспомогательными технологиями (скринридеры, программы увеличения) и экспертной проверки доступности.