Реализация контрастности и размеров шрифтов по WCAG
WCAG 2.1 устанавливает минимальные требования к контрасту текста и размерам шрифта для обеспечения читаемости для людей с нарушениями зрения.
Требования WCAG по контрасту
| Уровень | Обычный текст | Крупный текст (18pt / 14pt bold) |
|---|---|---|
| AA (минимум) | 4.5:1 | 3:1 |
| AAA (усиленный) | 7:1 | 4.5:1 |
Декоративные элементы, логотипы, неактивные UI-компоненты — исключение.
Проверка контраста
# CLI-инструмент
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — отлично
# Онлайн: WebAIM Contrast Checker
# https://webaim.org/resources/contrastchecker/
# В Figma: плагин A11y - Color Contrast Checker
# В Chrome DevTools: вкладка Elements → CSS → кружок цвета → показывает ratio
CSS-переменные для доступной цветовой схемы
:root {
/* Текстовые цвета */
--color-text-primary: #1a1a1a; /* на белом: 17.1:1 ✓ AAA */
--color-text-secondary: #595959; /* на белом: 7.0:1 ✓ AA */
--color-text-muted: #767676; /* на белом: 4.54:1 ✓ AA минимум */
/* Акцентный цвет — проверять на всех фонах */
--color-accent: #005EA2; /* на белом: 5.9:1 ✓ AA */
--color-accent-hover: #1a4480; /* на белом: 8.6:1 ✓ AAA */
/* Фоновые цвета */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f5;
--color-bg-dark: #1a1a1a;
}
/* Белый текст на тёмных фонах */
.dark-bg {
background: var(--color-bg-dark);
color: #ffffff; /* 17.1:1 ✓ */
}
Размеры шрифтов
:root {
/* Базовый размер — не меньше 16px для основного текста */
font-size: 16px;
/* Масштабируемые размеры через rem */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px — минимум для основного текста */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
}
/* Никогда не блокировать масштабирование пользователя */
/* Плохо: */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
/* Хорошо: */
<meta name="viewport" content="width=device-width, initial-scale=1">
/* Межстрочный интервал — минимум 1.5 для основного текста */
body {
line-height: 1.5;
font-size: var(--text-base);
}
/* Для параграфов — 1.6-1.8 */
p {
line-height: 1.6;
}
Автоматическая проверка в CI
// .pa11yrc.json — конфиг Pa11y
{
"standard": "WCAG2AA",
"runners": ["axe", "htmlcs"],
"ignore": [
"color-contrast" // отдельная проверка через contrast-finder
]
}
// GitHub Actions
- name: Check accessibility
run: |
npx pa11y-ci --sitemap https://staging.example.com/sitemap.xml \
--threshold 0
Срок реализации
Аудит контрастности и размеров на существующем проекте — 1 день. Исправление в дизайн-системе (CSS-переменные) — 1–2 дня.