Пиксель

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

Введите два цвета — увидите коэффициент и уровни AA/AAA. Если пара не проходит, подберите доступный оттенок и скопируйте CSS.

Цвета

Проверьте текст и фон по WCAG 2.1: уровни AA и AAA для обычного и крупного текста.

Подобрать доступный цвет текста

Контраст считается по формуле WCAG: (L1 + 0.05) / (L2 + 0.05), где L — относительная яркость.

Крупный текст: от 24 px или от 18.66 px полужирного начертания.

Предпросмотр

Так текст выглядит на выбранном фоне.

Заголовок на фоне

Крупный текст

Обычный текст на фоне

Мелкий текст · 14 px

— Контраст

Соответствие WCAG

AA, обычный текст Минимум 4.5:1 — базовое требование для текста.
—
AAA, обычный текст Минимум 7:1 — повышенная читаемость.
—
AA, крупный текст Минимум 3:1 — для текста от 24 px или от 18.66 px полужирного.
—
AAA, крупный текст Минимум 4.5:1 — повышенный уровень для крупного текста.
—

CSS-переменные

Вставьте в стили и используйте цвета через var().

Проверка считается в браузере, без отправки данных.

Контраст текста и фона — самое частое нарушение доступности. Даже аккуратный макет с серым текстом на белом может не пройти WCAG: разница в пару десятых делает пару формально нечитаемой. Глазами это почти незаметно, а на солнце, на дешёвом экране или при слабом зрении текст превращается в серое пятно.

Инструмент считает коэффициент по формуле WCAG 2.1 и сразу показывает, какие уровни проходит пара: AA и AAA для обычного и крупного текста. Если контраста не хватает, кнопки «Довести до 4.5:1» и «Довести до 7:1» подбирают ближайший оттенок с сохранением тона — фирменный цвет остаётся узнаваемым.

Рядом видно, как текст выглядит на фоне в четырёх размерах. А CSS-переменные можно скопировать одной кнопкой и использовать в проекте.

WCAG AA и AAA Четыре порога: обычный и крупный текст, оба уровня.
Подбор цвета Ближайший доступный оттенок с сохранением тона.
Живой пример Текст четырёх размеров на выбранном фоне.
CSS Готовые переменные --text и --background.

Как это работает

  1. Введите HEX или выберите цвет текста и фона в палитре.
  2. Посмотрите коэффициент контраста и уровни AA/AAA для обычного и крупного текста.
  3. Если пара не проходит, нажмите «Довести до 4.5:1» — получите безопасный оттенок и скопируйте CSS.

Когда проверять контраст

  • Перед публикацией лендинга, статьи или интерфейса
  • При подборе фирменных цветов и тёмной темы
  • Перед сдачей макета заказчику или в дизайн-систему
  • Когда текст плохо читается на телефоне и на солнце
Генератор палитр Гармонии, палитра из фотографии и проверка контраста текста по WCAG. Пипетка: цвет по фото Точный HEX, RGB и HSL в любой точке снимка. Работает на телефоне. Генератор градиентов Линейные и радиальные градиенты, готовый CSS и PNG для соцсетей. Генератор QR-кодов Ссылка, Wi-Fi, визитка, Telegram или меню — в одном коде. PNG, SVG и PDF для печати.

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

Что означает контраст 4.5:1?

Это отношение яркости самого светлого и самого тёмного цвета по формуле WCAG: (L1 + 0.05) / (L2 + 0.05). Чем выше число, тем лучше текст читается на фоне. Минимум 4.5:1 — уровень AA для обычного текста, 7:1 — уровень AAA. Для крупного текста порог ниже: 3:1 для AA и 4.5:1 для AAA.

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

По WCAG крупный текст — от 24 px обычного начертания или от 18.66 px полужирного. Заголовки и подписи кнопок часто попадают в эту категорию, но мелкий текст в карточках и описаниях — нет. Поэтому проверять стоит оба порога: 3:1 и 4.5:1.

Почему #777777 на белом не проходит AA?

У этой пары контраст около 4.48:1 — чуть меньше порога 4.5:1. Разница незаметна на глаз, но формально требование не выполнено. Один шаг темнее или светлее фона решает проблему: инструмент подберёт оттенок кнопкой «Довести до 4.5:1» и покажет готовый HEX.

Как исправить контраст, не ломая дизайн?

Сначала попробуйте изменить только светлоту текста, сохранив тон и насыщенность: так фирменный цвет останется узнаваемым. Кнопки «Довести до 4.5:1» и «Довести до 7:1» делают именно это. Если фон слишком близок к тексту, иногда проще затемнить фон или добавить подложку, чем менять цвет шрифта.

Контраст помогает людям с дальтонизмом?

Да, но не заменяет другие признаки. Достаточный контраст помогает при слабом зрении, ярком солнце и плохих экранах. При дальтонизме важно не полагаться только на цвет: добавляйте подписи, иконки и подчёркивание ссылок. Проверка контраста — базовый, но не единственный шаг доступности.

Где использовать проверенные цвета?

Скопируйте CSS-переменные из блока «CSS-переменные» и подключите их в стилях: --text для основного текста, --background для фона. Так одна пара цветов используется на всех экранах, а контраст не «уплывает» при правках темы.