WCAG і кольоровий контраст

Коротко: WCAG (Web Content Accessibility Guidelines) — міжнародний стандарт доступних сайтів. Одне з його правил: текст має достатньо виділятися на тлі.

Докладніше: Настанови W3C поділяються на чотири принципи: сприйнятність, керованість, зрозумілість і надійність. Є три рівні відповідності: A, AA та AAA. Для більшості пропозицій метою є AA, яку передбачають і такі закони, як німецький Закон про посилення доступності (BFSG) та європейський стандарт EN 301 549.

Подробиці

Коефіцієнт контрасту

Контраст задається як відношення відносних яскравостей двох кольорів, від 1:1 (рівні) до 21:1 (чорне на білому). Яскравість кольорового значення обчислюється з червоної, зеленої та синьої складових; зелена враховується найбільше, синя найменше, бо око до неї менш чутливе.

Формула: контраст = (L1 + 0,05) / (L2 + 0,05), де L1 — яскравість світлішого, L2 — темнішого кольору.

Мінімальні значення

Вміст	Рівень AA	Рівень AAA
Звичайний текст	4,5 : 1	7 : 1
Великий текст (приблизно від 24 px або 19 px жирним)	3 : 1	4,5 : 1
Елементи керування та графіка (межі, значки)	3 : 1	–

Сірий текст на білому — найчастіша помилка: #767676 на білому ледь досягає 4,5 : 1, #999999 уже ні.

Чому це важливо

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

Інші правила щодо кольору

• Не лише колір як індикатор: позначайте помилки додатково текстом чи значком, а не просто червоним.
• Видимий фокус: елементу у фокусі (клавіатура) потрібна чітка рамка.
• Темній темі потрібні власні значення кольору, які теж потрібно перевіряти.

Перевірка та виправлення

За допомогою перевірки контрасту ви вводите колір переднього плану й тла та отримуєте коефіцієнт і висновок про AA та AAA. Якщо значення недостатньо, ви робите текст темнішим (на світлому тлі) або світлішим (на темному), доки не буде досягнуто межі. Зазвичай це невелика правка, майже непомітна, але така, що допомагає багатьом.

Див. також: Доступність, CSS, HTML