Найчастіше порушення WCAG (Web Content Accessibility Guidelines) в інтернеті - не відсутні субтитри й не зламаний підпис для екранного читача. Це колір тексту, який недостатньо контрастує з тлом, і, за аналізом WebAIM Million 2025 для мільйона найвідвідуваніших головних сторінок, у 79,1% сайтів є бодай один такий випадок, у середньому 29,6 порушення контрасту тексту на сторінку. За IASR Онтаріо (Регламент про інтегровані стандарти доступності) дотримання правила контрасту на рівні WCAG 2.0 AA не опціональне для організацій із 50 і більше працівниками: це юридичний мінімум із 2014 року, а до строку ACR (звіту про відповідність вимогам доступності) 31 грудня 2026 року лишилося пів року.
Ключові факти
- Звіт WebAIM Million 2025 проаналізував 1 000 000 найвідвідуваніших головних сторінок і знайшов низькоконтрастний текст на 79,1% сторінок - найпоширеніше порушення WCAG п'ятий рік поспіль; на середній сторінці було 29,6 випадку низькоконтрастного тексту (WebAIM, webaim.org/projects/million/2025).
- WCAG 1.4.3 Контраст (мінімальний), критерій рівня AA від часів WCAG 2.0, вимагає коефіцієнта контрасту 4,5:1 між текстом і тлом для звичайного тексту і 3:1 для великого тексту - це 18 пунктів або 14 пунктів напівжирним (W3C).
- Текст логотипів і суто декоративний текст звільнені від правила контрасту; текст неактивних елементів інтерфейсу теж звільнений (W3C, WCAG Understanding 1.4.3).
- WCAG 1.4.11 Нетекстовий контраст (рівень AA, додано у WCAG 2.1) поширює поріг 3:1 на візуальну інформацію, потрібну, щоб розпізнати кнопки, поля форм, прапорці й індикатори фокуса, - це вище за базу IASR у WCAG 2.0, але на практиці це мета найкращої практики для будь-якого нового сайту (W3C, WCAG Understanding 1.4.11).
- IASR Онтаріо вимагає, щоб організації з 50 і більше працівниками (і держсектор) відповідали WCAG 2.0 рівня AA для публічних сайтів, зі строком звіту 31 грудня 2026 року, і 1.4.3 входить у цей мінімум; в AODA (Accessibility for Ontarians with Disabilities Act) немає права приватного позову, але виключений користувач може звернутися до HRTO (Трибунал із прав людини Онтаріо) за Кодексом прав людини Онтаріо.
Що насправді вимагає правило WCAG про колірний контраст?
WCAG 1.4.3 задає мінімальний коефіцієнт контрасту яскравості: 4,5:1 для звичайного тексту і 3:1 для великого. Коефіцієнт рахують, ділячи відносну яскравість світлішого кольору на відносну яскравість темнішого, - будь-який інструмент контрасту миттєво видає цю цифру за двома hex-значеннями. Чорний текст на білому тлі дає коефіцієнт 21:1, далеко вище за поріг. Білий текст на середньо-сірому тлі може здаватися читабельним, але під час перевірки дає приблизно 3,2:1, а це провал для всього, що менше за 18 пунктів.
Правило стосується тексту, відмальованого на сторінці, а не файлу дизайну. «Фірмовий» запилено-сірий чи приглушений бірюзовий для основного тексту може мати елегантний вигляд на екрані, але не пройти перевірки 4,5:1 - саме тому це порушення найстійкіше в інтернеті, хоча виправити його простіше за багато інших.
Що вважається «великим текстом» за WCAG 1.4.3?
Для великого тексту поріг нижчий (3:1 замість 4,5:1), бо розмір компенсує знижений контраст. WCAG визначає великий текст як текст від 18 пунктів або від 14 пунктів напівжирним - приблизно 24 CSS-пікселі для 18pt і 18,67 CSS-пікселя для 14pt, залежно від налаштувань браузера й системи (W3C). Усе менше за ці розміри вважається звичайним текстом і потребує повних 4,5:1. Заголовок 24px звичайного накреслення - великий текст; основний текст 16px - ні.
Чи стосується те саме правило кнопок, полів форм та іконок?
Початковий WCAG 1.4.3 охоплює лише текст (і зображення тексту). Він нічого не каже про те, чи досить видно рамку поля введення чи чи вирізняється сіра кнопка надсилання на білому тлі.
WCAG 1.4.11 Нетекстовий контраст (рівень AA, WCAG 2.1) закриває цю прогалину. Він вимагає коефіцієнта контрасту 3:1 для візуальної інформації, потрібної, щоб розпізнати елементи інтерфейсу та їхні стани, - на практиці: рамка поля введення на тлі сторінки, контур прапорця, індикатор фокуса, стовпці даних на графіку. Вимоги до індикаторів фокуса додатково посилила WCAG 2.2 (SC 2.4.11 Помітність фокуса, мінімум, рівень AA), але вимоги до нетекстового контрасту і 2.1, і 2.2 лежать вище юридичного мінімуму Онтаріо у WCAG 2.0, тож це найкраща практика, а не чинний обов'язок, - дивіться, чим WCAG 2.0 і 2.2 відрізняються для сайтів Онтаріо.
До яких бізнесів Онтаріо застосовується правило контрасту IASR?
IASR ділить обов'язки щодо вебконтенту на два пороги:
Організації з 50 і більше працівниками (приватний сектор і неприбуткові організації): публічні сайти й вебконтент мають відповідати WCAG 2.0 рівня AA. Для інтернет-сайтів це діє з 1 січня 2021 року. ACR 31 грудня 2026 року - формальне підтвердження того, що ваша організація виконала ці поточні вимоги, зокрема стандарт контрасту 1.4.3.
Організації з 1-49 працівниками: обов'язок IASR щодо вебконтенту - WCAG 2.0 рівня A, який не містить 1.4.3 (контраст - критерій AA). Однак якщо користувач із порушенням зору не може користуватися вашим сайтом і подає скаргу до HRTO за Кодексом прав людини Онтаріо про дискримінацію, трибунал дивиться, чи бар'єр було створено чи збережено, а не лише те, який технічний рівень IASR застосовується. У бізнесу з 30 працівниками, що використовує поєднання кольорів нижче за 4,5:1, є потенційний ризик, якого поріг чисельності IASR не знімає.
Організації держсектору: WCAG 2.0 AA діє для них з 1 січня 2014 року; їхній строк ACR (31 грудня 2025 року) уже минув.
В AODA немає права приватного позову - у провінційному законі про доступність немає механізму індивідуального позову в дусі ADA. Але і процес звіту про відповідність, і шлях через HRTO реальні; варто розуміти, який вигляд насправді має скарга в HRTO, якщо контраст на вашому сайті не проходить.
Чому так багато сайтів досі порушують це правило?
Бо дизайнери й розробники зазвичай працюють на відкаліброваних моніторах в освітлених офісах, і поєднання кольорів, які в цих умовах мають нормальний вигляд, часто не проходять математичного порогу. Частий шаблон: основний текст набрано фірмовим кольором - приглушеним бірюзовим, м'яким темно-синім, світло-сірим, - який мав розбірливий вигляд на білому на друкованій пробі, але жодного разу не проходив через інструмент контрасту. Інший шаблон: розробник використовує стиль-заглушку (color: #aaa на білому тлі) для повідомлень про помилки чи допоміжного тексту, не розуміючи, що #aaa на #fff дає приблизно 2,32:1 - явний провал.
Дані WebAIM дають цьому цифри: у середньому 29,6 випадку низького контрасту на сторінку означає, що проблема пронизує більшість сайтів, а не обмежується одним недоглядом. Оскільки порушення часто живуть у фірмових колірних токенах, вони повторюються на кожній новій сторінці й у кожному новому компоненті й із часом накопичуються.
Чи може оверлей доступності виправити проблеми контрасту?
Ні. Коефіцієнти контрасту - функція значень кольору тексту й тла в CSS сайту. У віджета-оверлею, вставленого стороннім фрагментом JavaScript, немає надійного способу знати, який текст на довільній сторінці інформаційний, а який декоративний, чи який реальний контраст між напівпрозорим елементом і фоновим зображенням. Оверлеї покривають приблизно 30-40% порушень WCAG, а контраст - саме тому, що це обчислювана властивість кожного текстового елемента на кожній сторінці, - одна з галузей, де автоматичні оверлеї стабільно не справляються.
FTC (Федеральна торгова комісія США) оштрафувала найбільшого постачальника оверлеїв, accessiBe, на 1 000 000 доларів США за неправдиве твердження, що його віджет приводить сайти у відповідність (FTC, постанову остаточно затверджено у квітні 2025 року). Порушення контрасту, що лишаються на сайтах з оверлеями, - задокументований шаблон у судовій статистиці: у першій половині 2025 року позови щодо доступності отримали 456 сайтів зі встановленими оверлеями. Виправлення контрасту живе в CSS, а не в скрипті, який вантажиться поверх нього.
Як знайти й виправити порушення контрасту до строку 2026 року?
Найшвидше почати зі спеціального інструмента контрасту: WebAIM Contrast Checker (webaim.org/resources/contrastchecker) приймає два hex-значення й менш ніж за секунду повертає коефіцієнт і результат «пройдено/не пройдено» для AA та AAA. Інструменти розробника в Chrome і Firefox містять панель доступності, яка показує контраст для елемента під курсором. Автоматичний сканер на кшталт Google Lighthouse позначить найочевидніші випадки за один прохід.
Два практичні кроки пришвидшують виправлення:
Спершу перевірте токени дизайну. Більшість сайтів використовують невеликий набір повторюваних поєднань кольорів - фірмові кольори на білому, текст на тонованих тлах, сіре на сірому. Виправте коефіцієнт на рівні токена чи змінної CSS, і виправлення пошириться всюди, де цей токен використовується, без посторінкових пошуків.
Перевіряйте живу сторінку, а не лише файл дизайну. Фонові зображення, напівпрозорі шари, стани наведення й фокуса та динамічно вставлений текст впливають на реальний контраст, який відмальовує браузер. Інструменти, що перевіряють живий DOM, ловлять порушення, які пропускає перегляд статичного макета.
Саме таку знахідку справжній аудит доступності виявляє й документує, даючи вам датовані докази для ACR і позицію, яку можна захистити, якщо скаргу колись буде подано. ACR, який ви подаєте до 31 грудня 2026 року, - той самий документ, де фіксується, чи виконано ваші обов'язки за WCAG 2.0 для сайту, зокрема контраст; що насправді охоплює звіт про відповідність, пояснює, що ви підтверджуєте.
Дізнайтеся, де стоять контраст та інші прогалини WCAG на вашому сайті, приблизно за 30 секунд - безкоштовний звіт Vayle: vayle.art. Без зобов'язань.
Vayle працює віддалено й займається інженерною доступністю сайтів для бізнесу Онтаріо. Загальна інформація, а не юридична консультація.