WCAG Аналізатор
Проаналізуйте всю колірну палітру на відповідність доступності WCAG рівнів AA і AAA. Перегляньте коефіцієнт контрасту кожної пари HEX і легко виправте невдалі.
Палітра для аналізу
Матриця контрастності
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Легенда WCAG 2.1
Рівень AAA
Коефіцієнт ≥ 7:1 — відмінно
Рівень AA
Коефіцієнт ≥ 4,5:1 — стандарт
AA великий
Коефіцієнт ≥ 3:1 — великий текст
Не пройдено
Коефіцієнт < 3:1 — не відповідає
Проаналізуйте всю колірну палітру на відповідність доступності WCAG рівнів AA і AAA. Перегляньте коефіцієнт контрасту кожної пари HEX і легко виправте невдалі.
WCAG Аналізатор показує лише елементи керування та результати, що відповідають його функції. Доступні параметри залежать від інструмента й вхідних даних.
Підтримувані формати
Як це працює
Крок 1
Відкрийте WCAG Аналізатор і підготуйте дані, які запитує інтерфейс
Крок 2
Налаштуйте видимі параметри для потрібного результату
Крок 3
Перевірте результат перед копіюванням, експортом або повторним використанням
Поширені помилки, яких слід уникати
- Не вважайте формат чи опцію підтримуваними, якщо їх немає в інтерфейсі.
- Перевіряйте значення перед використанням у фірмовому стилі, інтерфейсі чи виробничому файлі.
- Для тексту й компонентів UI додатково перевіряйте контраст.
Поради від професіоналів
- Зберігайте вихідне значення разом із результатом для порівняння варіантів.
- Використовуйте формати, які інструмент реально показує, замість приблизних перетворень.
- На телефоні й планшеті дозволяйте текстам та елементам керування переноситися.
Обробка даних
Обробка залежить від використаної функції. Згода, аналітика та функції облікового запису сайту відокремлені від операції з кольором.
Що робить цей інструмент
Проаналізуйте всю колірну палітру на відповідність доступності WCAG рівнів AA і AAA. Перегляньте коефіцієнт контрасту кожної пари HEX і легко виправте невдалі. WCAG Аналізатор зосереджується на цьому завданні й не передбачає функцій, яких немає в інтерфейсі. Використовуйте доступні елементи керування, отримайте потрібний результат і перевірте показані значення перед перенесенням в інший інструмент, таблицю стилів, макет чи документ.
Підготовка придатних даних
Почніть із даних, які запитує WCAG Аналізатор: кольору, значення, зображення чи налаштування залежно від екрана. На цій сторінці вказані формати Palette, HEX, CSS Variables, JSON. Якщо формат або опція не показані в інтерфейсі, не вважайте їх підтримуваними цією конкретною функцією.
Читання та перевірка результату
Читайте результат у контексті виконаної операції. Порівняйте його з вихідним значенням і перевірте налаштування, що вплинули на обчислення. Для важливої візуальної роботи також перегляньте результат у реальному інтерфейсі, де він використовуватиметься.
Робота на телефоні й планшеті
WCAG Аналізатор використовує адаптивну розмітку сайту. Заголовки, підзаголовки, breadcrumbs і елементи керування можуть переноситися на вузьких екранах, щоб довгі переклади не обрізалися. Усе одно перевірте підсумок на пристрої й у контексті майбутнього використання.
Повторне використання результату
Після перевірки використовуйте лише дії, які реально пропонує WCAG Аналізатор, наприклад копіювання чи експорт, якщо вони доступні. Збережіть вихідне значення для відтворення налаштування, а для кольорів UI задокументуйте їх роль і потрібний контраст.
Схожі інструменти
Посібники та інструкції
Дізнайтеся, як користуватися нашими інструментами, за допомогою детальних посібників.
wcag-analyzer: практичний посібник accessibility
Локалізований посібник для wcag-analyzer, практик accessibility і типових помилок.
wcag-analyzer: практичний посібник accessibility
Локалізований посібник для wcag-analyzer, практик accessibility і типових помилок.
wcag-analyzer: практичний посібник export
Локалізований посібник для wcag-analyzer, практик export і типових помилок.
Поширені запитання
Дізнайтеся, як користуватися нашими інструментами, за допомогою детальних посібників.