Бесплатный инструмент · Дизайн
Проверка контрастности цветов
Укажите цвет текста и цвет фона — инструмент посчитает коэффициент контрастности по формуле WCAG, покажет вердикты для уровней AA и AAA (обычный и крупный текст, элементы интерфейса) и живое превью пары. Всё считается мгновенно в браузере.
Цвета не покидают браузер🔒 Цвета не покидают браузер — расчёт по формуле WCAG 2.x на вашем устройстве.
Как читать результат
Инструмент считает коэффициент контрастности по формуле WCAG: сравнивается относительная яркость двух цветов. Диапазон — от 1:1 (цвета неразличимы) до 21:1 (чёрный на белом). Далее коэффициент сверяется с порогами стандарта для разных случаев.
Пороги WCAG
AA, обычный текст — 4.5:1. Базовая норма для основного текста сайта. AA, крупный текст — 3:1 — для заголовков от 24 px и жирного текста от 18.5 px. AAA — 7:1 и 4.5:1 — усиленный уровень для сервисов с повышенными требованиями к доступности. Для нетекстовых элементов — иконок, границ полей ввода, состояний кнопок — действует порог 3:1.
Типичные ошибки
Светло-серый текст на белом (#999 на #fff даёт всего 2.8:1), белый текст на фирменном жёлтом или салатовом, плейсхолдеры полей «для красоты» осветлённые до нечитаемости. Дизайнеру на калиброванном мониторе всё видно — посетителю на телефоне под солнцем нет.
Крупный текст прощает больше
Чем крупнее и жирнее шрифт, тем ниже допустимый порог: заголовок читается и при 3:1, а мелкая подпись требует полных 4.5:1. Поэтому одну и ту же пару цветов можно смело использовать в хиро-заголовке, но нельзя — в тексте условий доставки.
Частые вопросы
Что такое коэффициент контрастности?
Это отношение яркости светлого цвета к тёмному по формуле WCAG — от 1:1 (цвета совпадают) до 21:1 (чёрный на белом). Чем выше коэффициент, тем легче читать текст. Стандарт WCAG задаёт пороги: 4.5:1 для обычного текста (AA), 3:1 для крупного, 7:1 — строгий уровень AAA.
Чем уровень AA отличается от AAA?
AA — базовый уровень доступности, который принят как норма для коммерческих сайтов: 4.5:1 для обычного текста и 3:1 для крупного (от 24 px или жирного от 18.5 px). AAA — усиленный уровень для сервисов с повышенными требованиями: 7:1 и 4.5:1 соответственно. Для иконок и границ полей действует порог 3:1.
Зачем бизнесу контрастность?
Слабый контраст — это потерянные клиенты: около 4% людей имеют нарушения цветовосприятия, а на солнце экран телефона «съедает» ещё часть контраста у всех. Нечитаемая кнопка или серый текст на сером фоне напрямую снижают конверсию. Контраст — не эстетика, а деньги.
Проверка учитывает прозрачность и градиенты?
Инструмент сравнивает два непрозрачных цвета в HEX-формате — это базовый сценарий WCAG. Для полупрозрачного текста сначала вычислите итоговый цвет наложения (например, пипеткой со скриншота), для градиентов проверяйте самую слабую точку — обычно светлый край.
Цвета в норме — а дизайн работает?
Контраст — одна проверка из десятков, которые проходит хороший интерфейс. SIDE Studio проектирует сайты, где типографика, цвет и композиция работают на одно: довести посетителя до заявки.
Обсудить проект