Звичайний
Фокус і hover мають залишатися читабельними для всіх.
Доступність у фокусі
Перевірка контрасту WCAG
Онлайн-інструмент для перевірки контрасту за WCAG 2.1/2.2 (AA/AAA) у станах звичайний, наведення, фокус і вимкнений. Задайте кольори тексту, іконок і рамок, отримайте звіт та виправте проблемні пари перед релізом.
Звичайний
Базовий станНаведення
ВзаємодіяФокус
Клавіатурний фокусВимкнений
Неактивний станАвтоматичне виправлення контрасту
Оберіть стан, елемент і цільовий рівень. Інструмент знайде найближчий доступний колір без різкої зміни стилю.
Живе превʼю станів
Перевіряйте читабельність та візуальний баланс до релізу, а не після скарг користувачів.
Наведення
Фокус і hover мають залишатися читабельними для всіх.
Фокус
Фокус і hover мають залишатися читабельними для всіх.
Вимкнений
Фокус і hover мають залишатися читабельними для всіх.
Звіт контрасту WCAG
Статус тексту рахується за AA для тексту (4.5:1). Іконки та бордери — за non-text порогом 3:1.
| Стан | Коефіцієнт тексту | Текст AA | Коефіцієнт іконки | Іконка AA | Коефіцієнт рамки | Бордер AA |
|---|---|---|---|---|---|---|
| Звичайний | 17.06 | Пройдено | 17.06 | Пройдено | 9.90 | Пройдено |
| Наведення | 5.17 | Пройдено | 5.17 | Пройдено | 1.30 | Не пройдено |
| Фокус | 4.10 | Не пройдено | 4.10 | Пройдено | 1.48 | Не пройдено |
| Вимкнений | 3.86 | Не пройдено | 3.86 | Пройдено | 2.08 | Не пройдено |
Звичайний
Коефіцієнт тексту17.06:1Пройдено
Коефіцієнт іконки17.06:1Пройдено
Коефіцієнт рамки9.90:1Пройдено
Наведення
Коефіцієнт тексту5.17:1Пройдено
Коефіцієнт іконки5.17:1Пройдено
Коефіцієнт рамки1.30:1Не пройдено
Фокус
Коефіцієнт тексту4.10:1Не пройдено
Коефіцієнт іконки4.10:1Пройдено
Коефіцієнт рамки1.48:1Не пройдено
Вимкнений
Коефіцієнт тексту3.86:1Не пройдено
Коефіцієнт іконки3.86:1Пройдено
Коефіцієнт рамки2.08:1Не пройдено
:root {
--color-default-text: #0f172a;
--color-default-icon: #0f172a;
--color-default-border: #334155;
--color-default-bg: #f8fafc;
--color-hover-text: #ffffff;
--color-hover-icon: #ffffff;
--color-hover-border: #1d4ed8;
--color-hover-bg: #2563eb;
--color-focus-text: #ffffff;
--color-focus-icon: #ffffff;
--color-focus-border: #0ea5e9;
--color-focus-bg: #0284c7;
--color-disabled-text: #64748b;
--color-disabled-icon: #64748b;
--color-disabled-border: #94a3b8;
--color-disabled-bg: #e2e8f0;
}
.a11y-button {
color: var(--color-default-text);
background: var(--color-default-bg);
border: 1px solid var(--color-default-border);
}
.a11y-button:hover {
color: var(--color-hover-text);
background: var(--color-hover-bg);
border-color: var(--color-hover-border);
}
.a11y-button:focus-visible {
color: var(--color-focus-text);
background: var(--color-focus-bg);
border-color: var(--color-focus-border);
}
.a11y-button[disabled] {
color: var(--color-disabled-text);
background: var(--color-disabled-bg);
border-color: var(--color-disabled-border);
}Перевірка контрасту WCAG: що це, для чого і як користуватися
Цей інструмент перевіряє контраст тексту, іконок і рамок за критеріями WCAG AA/AAA. Він потрібен, щоб інтерфейс залишався читабельним для всіх користувачів, зокрема на кнопках, формах і станах взаємодії.
Як користуватися: 1) введіть кольори переднього плану та фону для кожного стану; 2) перегляньте звіт 4.5:1 і 3:1; 3) застосуйте автовиправлення; 4) експортуйте CSS/JSON токени у дизайн-систему або кодову базу.
Поширені запитання про перевірку контрасту
Що саме перевіряє цей WCAG-інструмент?
Він перевіряє контраст пар «передній колір/фон» для тексту, іконок і рамок у всіх станах інтерфейсу. Для тексту застосовуються пороги AA 4.5:1 та AAA 7:1, для нетекстових елементів — 3:1.
Як швидко перевірити сторінку перед публікацією?
Заповніть кольори для звичайного, наведення, фокусу і вимкненого станів, перегляньте таблицю звіту та виправте рядки зі статусом «Не пройдено». Після цього експортуйте токени й оновіть компоненти.
Чи зберігає автовиправлення стиль бренду?
Так, у більшості випадків так. Автовиправлення спершу коригує світлість і намагається зберегти відтінок, щоб не зламати візуальну мову інтерфейсу.
Що я отримаю на виході після перевірки?
Ви отримуєте готову карту кольорових токенів у форматах CSS-змінних і JSON. Її можна одразу підключити до дизайн-системи, компонентної бібліотеки або фронтенд-проєкту.