Реалізація контрастності та розмірів шрифту (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 дні.