Подивіться на свою кнопку «Додати в кошик» і поставте дивне питання: якби на ній узагалі не було тексту, чи зрозуміла б людина, що це кнопка? Тепер поле пошуку вгорі сторінки: де воно закінчується? Є видимий край, чи поле розчиняється в тлі, поки ви не клікнете всередину? На більшості сайтів є бодай один елемент керування, який погано відповідає на ці питання: блідо-сіра кнопка на білій сторінці, поле форми з найтоншою рамкою-волосиною, набір іконок, вицвілих до вишуканого шепоту. На відкаліброваному моніторі дизайнера в напівтемній кімнаті все має чистий і сучасний вигляд. Для клієнта зі слабким зором, на дешевому ноутбуці, відкинутому при денному світлі, цих країв просто немає. У цієї прогалини є власне правило WCAG, і це одне з найчастіше пропущених правил у всьому інтернеті.
Ключові факти
- Критерій успіху 1.4.11 «Нетекстовий контраст» WCAG (Web Content Accessibility Guidelines) належить до рівня AA і був доданий у WCAG 2.1 (2018) (W3C).
- Правило: візуальна інформація, потрібна, щоб розпізнати елементи користувацького інтерфейсу та їхні стани, а також графічні об'єкти, необхідні для розуміння контенту, має мати співвідношення контрасту щонайменше 3:1 із сусідніми кольорами (W3C).
- Воно окреме від контрасту тексту: правило для тексту (1.4.3, рівень AA) вимагає 4.5:1 для тексту звичайного розміру; нетекстовий контраст - власна перевірка 3:1 для елементів керування й значущої графіки (W3C).
- Обов'язковий мінімум Онтаріо - WCAG 2.0 рівня AA (IASR, O. Reg. 191/11, розділ 14, для організацій із 50 і більше працівниками та держсектору), і оскільки 1.4.11 - критерій 2.1, він перебуває трохи за межами цього юридичного мінімуму, але всередині WCAG 2.2 (ontario.ca / W3C).
- Наступний ACR (звіт про відповідність вимогам доступності) для організацій із 20 і більше працівниками треба подати до 31 грудня 2026 року (ontario.ca).
Що насправді вимагає правило про нетекстовий контраст?
Дещо вужче, ніж «зробіть усе висококонтрастним», і воно ділиться на дві групи. Перша - елементи користувацького інтерфейсу: ті частини елемента керування, які треба бачити, щоб зрозуміти, що це елемент керування і в якому він стані. Це межа кнопки, контур текстового поля, галочка всередині чекбокса, крапка в обраній радіокнопці, перемикач, що показує «увімк.» чи «вимк.», контур фокуса, який показує, де ви перебуваєте, поки ви пересуваєтеся клавішею Tab. Кожна з цих візуальних підказок має сягати 3:1 щодо того, що стоїть просто поруч. Друга група - графічні об'єкти: частини зображення чи схеми, потрібні, щоб зрозуміти суть, - сектори кругової діаграми, лінії графіка, іконка, яка несе сенс без текстового підпису поруч.
Є розумні винятки, і вони важливі. Елемент керування, який неактивний чи вимкнений, не мусить відповідати співвідношенню. Усе, чий вигляд повністю залишено браузеру за замовчуванням і не зачеплено вашим дизайном, звільнене. А там, де конкретне представлення необхідне - логотип компанії, прапор, фотографія, знімок екрана, - правило відступає. Лишаються повсякденні меблі вашого сайту: кнопки, поля й іконки, які людям справді треба знайти й використати.
Де реальні сайти провалюють це, не помічаючи?
У місцях, де дизайнер обрав «делікатно» й жодного разу не перевірив на поганому екрані. Беззаперечний лідер - поле форми без рамки чи з рамкою-волосиною: поле пошуку чи введення під час оформлення замовлення без краю або з таким блідим краєм, що він ніколи не сягає 3:1, і користувач зі слабким зором не може зрозуміти, куди клікнути. Слідом іде низькоконтрастна кнопка: світло-сіра на білому або кнопка-«привид», яка являє собою просто блідий текст із ледь помітним контуром. Далі елементи керування з самих іконок: лупа для пошуку, «гамбургер» для меню, голий хрестик для закриття, намальовані м'яким сірим, що розчиняється в шапці. Перемикачі й чекбокси, у яких стани «увімк.» і «вимк.» відрізняються надто близьким відтінком. І графіки, де дві серії даних однакової світлоти, а саме тут правило тисне руку правилу про використання кольору: колір не має бути єдиним сигналом, а будь-який сигнал, який ви використовуєте, теж має бути видимим.
Ознака завжди одна. Тому, хто це зробив, усе здається нормальним, бо він знає, що це кнопка, і бачить колір. Нетекстовий контраст - про відвідувача, який не знає й не бачить.
Хіба це не те саме, що правило про контраст тексту?
Ні, і плутанина між ними - причина, чому сайти проходять одне й пропускають інше. Правило контрасту тексту (1.4.3) - про читання слів: звичайному текстові потрібно 4.5:1, щоб людина зі слабким зором могла розібрати літери. Нетекстовий контраст (1.4.11) - про те, щоб бачити елементи керування й значущі форми: край кнопки, межу поля, іконку, лінію графіка, - за нижчої планки 3:1. Текст вашого абзацу може чудово проходити 1.4.3, а кнопка «Продовжити» під ним провалювати 1.4.11, бо її контур майже невидимий. Дві окремі перевірки, два пороги, і сканер упіймає частину провалів за текстом, тихо пропустивши більшість провалів за компонентами, - ще одна причина, чому сканування - не аудит.
Чи обов'язковий нетекстовий контраст в Онтаріо насправді?
Ось чесна відповідь, бо версія «зріжемо кут» нікому не допомагає. IASR Онтаріо вказує на WCAG 2.0 рівня AA, а 1.4.11 не існувало до WCAG 2.1. Тож за суворою буквою регламенту бліда кнопка сама по собі не порушення IASR, на відміну від відсутнього alt-тексту чи пастки клавіатури. Це вузьке прочитання, і це погана причина пропустити правило.
Три речі роблять його важливим однаково. По-перше, довговічна ціль будь-якої серйозної розробки - WCAG 2.2 рівня AA, який містить 1.4.11: закон - це підлога, а не стеля, і підлога має піднятися. По-друге, реальний шлях для приватної особи в Онтаріо зовсім не AODA: в AODA (Accessibility for Ontarians with Disabilities Act) немає права приватного позову, тож чинний шлях - скарга до HRTO (Трибунал із прав людини Онтаріо) за Кодексом прав людини Онтаріо, а в людини, яка справді не може знайти вашу кнопку оформлення замовлення, є бар'єр, хоч би яка версія WCAG його називала. По-третє, якщо ви продаєте в США, низькоконтрастні елементи керування - саме те, що з'являється в претензіях за ADA (Americans with Disabilities Act) щодо сайтів, де звичайний орієнтир - WCAG 2.1 і 2.2 рівня AA. Захищена позиція та сама, що завжди: задокументоване виправлення, датований запис того, що ви перевірили й виправили, - те, що має відображати чесний ACR до 31 грудня 2026 року.
Добра новина в тому, що виправити це дешево. Зробити контур кнопки глибшим, рамку поля форми темнішою, надати іконці достатньої ваги, щоб вона виділялася, - це невеликі зміни в CSS, а не переробка, і вони роблять сайт зручнішим для всіх, хто мружиться на телефон на сонці.
Дізнайтеся, чи сягають ваші кнопки, поля форм, іконки й контури фокуса планки 3:1, і перевірте інші проблеми доступності - безкоштовний звіт Vayle, приблизно 30 секунд: vayle.art. Він виявляє віджети-оверлеї, показує реальні порушення WCAG і точно каже, що юридично стосується вашої організації в Онтаріо. Без зобов'язань.
Vayle працює віддалено й займається інженерною доступністю сайтів для бізнесу Онтаріо. Загальна інформація, а не юридична консультація.