Коефіцієнти контрасту WCAG: практичний посібник для дизайнера

Ось число, до якого я постійно повертаюся: у звіті WebAIM Million за 2025 рік низькоконтрастний текст був найпоширенішою помилкою доступності в інтернеті — він був присутній на 79.1% із мільйона найпопулярніших головних сторінок. Не відсутній alt-текст. Не безіменні кнопки. Контраст. Найчастіше виявлювана проблема доступності у світі — це два надто схожі кольори, і майже кожна команда, що це випускає, навіть не здогадується про це.

Я й сам випускав цю помилку. Кілька років тому я зробив «преміальний» дашборд з елегантним сірим текстом #9CA3AF на білому, схвалений усіма в кімнаті, бо він виглядав витончено на новенькому Retina-дисплеї в темній переговорці. За тиждень прийшов тікет у підтримку від користувача в залитому сонцем потязі, який буквально не міг прочитати підписи. Текст був приблизно на 2.6:1. WCAG просить 4.5:1. Саме цей розрив і є темою цієї статті.

Що таке коефіцієнт контрасту WCAG насправді

Коефіцієнт контрасту WCAG — це одне число, що описує, наскільки два кольори різняться за світлотою, виражене як співвідношення від 1:1 до 21:1. Білий на білому — це 1:1 (невидимо). Чистий чорний на чистому білому — 21:1 (максимум). Усе, що ви проєктуєте, живе десь поміж, і WCAG задає поріг, нижче за який вам не можна падати.

