Разработчик🔒 Работает в браузере

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

Проверка соответствия цветового контраста WCAG AA/AAA

Цвет текста

Цвет фона

Пример заголовка

Так будет выглядеть основной текст с этими цветами.

А это мелкий текст для справки.

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

21.00:1

WCAG AA

Обычный текст✓ Соответствует

Крупный текст (18px+)✓ Соответствует

UI-компоненты✓ Соответствует

WCAG AAA

Обычный текст✓ Соответствует

Крупный текст (18px+)✓ Соответствует

О Проверка контрастности цветов

Проверка контрастности цветов оценивает коэффициент контраста между двумя цветами в соответствии с руководящими принципами WCAG 2.1. Она показывает, соответствуют ли ваши цветовые комбинации стандартам доступности AA или AAA для обычного текста, крупного текста и UI-компонентов. Всё работает в вашем браузере.

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

Каков хороший коэффициент контраста?

WCAG AA требует минимального соотношения 4,5:1 для обычного текста и 3:1 для крупного текста (18px+ или 14px+ жирный). WCAG AAA требует 7:1 для обычного текста и 4,5:1 для крупного текста. Более высокий коэффициент означает лучшую читаемость.

В чём разница между AA и AAA?

AA — минимально рекомендуемый стандарт для большинства веб-контента. AAA — более строгий стандарт, обеспечивающий лучшую читаемость для пользователей с нарушениями зрения. Соответствие AAA идеально, но не всегда обязательно.

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

Коэффициент контраста вычисляется с использованием относительной яркости каждого цвета, как определено в WCAG 2.1. Формула сравнивает более светлый и более тёмный цвета по шкале от 1:1 (нет контраста) до 21:1 (максимальный контраст, чёрный на белом).

🔧 Похожие инструменты

О Проверка контрастности цветов

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

Каков хороший коэффициент контраста?

В чём разница между AA и AAA?

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