Softonic

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

Шаг 1 / 2 Коэффициент контрастности
Большой образец заголовка
Образец основного текста.
Результаты

Введите цвета переднего плана и фона, и средство проверки вернет коэффициент контрастности WCAG (от 1:1 до 21:1), а также вердикты «годен/не годен» по пороговым значениям WCAG 2.1 AA и AAA для обычного текста, больших текстовых и нетекстовых элементов. Внутри он использует формулу яркости WCAG, простую математику, но важную для доступности. Исправьте неудачи, подталкивая светлость, пока коэффициент не превысит нужный вам порог.

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

  1. 1

    Введите два цвета

    HEX из 3 или 6 цифр для обоих цветов. Для каждого доступен выбор цвета палитрой.

  2. 2

    Расчёт относительной светлоты для каждого

    L = 0.2126·R + 0.7152·G + 0.0722·B, где каждый канал линеаризуется из sRGB.

  3. 3

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

    (L_светлее + 0.05) / (L_темнее + 0.05). Коэффициенты от 1:1 до 21:1.

  4. 4

    Значки «пройден / не пройден»

    AA (4.5:1 для обычного, 3:1 для крупного/UI), AAA (7:1 для обычного, 4.5:1 для крупного). Крупный текст = ≥18pt обычное начертание или ≥14pt жирное.

Пороговые значения контраста WCAG

Тип содержимого Порог AA Порог AAA
Обычный текст 4.5:1 7:1
Крупный текст (≥18pt обычное начертание или ≥14pt жирное) 3:1 4.5:1
Нетекст (компоненты UI, кольца фокуса) 3:1 -
Сопутствующий текст (декоративный, отключённый, логотипы) освобождён освобождён

«Крупный текст» означает обычное начертание от 18pt (~24px в CSS) или жирное от 14pt (~19px жирным).

Примеры контраста

Пара Коэффициент AA обычный AA крупный AAA обычный
Чёрный на белом 21:1 Пройден Пройден Пройден
#333 на белом 12.6:1 Пройден Пройден Пройден
#666 на белом 5.7:1 Пройден Пройден Не пройден
#888 на белом 3.5:1 Не пройден Пройден Не пройден
#AAA на белом 2.3:1 Не пройден Не пройден Не пройден
Белый на #1976D2 (Material blue 700) 4.6:1 Не пройден Пройден Не пройден
Белый на #2196F3 (Material blue 500) 3.1:1 Не пройден (обычный) Пройден Не пройден

Частые ошибки доступности

  • Серый основной текст на белом от #999 и светлее не проходит AA. Используйте #767676 или темнее для основного текста на белом.
  • Синяя ссылка на сером: часто не проходит, потому что оба цвета имеют среднюю светлоту.
  • Белый текст на фирменном цвете: проходит на более тёмных оттенках (≥ 4.5:1), не проходит на средних тонах. Используйте более крупный текст или более тёмный фирменный цвет.
  • Текст-заполнитель часто имеет низкий контраст «для подсказки», но WCAG всё равно применяется, если пользователям нужно его прочитать.
  • Отключённое состояние: WCAG 2.2 требует 3:1 для отключённого текста на фоне элемента управления, если само состояние не передаётся другим способом.

О чём WCAG не рассказывает

  • WCAG 2.x использует формулу 1988 года. Современный APCA (усовершенствованный перцептивный алгоритм контраста) лучше отражает воспринимаемую читаемость, но пока не является юридическим стандартом. Поднимайте значения чуть выше минимумов WCAG, чтобы учесть APCA и крайние случаи.
  • Контраст не единственное измерение доступности. Коэффициент 21:1 ничего не значит, если шрифт 9px, межстрочный интервал тесный или смысл передан только красно-зелёным цветом.

Исправление не прошедшей пары

  • Более светлый передний план на тёмном фоне или более тёмный передний план на светлом.
  • Увеличьте размер или вес шрифта, порог крупного текста ниже.
  • Добавьте фон за текстом поверх изображений (наложение, градиент).
  • Никогда не «чините» контраст, выцветая до серого, который всё равно не проходит, доводите до AA.

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

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

AA это юридический стандарт в большинстве юрисдикций (Section 508 в США, EN 301 549 в ЕС) и то, на что указывают большинство аудиторских инструментов. AAA желателен, но обязателен только в особых контекстах доступности (образовательный контент для пользователей с ослабленным зрением). Добивайтесь AA и относитесь к AAA как к бонусу.

Нет, она принимает только непрозрачные HEX-цвета из 3 или 6 цифр. Сначала переведите RGB или HSL в HEX либо воспользуйтесь палитрой, которая всегда выдаёт HEX.

WCAG 2.1 SC 1.4.11 требует контраст 3:1 для нетекстовых компонентов UI и графических объектов. Это касается индикаторов фокуса, рамок полей ввода, кнопок только с иконкой и состояний (наведение, активное). Проверяйте и обычное, и сфокусированное состояние.

Проверяйте каждый режим отдельно, коэффициенты контраста в светлой и тёмной теме независимы. Многие палитры, проходящие в светлом режиме, не проходят в тёмном при той же относительной светлоте.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.