WCAG 1.4.1 Застосування кольору

Критерій успіху 1.4.1 потрібен для того, щоб інформація не губилася для людей, які бачать кольори інакше або не бачать їх зовсім, — людей із порушеннями кольоросприйняття, зі слабким зором і всіх, хто користується монохромним або висококонтрастним дисплеєм. Це рівень A, і він входить до EN 301 549 (пункт 9.1.4.1; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Колір не може бути єдиним візуальним засобом, щоб:

• передати інформацію («акційні ціни червоні»);
• позначити дію;
• спонукати до відповіді;
• виокремити візуальний елемент (наприклад, посилання всередині абзацу).

Колір можна використовувати й далі — йому просто потрібна друга візуальна ознака: текст, іконка, підкреслення, візерунок чи форма.

Для посилань у тексті документ W3C Understanding приймає різницю в яскравості як додаткову ознаку: якщо колір посилання має контрастність щонайменше 3:1 з навколишнім текстом (техніка G183), його вважають розрізнюваним. Посилання, які взагалі ніяк візуально не виділені, не належать до сфери 1.4.1, хоча користуватися ними важко.

Типові помилки в інтернет-магазині

• посилання в описах товарів, правилах чи футері, виділені лише трохи іншим кольором, без підкреслення;
• поля форми з помилкою, позначені лише червоною рамкою;
• наявність товару, показана зеленою чи червоною крапкою без тексту («Є в наявності», «Немає в наявності»);
• зразки кольорів без назв, тож покупець не відрізнить «темно-синій» від «чорного»;
• діаграми чи таблиці розмірів, де категорії відрізняються лише кольором;
• вибраний розмір або поточний крок, показаний лише зміною кольору.

Як перевірити

Автоматично: наш сканер позначає посилання всередині текстового блоку, які можна відрізнити від навколишнього тексту лише за кольором (правило посилання в текстовому блоці). Інші випадки використання кольору — індикатори стану, стани помилок, діаграми — неможливо оцінити автоматично, вони потребують ручної перевірки.

Вручну: перегляньте сторінку у відтінках сірого (розширенням браузера або кольоровим фільтром операційної системи). Усе, що ви більше не можете зрозуміти — яке посилання є посиланням, у якому полі помилка, який варіант вибрано, — є порушенням. Перевірте стани наведення, фокуса, помилки й вибору.

Як виправити

• Підкреслюйте посилання в тексті, принаймні в основному тексті та при наведенні й фокусі.
• Додайте текст та іконку до помилок і стану наявності.
• Показуйте назву кожного зразка кольору, принаймні як доступну назву і під час вибору.
• У діаграмах на додачу до кольору використовуйте візерунки, підписи або прямі позначки.
• Позначайте вибраний варіант рамкою, галочкою чи жирним текстом, а не лише новим кольором.

Пов'язані критерії

• 1.4.3 Контраст (мінімальні вимоги) — 4,5:1 для тексту.
• 1.4.11 Контраст нетекстових елементів — 3:1 для іконок та елементів керування.
• 1.3.3 Сенсорні характеристики — інструкції, що спираються на колір.

Часті запитання

Чи мають посилання в тексті бути підкресленими?

Не завжди, але одного кольору недостатньо, якщо він не дає різниці в яскравості щонайменше 3:1 відносно навколишнього тексту (техніка W3C G183). Найпростіший і найнадійніший варіант — підкреслення.

Чи достатньо червоної рамки на полі з помилкою?

Ні. Додайте другу ознаку, яка не залежить від кольору, наприклад іконку й текстове повідомлення про помилку. 3.3.1 «Виявлення помилок» також вимагає описати помилку текстом.

Чи забороняє 1.4.1 кольорове кодування?

Ні. Колір дозволений і корисний; він просто не може бути єдиним візуальним засобом. Додайте поруч текст, візерунок, іконку чи форму.

Чи стосується 1.4.1 контрастності?

Ні. Контрастність тексту — це 1.4.3, а іконок та елементів керування — 1.4.11. 1.4.1 стосується кольору як єдиного сигналу, незалежно від контрастності.