WCAG 1.4.11 Контраст нетекстових елементів

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

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

Візуальне подання таких елементів повинне мати коефіцієнт контрастності щонайменше 3:1 відносно сусіднього кольору (кольорів):

• Компоненти інтерфейсу користувача: візуальна інформація, потрібна, щоб розпізнати компонент і його стани, — рамка текстового поля, контур прапорця, сама галочка, позначка вибраної вкладки, індикатор фокуса;
• Графічні об'єкти: частини графіки, потрібні для розуміння вмісту, — лінії та стовпчики діаграми, значущі частини іконки.

Винятки:

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

Текст тут не розглядається — він належить до 1.4.3.

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

• світло-сірі рамки полів введення (#ddd на білому — значно менше за 3:1) без іншої ознаки;
• власні прапорці, перемикачі й селектори розміру, вибраний стан яких — блідий відтінок;
• кнопки лише з іконкою (пошук, кошик, обране) у світлому фірмовому кольорі;
• власна рамка фокуса світлого кольору або outline: none з ледь помітною заміною;
• рейтинг зірочками з блідими порожніми і трохи темнішими заповненими зірками;
• лінії діаграм в особистому кабінеті, занадто світлі на фоні.

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

Автоматично: жодне автоматичне правило нашого сканера не відповідає цьому критерію. axe-core вимірює контрастність тексту, але не може визначити, які рамки, іконки чи стани потрібні для розуміння компонента. Тут потрібна ручна перевірка.

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

Як виправити

• Затемніть у темі рамки полів введення й кольори іконок, доки вони не сягнуть 3:1 відносно фону.
• Показуйте вибрані стани чіткою рамкою, галочкою чи заливкою, а не лише блідим відтінком.
• Використовуйте індикатор фокуса з контрастністю щонайменше 3:1 відносно сусідніх кольорів, наприклад темний контур 2 px з відступом.
• Додайте до діаграм прямі підписи чи візерунки, якщо не всі кольори можуть сягнути 3:1.

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

• 1.4.3 Контраст (мінімальні вимоги) — 4,5:1 для тексту.
• 1.4.1 Застосування кольору — колір не може бути єдиною ознакою.
• Перевірка контрастності — виміряйте два кольори.

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

Чи потрібна рамкам полів форми контрастність 3:1?

Якщо рамка — єдина візуальна ознака, яка показує, де поле, то так: їй потрібно 3:1 відносно сусіднього кольору. Поле з чітко контрастною заливкою фону може натомість спиратися на неї.

Чи потрібна неактивним кнопкам контрастність 3:1?

Ні. Неактивні (вимкнені) компоненти інтерфейсу є винятком, як і елементи керування, вигляд яких задає браузер і який автор не змінював.

Чи стосується 1.4.11 іконок?

Так, якщо іконка потрібна, щоб зрозуміти вміст чи розпізнати елемент керування, — наприклад, іконка кошика, пошуку чи закриття без текстової мітки. Суто декоративні іконки не охоплено.

Чи може автоматичний інструмент перевірити контраст нетекстових елементів?

Не надійно. Наш сканер вимірює контрастність тексту, а рамки, іконки, рамки фокуса і частини діаграм треба перевіряти вручну інструментом для перевірки контрастності.