Палітра з доступним контрастом: безпечні перші дії та стоп-сигнали
Брендова палітра подобається на великому екрані, але світла кнопка губиться, а помилку у формі позначає лише червона рамка. Приймати треба конкретні пари кольорів у робочих станах. Назва відтінку або загальний бал палітри цього не пояснює.
Карта ризиків допоможе власнику сайту й дизайнеру перед затвердженням айдентики. Вона стосується читання та взаємодії; перевірка кольорів сама по собі не доводить повної доступності інтерфейсу.
Карта ризиків кольору в інтерфейсі
| Елемент | Що порівняти | Коли зупинити затвердження |
|---|---|---|
| Основний текст | Текст і фактичний фон | Звичайний текст не досягає 4,5:1 |
| Великий текст | Розмір, вага й пара кольорів | Критерій великого тексту застосовано помилково |
| Кнопка чи поле | Усі потрібні стани | Неможливо розрізнити елемент або фокус |
| Помилка чи графік | Колір разом із підписом чи формою | Зміст передано тільки кольором |
Почніть із реальних пар
Попросіть таблицю кодів кольору, їхніх ролей і допустимих поєднань. Перевірте текст на кнопці, посилання у абзаці, підказку поля й текст на фотографії. Для останнього важливий фон у місці літер; одна середня оцінка всього фото не підходить.
WCAG 2.2 для звичайного тексту на рівні AA задає мінімум 4,5:1, для великого — 3:1, із визначеними винятками. «Великий» означає щонайменше 18 пунктів або 14 пунктів жирним. Для нетекстових компонентів є окремий критерій; не переносіть текстову перевірку на все без розбору.
Затверджуйте систему використання
Дизайнер може зберегти світлий бренд-колір як декоративний і підібрати темніший для читання. Попросіть приклади звичайного стану, наведення, фокусу та помилки. Не вимагайте, щоб кожен відтінок був придатний для будь-якого тексту: його роль потрібно обмежити.
Якщо стан визначається лише кольором, додайте зрозумілий текст, значок із поясненням або форму. Перевірте графік у відтінках сірого як допоміжну пробу, але не замінюйте нею вимірювання контрасту. Збережіть затверджені пари й повторюйте перевірку після зміни фону або шрифту.
Приклад звернення
«Перед затвердженням потрібні таблиця пар із коефіцієнтами, ролі кольорів і приклади станів. Якщо світлий бренд-колір не підходить для тексту, запропонуйте читабельний варіант без втрати характеру».
Короткі відповіді
Чи треба змінювати логотип?
Для логотипів критерій мінімального контрасту тексту має виняток, але користувацькі кнопки й написи потребують власної перевірки.
Чи достатньо перевірки на телефоні?
Візуальна проба корисна, але не замінює вимірювання пар і перевірку станів.
Що отримати після роботи?
Коди, ролі, дозволені пари та перелік перевірених елементів із відомими обмеженнями.
Джерела й наступний крок
Факти звірено 30 вересня 2026 року: W3C: мінімальний контраст тексту; W3C: контраст компонентів; W3C: зміст не лише через колір. Практичну таблицю та порядок домовленості підготовлено редакцією для цього сценарію.
Для суміжних завдань прочитайте: перевірка малого логотипа; комплект графічних шаблонів. У каталозі відповідних послуг YouLazy можна порівняти профілі, портфоліо й відгуки та зв’язатися з виконавцем напряму.
Наступний крок
Підготовка макета зовнішньої реклами: як прийняти результат і що перевірити
Обговорення
Коментарів ще немає — станьте першим
Вхід щоб залишити коментар