Проверка контраста цветов
Бесплатная проверка контраста цветов: соответствуют ли цвета текста и фона WCAG 2.2 AA и AAA, каков коэффициент контраста и ближайший подходящий цвет.
Это обычный текст размером с абзац.
Крупный текст
Кнопка| AA | AAA | |
|---|---|---|
| Обычный текст | ||
| Крупный текст (24 px или 18,7 px жирным) | ||
| Значки и границы интерфейса | — |
Что он делает
Эта проверка измеряет контраст между цветом текста и его фоном по формуле руководства по доступности WCAG 2.2, на которое опираются многие законы о доступности. Она показывает коэффициент контраста от 1:1 (нет контраста) до 21:1 (чёрный на белом) и проходит ли пара уровни AA и AAA для обычного текста, крупного текста и элементов интерфейса, таких как значки и границы. Если пара не проходит, предлагается ближайший цвет того же оттенка, который проходит проверку.
Как пользоваться
- Введите или выберите цвет текста и цвет фона.
- Посмотрите коэффициент контраста и результаты AA и AAA, а также живой предпросмотр.
- Если проверка не пройдена, нажмите «Применить» у предложенного цвета, затем скопируйте ссылку, чтобы поделиться результатом.
Частые вопросы
Какой коэффициент контраста нужен?
Уровень AA, обычное требование законов, требует 4,5:1 для обычного текста и 3:1 для крупного текста, значков и границ интерфейса. Уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного.
Что считается крупным текстом?
Текст размером не менее 24 CSS-пикселей (18 пунктов) или не менее примерно 18,7 CSS-пикселя (14 пунктов), если он жирный. Заголовки обычно крупные, основной текст — как правило, нет.
Почему #777777 на белом не проходит?
Его коэффициент 4,47:1 — чуть меньше 4,5:1, необходимых для обычного текста. Коэффициенты не округляются вверх, поэтому чуть более тёмный серый, например #767676 (4,54:1), — самый светлый серый, проходящий на белом.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast