Перевірка контрасту кольорів за WCAG: доступний дизайн

Що таке WCAG і навіщо він потрібен?

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

Рівні відповідності WCAG

Рівень A — мінімальний, задовольняє базові вимоги. Рівень AA — стандартний, якого прагне більшість сайтів. Рівень AAA — найвищий, бажаний для критично важливого контенту. Для тексту WCAG 2.1 вимагає коефіцієнт контрасту 4,5:1 (AA) або 7:1 (AAA) для звичайного тексту та 3:1 для великого тексту (18pt+ або 14pt+ жирний).

Як вимірюється контраст

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

Поради для доступної палітри

Темний текст (#333 або чорний) на світлому фоні зазвичай безпечний. Уникайте сірого тексту на білому — поширена проблема мінімалістичних дизайнів. Кольорові комбінації синього/зеленого та фіолетового/синього часто мають недостатній контраст. Перевіряйте контраст для всіх станів елементів: hover, focus, disabled.