Дизайн

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

Коэффициент контрастности WCAG для двух цветов.

Почти до того, как мы это осознали, мы уже оторвались от земли.
1.00
Коэффициент контрастности
СтандартныйОбычный текстКрупный текст
WCAG AA
WCAG AAA
WCAG 1.4.11Нетекстовые элементы / компоненты UI (≥3:1): —

Ближайший вариант текста уровня AAВычисляется альтернатива OKLCH…

Этот отчёт соответствует требованиям WCAG 2.2 к коэффициенту контраста. APCA остаётся экспериментальным методом и не является результатом проверки соответствия WCAG 3.

Выбрать цвета? Конвертер цветов · описания профилей: Генератор стильного текста · шкалы: Генератор оттенков цвета.

Как использовать

Выберите цвет текста и цвет фона. Коэффициент контрастности и статус прохождения/непрохождения для каждого уровня WCAG обновляются в реальном времени с предпросмотром.

Вопросы и ответы

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

WCAG AA требует контраст 4.5:1 для обычного текста и 3:1 для крупного. Для AAA нужны соответственно 7:1 и 4.5:1. WCAG 1.4.11 также требует 3:1 для значимой нетекстовой графики, границ или состояний компонентов UI.

Что считается крупным текстом?

Крупный текст составляет примерно 18pt (24px) или 14pt (18.66px) жирным и крупнее.

Как рассчитывается соотношение?

Из относительной яркости обоих цветов: (более светлый + 0,05) ÷ (более тёмный + 0,05), согласно формуле WCAG.

Последнее обновление: