Колірний контраст за WCAG: норми, перевірка та виправлення

Світло-сірий текст на білому тлі в макеті виглядає охайно. На телефоні під яскравим сонцем чи для слабозорої людини читати його важко. До того ж це найпоширеніша помилка доступності: WebAIM Million 2026 (відкриється в новій вкладці) знайшов текст із низьким контрастом на 83,9% з мільйона найпопулярніших головних сторінок — у середньому 34 окремі випадки на сторінку.

Добра новина: контраст можна виміряти, пороги зрозумілі, а виправлення здебільшого дешеві. У цьому посібнику — цифри, безкоштовні інструменти й спосіб підправити фірмові кольори, не починаючи все спочатку.

Що таке коефіцієнт колірного контрасту?

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

Формула така: (L1 + 0,05) / (L2 + 0,05), де L1 — відносна яскравість світлішого кольору, а L2 — темнішого. Рахувати вручну вам не доведеться, але одна деталь важлива: враховується лише яскравість, а не колірний тон. Тому червоний текст на зеленому тлі може виглядати яскраво й однаково отримати погану оцінку.

Друга деталь, яку часто пропускають, — округлення. У пояснювальному документі W3C до критерію 1.4.3 (відкриється в новій вкладці) сказано, що обчислені значення «не слід округлювати (наприклад, 4,499:1 не відповідає порогу 4,5:1)». Тому сірий #767676 на білому (4,54:1) проходить, а #777777 на білому (4,48:1) — ні, хоча на око їх ніхто не розрізнить.

Якого коефіцієнта контрасту вимагає WCAG?

Для рівня AA, на який посилається більшість законів і договорів, звичайному тексту потрібно щонайменше 4,5:1 відносно тла, а великому — 3:1 (критерій успішності 1.4.3). Компонентам інтерфейсу й значущій графіці потрібно 3:1 відносно сусідніх кольорів (1.4.11). Суворіший рівень AAA вимагає 7:1 для звичайного тексту й 4,5:1 для великого (1.4.6).

Чому саме 4,5:1? W3C пояснює, що цей поріг «компенсує втрату контрастної чутливості, звичайну для користувачів із порушенням зору, що відповідає гостроті зору приблизно 20/40» (це близько 0,5 за звичною десятковою шкалою). Інакше кажучи, його розраховано на людей з помірно зниженим зором, серед яких багато літніх покупців, які ніколи не назвали б себе людьми з інвалідністю.

Частину тексту звільнено від вимог: логотипи й назви брендів, суто декоративний текст, текст, якого ніхто не бачить, текст на зображенні зі значним іншим візуальним вмістом і текст у неактивних (вимкнених) елементах керування. Ваш логотип може залишитися як є. Абзац, набраний блідим кольором логотипа, — ні.

Що вважають великим текстом?

Великий текст у WCAG — це щонайменше 18 пунктів або щонайменше 14 пунктів, якщо він жирний. W3C переводить це приблизно у 24 CSS-пікселі та 18,5 пікселя жирним. Усьому, що менше, потрібні повні 4,5:1. Основний текст, підписи до зображень, підписи полів форм, ціни й посилання у футері майже ніколи не бувають великим текстом, тож їм потрібен вищий коефіцієнт.

Ось як це виглядає на практиці. Сірий #949494 на білому дає 3,03:1. Для заголовка у 28 пікселів це нормально, а для абзацу в 16 пікселів того самого кольору — помилка. Безліч сайтів проходять перевірку на заголовках і провалюють усе, що під ними.

Тонким і декоративним шрифтам потрібна особлива увага. W3C зазначає, що через згладжування «особливо тонкі чи незвичні шрифти можуть відображатися браузерами значно блідішим кольором», ніж обраний вами. Якщо ваш фірмовий шрифт має світле накреслення, залиште собі запас понад 4,5:1, а не цільтеся в 4,51.

Чи стосується контраст кнопок, значків, індикаторів фокуса й діаграм?

