Проверка контраста WCAG
Проверьте коэффициент контраста между цветом текста и цветом фона по критериям доступности WCAG, прежде чем использовать их на вашем сайте.
Пример заголовка
Это пример абзаца текста с выбранными выше цветом текста и цветом фона, чтобы визуально оценить читаемость в дополнение к показателю WCAG.
Как это работает
Рекомендации WCAG задают минимальные коэффициенты контраста между текстом и фоном, чтобы сайт оставался читаемым для людей с ослабленным зрением или в сложных условиях просмотра (тусклый экран, блики). Прежде чем утвердить сочетание цветов, выбранное в Figma или фирменном стиле, этот инструмент вычисляет реальный коэффициент между двумя цветами и показывает, соответствует ли он порогам AA (рекомендуемый минимальный уровень) и AAA (усиленный уровень).
В чём разница между «обычным текстом» и «крупным текстом»?
Требуемый порог контраста зависит от размера текста: крупный текст (примерно от 18pt или 14pt жирным) остаётся читаемым при более низком контрасте, чем текст обычного размера, потому что формы букв крупнее и их легче различить.
На какой уровень ориентироваться: AA или AAA?
Уровень AA — это общепринятый стандарт, которого достаточно для большинства веб-сайтов (и часто юридическое требование в зависимости от юрисдикции). Уровень AAA более строгий и рекомендуется для контента, где доступность в приоритете, но его бывает трудно достичь с некоторыми фирменными палитрами без существенных изменений.
Обработка 100% локальная: расчёт коэффициента контраста выполняется прямо в вашем браузере через WebAssembly, без каких-либо обращений к внешнему серверу.