Заповніть форму з помилкою й подивіться, що станеться. Поле стає червоним. Можливо, тонка червона рамка, можливо, червоний текст. Для вас це миттєво читається як «виправ це». А тепер уявіть, що ви не відрізняєте червоного від сірого й зеленого довкола: рамка має вигляд просто рамки, текст - просто тексту, і ніщо не підказує, до якого поля повернутися. Ви заплуталися не через неуважність. Ви заплуталися, бо сайт вклав усе повідомлення в колір, якого ви не бачите, і не лишив жодної іншої підказки. Це одна з найстаріших і найчастіших помилок доступності в інтернеті, у неї є власне правило WCAG, і це правило на найбазовішому рівні відповідності - тому, який Онтаріо реально застосовує.
Ключові факти
- Критерій успіху 1.4.1 «Використання кольору» WCAG (Web Content Accessibility Guidelines) належить до рівня A, найбазовішого рівня відповідності, і входить до стандарту від часів WCAG 2.0 (W3C).
- Правило: колір не має бути єдиним візуальним засобом передавання інформації, позначення дії, спонукання до відповіді чи розрізнення одного елемента від іншого (W3C).
- Порушення колірного зору, за поширеними оцінками, мають приблизно 1 з 12 чоловіків (близько 8%) і 1 з 200 жінок, а загалом у світі таких людей близько 300 мільйонів (Colour Blind Awareness).
- Розділ 14 IASR Онтаріо (Регламент про інтегровані стандарти доступності, O. Reg. 191/11) вимагає від організацій із 50 і більше працівниками та від держсектору відповідності WCAG 2.0 рівня AA на публічних сайтах, а рівень AA містить кожен критерій рівня A, тож 1.4.1 усередині цього мінімуму (ontario.ca).
- Наступний ACR (звіт про відповідність вимогам доступності) для організацій із 20 і більше працівниками треба подати до 31 грудня 2026 року (ontario.ca).
Що насправді вимагає «Використання кольору»?
Менше, ніж підказує назва, і ні від чого не треба відмовлятися. Правило не забороняє кольору й не каже «перестаньте виділяти помилки червоним». Колір - швидкий і дієвий сигнал для тих, хто його бачить, і користуватися ним варто й надалі. 1.4.1 каже вузьку річ: колір не може бути єдиним сигналом. Щоразу, коли ви за допомогою кольору щось повідомляєте користувачеві - це поле заповнено неправильно, це слово - посилання, це замовлення надіслано, це місце зайняте, - має бути друга підказка, яка не залежить від того, чи бачить людина колір.
Ця друга підказка зазвичай маленька. Червоне поле з помилкою отримує ще й значок помилки та рядок тексту з назвою проблеми. Посилання всередині абзацу отримує підкреслення, а не лише інший колір. Рядок «у наявності» отримує слова «у наявності», а не тільки зелену крапку. Обов'язкове поле отримує слово «обов'язково» чи зірочку з поясненням, а не тільки червоний підпис. Майже завжди виправлення - додати форму, слово чи візерунок поруч із кольором, який ви вже використовуєте. Ви нічого не прибираєте. Ви робите так, щоб повідомлення дійшло, навіть коли колір не спрацював.
Де на реальних сайтах ховається інформація, передана лише кольором?
У найнесподіваніших місцях, бо той, хто робив сторінку, бачив колір і не помітив прогалини. Кілька шаблонів трапляються знову і знову.
Класика - посилання, яке відрізняється від довколишнього тексту лише кольором: без підкреслення, без жирного, тільки відтінок. Подумки зробіть сторінку чорно-білою, і ці посилання розчиняться в абзаці. Другий - перевірка форм: поля й повідомлення, які червоніють у разі помилки й зеленіють у разі успіху, причому колір несе весь сенс. Саме тут правило перетинається з тим, щоб зробити доступною саму форму, і саме це тихо коштує вам завершених замовлень. Далі - індикатори статусу скрізь: зелена чи червона крапка наявності, кольорова мітка «знижка» чи «розпродано», графік, де дві лінії можна розрізнити лише тим, що одна синя, а друга помаранчева, календар, де зайняті й вільні дні відрізняються лише відтінком. У кожному такому місці відвідувач із дальтонізмом чи людина з дешевим екраном на яскравому сонці отримує менше інформації, ніж усі інші.
Ніщо з цього не означає, що колір треба прибрати. Це означає, що кольорові потрібен супутник.
Хіба це не те саме правило, що про контраст?
Ні, і різницю варто зрозуміти чітко, бо сайти часто проходять одне й провалюють інше. Правило контрасту (1.4.3) - про читабельність: чи досить різниці між світлим і темним у тексту та тла, щоб людина зі слабким зором узагалі могла його прочитати. «Використання кольору» (1.4.1) - про сенс: чи покладаєтеся ви на те, якого кольору щось, щоб передати повідомлення. Ваше посилання може мати ідеальний контраст 21:1 щодо сторінки й однаково провалити 1.4.1, бо, сильний контраст чи ні, єдине, що позначає його як посилання, - те, що воно синє. Це окремі перевірки на окремих рівнях: 1.4.1 - рівень A, 1.4.3 - рівень AA, і сайт може спіткнутися на будь-якій із них окремо.
Як це перевірити і чим ризикуєте в Онтаріо?
Більшість сайту можна перевірити за кілька хвилин, і хитрість у тому, щоб прибрати колір:
- Шукайте колір, який працює сам. Пройдіть ключові сторінки - оформлення замовлення, форми, списки товарів, особисті кабінети, будь-які графіки - і спитайте про кожну кольорову підказку: якби я не бачив цього кольору, чи зрозумів би я повідомлення? Звичайні порушники - стани помилок і посилання в тексті.
- Знебарвте сторінку. Інструменти розробника в браузері, розширення чи режим відтінків сірого в операційній системі приберуть колір. Усе, що стає неоднозначним у сірому, - проблема за 1.4.1: посилання, якого вже не знайти, червоне поле, яке тепер має такий самий вигляд, як правильно заповнене.
- Додайте другу підказку. Підкреслення для посилань, значок і текстове повідомлення для помилок, підпис чи візерунок для статусу. Невеликі зміни, і вони допомагають усім, а не лише людям із дальтонізмом: додаткова ясність краще читається й на телефоні при денному світлі.
Зауваження щодо інструментів: автоматичний сканер ловить частину цього - він може позначити посилання, яке відрізняється лише кольором, - але не може оцінити наміру, тож пропускає більшість випадків зі статусами й графіками. Це ще одна причина, чому сканування - не аудит: вирішити, чи колір «єдина підказка», може людське око, а не робот. Прикручений віджет теж не допоможе, бо оверлей не може переписати сенсу, якого не несе ваша розмітка.
Щодо ставок, чесна картина та сама, що й у будь-якого бар'єра. В Онтаріо в AODA (Accessibility for Ontarians with Disabilities Act) немає права приватного позову, тож напряму за ним на вас ніхто не подає; чинний шлях для приватної особи - скарга до HRTO (Трибунал із прав людини Онтаріо) за Кодексом прав людини Онтаріо, і ось як насправді розгортається одна скарга. Якщо ви продаєте в США, форма, якої ніхто не може виправити, чи посилання, якого ніхто не може знайти, - саме такий бар'єр, що з'являється в претензіях за ADA (Americans with Disabilities Act) щодо сайтів. Довговічна відповідь - не застереження, а задокументоване виправлення: датований запис того, що ви знайшли й виправили, - те, що має відображати чесний ACR до 31 грудня 2026 року.
Обнадіює те, що оскільки 1.4.1 перебуває на рівні A, виправлення зазвичай найдешевші: слово тут, підкреслення там, значок біля помилки. Базовий рівень, базові зусилля, і це закриває прогалину, яка відрізає реальних клієнтів від тих самих сторінок, які ви найбільше хочете, щоб вони пройшли до кінця.
Дізнайтеся, чи не тримаються ваші форми, посилання й підказки статусу лише на кольорі, і перевірте інші проблеми доступності - безкоштовний звіт Vayle, приблизно 30 секунд: vayle.art. Він виявляє віджети-оверлеї, показує реальні порушення WCAG і точно каже, що юридично стосується вашої організації в Онтаріо. Без зобов'язань.
Vayle працює віддалено й займається інженерною доступністю сайтів для бізнесу Онтаріо. Загальна інформація, а не юридична консультація.