Так. За критерієм успішності 1.4.11 (рівень AA) усе, що людям треба бачити, щоб розпізнати елемент керування, його стан чи графіку, має мати контраст 3:1 відносно сусідніх кольорів. Сюди належать рамки полів форм, значки без текстового підпису, контури фокуса, стани прапорців і перемикачів, лінії та сегменти діаграм. Текст усередині кнопки й далі потребує 4,5:1.

• Поля форм: світло-сіра рамка #CCCCCC на білому дає 1,61:1. Якщо ця бліда лінія — єдине, що показує, куди вводити текст, це порушення.
• Кнопки: WCAG не вимагає видимої рамки навколо кожної кнопки. У пояснювальному документі W3C до критерію 1.4.11 (відкриється в новій вкладці) сказано, що межа потрібна, лише якщо немає іншого візуального способу розпізнати елемент керування. Якщо кнопку можна впізнати лише за кольоровою формою, цій формі потрібно 3:1 відносно сторінки.
• Значки: лупі пошуку, сердечку обраного чи значку кошика без тексту поруч потрібно 3:1.
• Індикатори фокуса: контур, що показує фокус клавіатури, має контрастувати з навколишнім тлом. Новіші критерії щодо фокуса розібрано в нашому посібнику з WCAG 2.2.
• Діаграми: лініям на лінійному графіку й секторам кругової діаграми потрібно 3:1, якщо ті самі значення не показано ще й текстом.
• Вимкнені елементи керування звільнено від вимог, хоча людям однаково треба розуміти, чи можна натиснути кнопку.

Посилання в тексті — особливий випадок. Якщо їх виділено лише кольором, без підкреслення, техніка W3C G183 (відкриється в новій вкладці) вимагає 3:1 між кольором посилання й навколишнім текстом, причому обидва кольори й далі мають мати 4,5:1 відносно тла. Дібрати три кольори, які задовольняють усе це, важко. Підкреслення набагато простіше.

Як перевірити колірний контраст?

Використовуйте безкоштовний інструмент перевірки контрасту для конкретних пар кольорів, інструменти розробника в браузері для живих сторінок і автоматичне сканування, щоб знайти проблемні місця на всьому сайті. Потім перевірте очима те, що інструменти пропускають: текст на фото й градієнтах, стани під час наведення й фокуса, текст-підказки й повідомлення про помилки. Більшість цього займає кілька хвилин на кожен шаблон сторінки.

• WebAIM Contrast Checker (відкриється в новій вкладці): введіть два шістнадцяткові коди й отримайте коефіцієнт з оцінкою «проходить чи ні» для звичайного тексту, великого тексту й графічних об’єктів. Повзунок світлості зручний, щоб знайти найближчий придатний відтінок.
• Colour Contrast Analyser (відкриється в новій вкладці): безкоштовний настільний застосунок від Vispero для Windows і macOS. Його піпетка бере будь-який піксель на екрані, що корисно для тексту на зображеннях, PDF і в застосунках, а ще в ньому є симулятор дальтонізму.
• Chrome DevTools: виберіть фрагмент тексту в інспекторі й відкрийте палітру кольорів. Її розділ про коефіцієнт контрасту (відкриється в новій вкладці) показує лінії для AA та AAA і може запропонувати придатний колір. Панель CSS Overview перелічує всі проблеми з контрастом на сторінці.
• Автоматичні перевірки: розширення браузера й Lighthouse знаходять текст із низьким контрастом на всій сторінці, але текст на зображеннях чи градієнтах часто позначають як такий, що потребує ручної перевірки, а не як той, що пройшов чи не пройшов.

Там, де інструменти безсилі, перевіряйте вручну. Для тексту на головному фото перевірте найсвітлішу частину зображення за найсвітлішими літерами; фонові зображення без достатнього контрасту W3C зараховує до відомих помилок (F83). Наведіть курсор на кнопки, перейдіть до них клавішею Tab, викличте помилку у формі, увімкніть темний режим, якщо він у вас є. Темна тема теж може не пройти перевірки: сірий #757575 на тлі #121212 дає 4,07:1. Наш посібник «Як перевірити доступність сайту» ставить контраст поруч з іншими швидкими ручними перевірками.

Як виправити низький контраст, не змінюючи фірмового стилю?

