Матрица контрастности цветов

Почему нужно проверять сразу все сочетания цветов, а не одну пару за раз?

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

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

WCAG 2.1 определяет коэффициент контрастности как (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость двух цветов (чем выше, тем ближе к белому). Чёрный #000000 на белом #FFFFFF даёт идеальные 21:1, а светло-серый #999999 на белом — всего 2.85:1, что намного ниже минимума 4.5:1 для обычного текста. Обычному тексту (менее 18px или менее 14px жирным) нужен AA ≥ 4.5:1, либо AAA ≥ 7:1 для более строгого стандарта; крупный текст (18px+ жирный или 24px+) имеет более мягкий порог AA ≥ 3:1.

Как читать итоговую матрицу

Каждая ячейка матрицы показывает коэффициент контрастности между цветом строки и цветом столбца, с цветовой маркировкой: зелёный (AAA), жёлтый (только AA), красный (не прошло) — чтобы вы могли сразу увидеть проблемные пары, а не считать каждую вручную.

Контрастность рассчитывается исключительно по значениям RGB — без учёта толщины шрифта, сглаживания или полупрозрачных наложений при реальном рендеринге. Всегда проверяйте результат на реальном устройстве перед публикацией.