nicetool.dev logo

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

Выберите или введите два цвета (HEX, RGB, HSL или названия). Результаты обновляются по мере ввода.

Коэффициент контраста

4.83:1

Крупный заголовок

Обычный основной текст 16px выглядит так.

Мелкий текст и подписи 14px.

Кнопка
  • AA обычный текст ≥ 4.5:1 Пройдено
  • AA крупный текст (24px или 18,66px жирный) ≥ 3:1 Пройдено
  • AAA обычный текст ≥ 7:1 Не пройдено
  • AAA крупный текст ≥ 4.5:1 Пройдено
  • Элементы интерфейса и графика ≥ 3:1 Пройдено

Что такое цветовой контраст и почему он важен?

Коэффициент контраста показывает разницу воспринимаемой яркости двух цветов, от 1:1 (одинаковые) до 21:1 (чёрный на белом). WCAG 2.2 на уровне AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса, а на уровне AAA 7:1 и 4,5:1. Примерно у каждого двенадцатого мужчины нарушено цветовосприятие, а многие читают с телефона на ярком солнце, поэтому малоконтрастный текст отсекает реальных пользователей. Законы о доступности, например European Accessibility Act и ADA, ссылаются на WCAG AA, и для многих сайтов контраст становится юридическим требованием.

Возможности

  • • Коэффициент контраста с результатами WCAG 2.2 AA и AAA для текста и интерфейса
  • • Принимает HEX, RGB, HSL, OKLCH и названия цветов CSS, есть палитры
  • • Полупрозрачные цвета смешиваются так же, как в браузере
  • • Живой предпросмотр: заголовок, текст, мелкий шрифт и кнопка
  • • Подсказывает ближайший подходящий цвет, меняя только яркость

Мгновенно и приватно

Все расчёты выполняются в браузере. Цвета неопубликованных дизайнов никуда не отправляются.

Формула WCAG 2.2, 100% на стороне клиента.

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

  1. 1

    Укажите цвет текста и фона: введите любой цвет CSS (#1e293b, rgb(), hsl(), oklch() или название) или воспользуйтесь палитрой.

  2. 2

    Посмотрите коэффициент контраста. Результат усекается, а не округляется вверх, поэтому 4,49:1 никогда не покажется как пройденный.

  3. 3

    Проверьте пять результатов WCAG: AA и AAA для обычного и крупного текста, а также 3:1 для элементов интерфейса вроде рамок полей, иконок и колец фокуса.

  4. 4

    Если проверка не пройдена, посмотрите предложенный цвет того же оттенка с другой яркостью и нажмите «Применить» или поменяйте цвета местами для обратной пары.

Практические примеры

Серый текст-подсказка

Tailwind gray-400 (#9ca3af) на белом даёт лишь 2,5:1 и не проходит AA. gray-500 (#6b7280) даёт 4,8:1 и подходит для основного текста.

Фирменный цвет на кнопках

Светлый фирменный синий может пройти для крупных подписей кнопок (3:1), но не для мелкого текста. Проверьте оба случая или затемните фон, пока белый текст не достигнет 4,5:1.

Палитры тёмной темы

Чисто белый на чисто чёрном (21:1) может резать глаза. Попробуйте мягкие пары вроде #e2e8f0 на #0f172a, которые всё равно превышают AAA, около 14:1.

Рамки форм и иконки

Критерий WCAG 1.4.11 требует 3:1 для границ полей и значимых иконок. Рамка #e5e7eb на белом намного ниже, и поля трудно заметить.

Частые вопросы

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

По WCAG это текст не менее 18 pt (24px) обычного начертания или 14 pt (около 18,66px) жирного. Крупному тексту на уровне AA достаточно 3:1, потому что толстые штрихи легче читать.

Нужен AA или AAA?+

AA стандартная юридическая цель для большинства сайтов и приложений. AAA строже и рекомендуется для длинных текстов, госуслуг и людей со слабым зрением.

Применяется ли контраст к логотипам и неактивным кнопкам?+

Нет. WCAG делает исключение для логотипов, декоративных изображений и неактивных (disabled) элементов. Подсказки в полях, ссылки и индикаторы фокуса учитываются.

А как же APCA и WCAG 3?+

APCA новая модель контраста, предложенная для будущих WCAG 3. Пока это черновик, поэтому законы и аудиты сегодня опираются на коэффициенты WCAG 2.2.