Оновлено: .
WCAG — набір вимог доступності. APCA — модель оцінювання контрасту. Коректно порівнювати APCA з методом контрасту WCAG 2, а не протиставляти його всьому стандарту. Наразі APCA можна використовувати як додатковий інструмент проєктування; він не замінює перевірку відповідності WCAG 2.2.
Що вимірює WCAG 2
Коефіцієнт контрасту обчислюють за відносною яскравістю світлішого й темнішого кольорів: (Lсвітлий + 0,05) / (Lтемний + 0,05). Діапазон — від 1:1 до 21:1. Якщо поміняти текст і тло місцями, число залишиться тим самим.
Для критерію 1.4.3 рівня AA звичайному тексту потрібно щонайменше 4,5:1, великому — 3:1. Великим вважають текст від 18 pt або від 14 pt у жирному накресленні: приблизно 24 і 18,67 CSS px відповідно. Не округлюйте результат до прохідного: 4,499:1 не стає 4,5:1. Для AAA критерій 1.4.6 задає 7:1 та 4,5:1 відповідно. Логотипи, декоративний і деякі інші різновиди тексту мають винятки.
Межа елемента та його підпис — різні перевірки. Для візуальної інформації, потрібної для розпізнавання компонента, його стану та значущої графіки, діє 1.4.11 із порогом 3:1 відносно сусідніх кольорів і власними винятками. Це не вимога обвести кожну кнопку контрастною рамкою.
Що змінює APCA
APCA — Accessible Perceptual Contrast Algorithm — обчислює lightness contrast, позначений Lc. Він враховує полярність: темний текст на світлому тлі зазвичай дає додатний результат, світлий на темному — від’ємний. Від’ємне число не означає поганий контраст. Для тлумачення важливі модуль значення та умови застосування.
Розділяйте саме обчислення та рекомендації щодо типографіки. Основна функція APCA отримує яскравості тексту й тла. Розмір і насиченість шрифту використовують для тлумачення через рекомендації та таблиці; вони не є аргументами цього базового обчислення.
У рекомендаціях автора APCA, наприклад, Lc 75 пов’язаний з основним текстом за певних розмірів і накреслень, а Lc 60 — з іншими умовами читання. Із цього не випливає універсальне правило «будь-яке значення вище 60 проходить». Не можна й перетворювати Lc на відсотки або точно переводити його в 4,5:1.
APCA стане WCAG 3?
Станом на 5 листопада 2026 року опублікований Working Draft WCAG 3 від 10 вересня 2026 року залишає алгоритм контрасту невизначеним. У розділі Text contrast sufficient є пряма примітка, що алгоритм ще належить вибрати. Сам документ — робоча чернетка, а не чинна W3C Recommendation.
Тому формулювання «APCA — майбутнє, на яке обов’язково перейде WCAG» видає очікування за ухвалене рішення. Точніше сказати: APCA розвивався як кандидат для нового підходу до контрасту; він корисний для додаткового оцінювання, але остаточного рішення W3C не ухвалено. Назва npm-пакета apca-w3 сама собою не встановлює нормативного статусу.
Власні приклади замість позначки «реальне сприйняття»
Нижче — наші пари кольорів, а не значення з чужого скриншота. Усі кольори — непрозорі sRGB, без градієнтів і змішування. APCA обчислено реалізацією apca-w3 0.1.9, алгоритм 0.0.98G-4g. Зразки на ілюстрації використовують Arial, 24 px, 700; окрема колонка таблиці оцінює поріг 4,5:1 для звичайного тексту.
| Текст / тло, sRGB | WCAG 2 | APCA | Звичайний текст AA, 4,5:1 |
|---|---|---|---|
| #FFFFFF / #F26722 | 3,12:1 | -62,70 Lc | Ні |
| #000000 / #F26722 | 6,74:1 | +46,73 Lc | Так |
| #428FCC / #FFFFFF | 3,48:1 | +62,10 Lc | Ні |
| #428FCC / #000000 | 6,03:1 | -39,59 Lc | Так |
| #FFFFFF / #B54500 | 5,50:1 | -81,88 Lc | Так |
| #767676 / #FFFFFF | 4,54:1 | +71,57 Lc | Так |
| #FFFFFF / #767676 | 4,54:1 | -77,04 Lc | Так |
Білий на #F26722 має контраст WCAG 3,12:1: для звичайного тексту цього недостатньо, для великого поріг 3:1 виконано. Чорний на тому самому тлі має коефіцієнт 6,74:1, але нижчий модуль Lc. Моделі по-різному оцінюють ці пари. Це не доказ того, що чорний підпис не може прочитати жодна людина або що білий підходить кожному.
Зверніть увагу і на #767676 із білим: за перестановки кольорів WCAG залишається 4,54:1, а APCA змінюється з +71,57 на −77,04 Lc. Це наочна демонстрація різниці математичних моделей без суперечки про особистий смак.
Рядок «Real perception: ✓» у популярних порівняльних картинках створює хибну визначеність. Для такого висновку потрібні учасники, описані особливості зору, пристрої, освітлення, розмір і гарнітура, завдання читання та вимірюваний результат. Наші приклади показують розбіжність оцінок; вони не є таким дослідженням.
Дані обчислення у JSON містять початкові кольори, значення до округлення, версію реалізації та SHA-256 вихідного файла. Для відтворення використовуйте APCAcontrast(sRGBtoY(textRGB), sRGBtoY(backgroundRGB)) із зазначеної реалізації; WCAG обчислюється за формулою вище з перетворенням sRGB на лінійну яскравість.
Як ухвалити рішення в реальному інтерфейсі
- Зафіксуйте нормативну ціль і перевірте її методом відповідної версії WCAG.
- Виміряйте фактичне тло: стани hover, focus, disabled, помилки, вибрані елементи, світлу й темну теми. Для прозорого тексту врахуйте підсумкове змішування.
- Додатково оцініть APCA разом із гарнітурою, розміром, насиченістю та призначенням тексту. Запишіть версію інструмента.
- Якщо результат сумнівний, змініть пару кольорів або типографіку. Не підміняйте невдалу перевірку зручнішою метрикою.
- Перевірте читабельність у завданнях із представниками аудиторії.
Наприклад, білий текст на темнішому помаранчевому #B54500 отримує 5,50:1 та −81,88 Lc. Це кандидат для подальшої перевірки, який відповідає порогу WCAG AA для звичайного тексту. Така правка продуктивніша, ніж доводити, що один із попередніх зразків «об’єктивно правильний».
Контраст не повинен нести весь зміст
Навіть відмінний контраст не розв’язує проблему, якщо помилку позначено тільки кольором, а ряди графіка різняться лише відтінками. Додавайте пояснення причин помилок, підписи, маркери та типи ліній. Емуляція порушень колірного зору допомагає знаходити деякі проблеми, але не відтворює досвід усіх людей.
Джерела та статус стандартів перевірено 5 листопада 2026 року.
Застосувати правила з ШІ-агентом
За результатами дослідження ми створили відкриті скіли для Codex і Claude Code, які допомагають аналізувати й покращувати сайти та застосунки. Accessible UI спрямовує агента під час перевірки семантики, керування клавіатурою, фокуса, форм і контрасту; Adaptive Interfaces допомагає адаптувати інтерфейс до розмірів вікна, масштабу тексту, клавіатури та складаних пристроїв. Агент вивчає поточний проєкт, пропонує обґрунтовані покращення та перевіряє погоджені зміни. Скіли не замінюють перевірку з користувачами й допоміжними технологіями.
Практичні правила цієї серії зібрано у скілі Accessible UI на GitHub: семантика, клавіатура, фокус, форми, контраст і перевірка результату. Інструкції написані англійською. Встановлення та приклади виклику описані на початку серії.