Зазвичай — додавши темніший відтінок фірмового кольору для тексту й дрібних елементів і зберігши оригінал для великих заголовків, тла та ілюстрацій. Багато фірмових кольорів не проходять перевірки лише в дрібних розмірах. Часто досить замінити білий текст на темний на світлому фірмовому кольорі, і більшість відвідувачів помітять лише те, що сторінку стало легше читати.

1. Зробіть «безпечну для тексту» версію кожного фірмового кольору — щонайменше 4,5:1 відносно основного тла — і використовуйте її для основного тексту, посилань і дрібних значків.
2. Використовуйте вихідний яскравий колір для великих заголовків (там досить 3:1), тла, ілюстрацій і декору.
3. На світлих фірмових кольорах замініть білий текст кнопок на темний.
4. Підкладіть під текст, що лежить на фотографіях, суцільну чи напівпрозору плашку.
5. Перевірте всі стани: наведення, фокус, відвідане посилання, вибраний елемент, помилку й текст-підказку.
6. Збережіть придатні пари як дизайн-токени чи налаштування теми, щоб нові сторінки успадковували їх, а не вигадували заново.

Дизайн з урахуванням дальтонізму: чому одного кольору замало

Контраст і колір — різні проблеми. За даними Colour Blind Awareness (відкриється в новій вкладці), порушення колірного зору, найчастіше червоно-зелене, має приблизно кожен 12-й чоловік і кожна 200-та жінка. WCAG 1.4.1 (відкриється в новій вкладці) (рівень A) вимагає, щоб колір не був єдиним візуальним способом передати інформацію, тож доповнюйте його текстом, значками, візерунками чи підкресленням.

• Помилки у формах: однієї червоної рамки замало. Додайте поруч із полем повідомлення на кшталт «Введіть поштовий індекс», найкраще зі значком.
• Наявність і статус: зелена чи червона крапка біля товару багатьом покупцям нічого не каже. Напишіть «Є в наявності» або «Розпродано».
• Діаграми: легенду, у якій треба зіставляти кольори, важко читати. Підписуйте лінії безпосередньо на графіку або використовуйте візерунки й різні типи ліній.
• Посилання: в основному тексті підкреслюйте їх — з причин, описаних вище.

Щоб побачити проблему на власні очі, скористайтеся емуляцією порушень зору в Chrome DevTools; симулятор є й у Colour Contrast Analyser. Контраст допомагає й тут: коефіцієнт вимірює світлість, а не тон, тож два кольори з високим коефіцієнтом лишаються розрізнюваними, навіть якщо їхні відтінки здаються схожими. Як слабозорі люди й люди з іншими порушеннями налаштовують свої пристрої, розповідає стаття «Як люди з інвалідністю користуються сайтами».

Чи достатньо режимів високого контрасту й перемикачів контрасту?

Ні. Контрастні теми операційної системи й перемикачі контрасту на сторінці допомагають тим, хто знає, що йому потрібно більше контрасту, і вмикає його. Але WCAG оцінює вашу сторінку в стані за замовчуванням, тож кольори, які кожен відвідувач бачить першими, однаково мають проходити перевірку. Перемикач — додаткова можливість для тих, кому потрібно більше, а не виправлення кольорів, які не проходять.

Деякі люди з інвалідністю користуються контрастними темами Windows, які замінюють ваші кольори своїми. Варто протестувати сайт з увімкненою темою: значки, зроблені фоновими зображеннями, можуть зникнути, а стилі фокуса, намальовані лише тінню (box-shadow), — пропасти. Медіазапит CSS prefers-contrast також дає змогу запропонувати контрастнішу версію тим, хто запросив її в системних налаштуваннях.

У нашому власному віджеті є налаштування контрасту й профіль для людей із дальтонізмом, і декому з відвідувачів вони корисні. Але ми скажемо вам те саме: якщо основний текст у вас #999999 на білому, змінюйте CSS. Віджет дає відвідувачеві, якому потрібно більше контрасту, спосіб його отримати. Кольорів за замовчуванням, які не проходять перевірки, він не виправляє, і про це сказано в довіднику з WCAG у нашій документації.