Развлечения

Методика: Проверка контраста цвета онлайн — WCAG AA и AAA

Страница расчёта: открыть инструмент

Формула

WCAG 2.x: относительная светимость L = 0,2126·R + 0,7152·G + 0,0722·B, где каналы предварительно линеаризуются (гамма sRGB). Соотношение контраста = (L1 + 0,05) / (L2 + 0,05), L1 — светлее из двух. Пороги: AA — 4,5:1 для обычного и 3:1 для крупного текста (≥24px или ≥18,67px жирного), AAA — 7:1 и 4,5:1, элементы интерфейса — 3:1. Ближайший проходящий цвет ищется дихотомией по светлоте HSL с сохранением тона.

Как выполняется расчёт

  1. Задайте цвета текста и фона — пипеткой, HEX или готовой палитрой.
  2. Смотрите бейджи AA/AAA и живой пример текста.
  3. Для провала нажмите подходящий бейдж-подсказку — цвет подставится.

Ограничения и допущения

  • Пороги соответствуют WCAG 2.1; в версии 2.2 они не изменились.
  • Подбор цвета сохраняет тон и насыщенность исходного — меняется только светлота.
  • Автоконтраст не учитывает изображения и градиенты под текстом — только сплошные цвета.

Источники