Ключове, що варто засвоїти рано: контраст — це про яскравість, а не про те, чи кольори «виглядають по-різному». Червоний і зелений виглядають для більшості людей дико різними, але насичений червоний (#FF0000) на насиченому зеленому (#008000) дає лише близько 1.3:1, бо вони несуть майже однакову світлоту. Для людини з червоно-зеленою дальтонією чи будь-кого, хто кинув погляд на дешевий екран, ця пара — каша. Око обманюється відтінком; формула контрасту — ні.

Формула простими словами

Коефіцієнт обчислюється як (L1 + 0.05) / (L2 + 0.05), де L1 — відносна яскравість світлішого кольору, а L2 — яскравість темнішого. Ви майже ніколи не рахуватимете це вручну, але розуміння двох етапів пояснює, чому інтуїція вас підводить.

Спершу відносну яскравість кожного кольору знаходять, беручи його червоний, зелений і синій канали, «лінеаризуючи» їх (скасовуючи гамма-криву, яку накладають екрани, за правилом: канали зі значенням 0.03928 чи нижче діляться на 12.92, а вищі проганяються через ((c + 0.055) / 1.055) ^ 2.4), а потім зважуючи їх: 0.2126 для червоного, 0.7152 для зеленого і 0.0722 для синього. Ці ваги не випадкові. Людське око надзвичайно чутливе до зеленого й майже сліпе до синього у порівнянні.

Це найкорисніший висновок із усієї математики: зелений несе приблизно вдесятеро більше сприйманої яскравості, ніж синій. Ось чому чистий синій текст на чорному болісний і ледь проходить, тоді як така ж «темінь» зеленого читається нормально. Ось чому ваші сині посилання на темному тлі відчуваються слабкими, хоч як би ви їх насичували. Якщо запам’ятати лише одне про формулу, запам’ятайте ваги.

+ 0.05 у коефіцієнті — це константа, що моделює навколишнє світло, відбите від екрана, тож навіть теоретично ідеально чорні поверхні ніколи не дадуть нескінченного коефіцієнта. Саме тому коефіцієнти контрасту мають стелю 21:1.

Три пороги, які ви мусите знати

WCAG (Web Content Accessibility Guidelines — настанови щодо доступності вебконтенту, які підтримує W3C) визначає невеликий набір чисел. Запам’ятайте їх — і ви покриєте переважну більшість реальної роботи.

• 4.5:1 — мінімум для звичайного основного тексту на рівні AA. Це робоче число. Якщо цілитесь у одне значення, цільтесь у нього.
• 3:1 — мінімум для великого тексту на AA, а також мінімум для нетекстових елементів UI та графіки (про це нижче).
• 7:1 — звичайний текст на рівні AAA, посиленому рівні для користувачів зі слабким зором. Великий текст на AAA потребує 4.5:1.

Зверніть увагу на закономірність: кожен рівень — це приблизно наступний вгору. Велике-AA і нетекстове ділять 3:1; звичайне-AA і велике-AAA ділять 4.5:1. Запам’ятовувати тут менше, ніж здається.

AA проти AAA: що ви насправді зобов’язані?

AA — це реальний стандарт. Саме на нього посилаються Європейський акт про доступність, врегулювання за ADA в США, Section 508 і фактично кожен закупівельний контракт. Коли юрист чи аудитор каже «відповідає WCAG», вони мають на увазі AA. AAA — золотий рівень, і самі настанови прямо кажуть, що відповідність AAA не вимагається як загальна політика для цілих сайтів, частково тому, що деякий контент просто не може досягти 7:1, не виглядаючи зламаним.

Моя чесна думка після років роботи з цим: проєктуйте основний текст так, щоб він комфортно проходив AA, а тоді ставтеся до AAA як до цілі, яку ви берете для найважливішого контенту — основної читабельної колонки статті, повідомлень про помилки, усього, що напружений користувач чи людина зі слабким зором мусить розібрати під тиском. Гонитва за 7:1 на кожному підписі й неактивному лейблі — це програшна битва, яка сплющує всю вашу палітру в чорне-на-білому.

Звичайний текст проти великого — і пастка всередині цього

WCAG дає великому тексту легше (3:1 замість 4.5:1), бо більші, важчі літери читабельні за нижчого контрасту. Але визначення «великого» специфічне, і люди постійно його плутають.

• Великий = 18pt і більше, тобто 24px звичайної насиченості.
• Або 14pt і більше, тобто близько 18.5px, якщо текст напівжирний.

Перерахунок, що всіх збиває, — 1pt = 1.333px, тому 18pt стає 24px, а 14pt стає ~18.5px. Тож заголовок 19px звичайної насиченості не є великим текстом за визначенням WCAG — він усе ще винен повні 4.5:1. Напівжирний лейбл 16px теж не великий. Я бачив, як дизайни «проходили» в чиїйсь голові, бо заголовок «виглядав великим», тоді як у пікселях він сидів трохи нижче порога й потребував суворішого коефіцієнта. Коли є сумніви, тримайте основний текст і підзаголовки на 4.5:1 і претендуйте на послаблення 3:1 лише для справді великого вивісочного шрифту.

Нетекстовий контраст: критерій, про який усі забувають (1.4.11)

Ось де провалюється більшість загалом уважних команд. WCAG 2.1 додав критерій успіху 1.4.11, Нетекстовий контраст, що вимагає 3:1 для двох категорій, які не мають жодного стосунку до читання:

• Елементи інтерфейсу користувача — візуальна межа контрола, яка повідомляє, що він існує і в якому він стані. Рамка текстового поля, контур невибраного чекбокса, кільце фокусу навколо кнопки, доріжка перемикача.
• Графічні об’єкти — частини іконок, графіків і діаграм, потрібні для їх розуміння. Лінія в спарклайні, сектори кругової діаграми, форма іконки попередження.

Класичне порушення: поле пошуку, яке є просто білим #FFFFFF блоком зі світло-сірою рамкою #E5E7EB завтовшки 1px на білій сторінці. Ця рамка дає близько 1.2:1. Зрячі користувачі зі слабким зором буквально не можуть знайти, куди клікнути. Бліді плейсхолдери й контури кнопок-привидів провалюються так само. Чиста декорація винятків не має, як і текст усередині елемента (він живе під 1.4.3) — але те, що сигналізує «це інтерактивне», мусить досягати 3:1 відносно того, що поруч.

Як це вимірювати — і як виправляти

Контраст не оцінюють на око. Його вимірюють. Мій щоденний робочий процес:

• У браузері відкрийте DevTools і проінспектуйте текстовий елемент. Chrome і Firefox обидва друкують коефіцієнт контрасту прямо в піпетці кольору, з галочками для AA та AAA, і навіть малюють лінію на колірному просторі, що показує поріг, який можна перетягувати.
• Щоб перевірити пару hex-кодів ще до того, як вони потраплять у код, скористайтеся спеціальним чекером. Генератор колірної палітри на цьому сайті містить чекер контрасту WCAG, тож ви можете перевіряти комбінації ще під час їх вибору, а не виявляти проблему під час аудиту.
• Для перевірки цілих сторінок запустіть автоматизований інструмент. Але знайте його межу: автоматика ловить суцільнокольоровий текст і пропускає текст на фотографіях, градієнтах чи напівпрозорих оверлеях. Їх перевіряйте вручну.

Коли щось не проходить, утримайтеся від спокуси підкрутити відтінок. Зміна насиченості майже не зрушує контраст; зміна світлоти зрушує його сильно. Конкретно:

• Затемнюйте передній план чи освітлюйте фон, поки не подолаєте лінію. Мій давніший сірий #9CA3AF довелося поглибити приблизно до #6B7280 на білому, щоб досягти ~4.5:1 — та сама родина, лише на кілька кроків глибше.
• Для світлого тексту на кольорі зазвичай швидше поглибити фон. Лейбл #FFFFFF на синій кнопці #60A5FA не проходить; опустіть кнопку до #2563EB — і ви подолаєте AA, не торкаючись тексту.
• Для графіків та іконок додайте тонкий темніший обведення чи легкий тонувальний фон, замість того щоб боротися за затемнення кожної заливки.

Помилки, які я бачу в реальних командах

• Затвердження на ідеальному екрані. Бездоганний MacBook у тьмяній кімнаті лестить усьому. У реальних користувачів є відблиски, дешеві панелі, фільтри синього світла й «нічний режим», що тепліє білі. Проєктуйте під найгірші правдоподібні умови перегляду, а не під демо.
• Довіра відтінку замість яскравості. Два яскраві, але однаково світлі кольори (знову той червоний-на-зеленому) можуть бути невидимими для дальтоніків, водночас проходячи вашу інтуїтивну перевірку. Порахуйте число.
• Забування про плейсхолдери й неактивні стани. Плейсхолдери — це все ще текст, і вони все ще винні контраст, якщо несуть значення. Неактивні контроли справді мають виняток, але не зловживайте цим, щоб ховати низькоконтрастний активний контент під «неактивним» виглядом.
• Ігнорування оверлеїв. Білий текст на героїчному фото проходить над темним кутом і провалюється над яскравим небом. Скрим — напівнепрозорий темний шар між зображенням і текстом — це стандартне рішення.
• Сприйняття 4.5:1 як цілі, а не як порога. Точне влучання в 4.5:1 крихке; один дизайнер підкрутить відтінок — і воно знову зламане. Закладайте запас.

Слово про майбутнє: WCAG 3 досліджує перцептивну модель під назвою APCA, яка оцінює контраст ближче до того, як це робить людське око, враховуючи розмір і насиченість шрифту разом, а не плаский коефіцієнт. Вона багатообіцяльна й варта спостереження, але станом на сьогодні коефіцієнти з цієї статті — підкріплені W3C Understanding 1.4.3 — це те, що робить вас юридично й практично відповідними. Будуйте під них, лишайте собі запас і вимірюйте, а не гадайте. Ті 79.1% сайтів, що провалюються, провалилися здебільшого тому, що ніхто не перевірив. Перевірка — це і є вся робота.