Контраст по WCAG: зачем проверять и как исправить
Что такое WCAG
WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента. Требования делятся на уровни A, AA и AAA: чем выше, тем строже. AA считается базой для большинства сайтов и обязателен для многих государственных и коммерческих ресурсов в Европе и США. Один из ключевых пунктов — контраст текста и фона.
Какие требования по контрасту
Уровень AA требует коэффициента 4.5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt полужирного). Уровень AAA — 7:1 и 4.5:1 соответственно. Контраст считается по формулам относительной светимости — простое сравнение HEX-кодов не подходит, нужен специальный инструмент.
Как исправить, если не проходит
Самый частый случай — серый текст на белом фоне. Чтобы пройти AA, делайте цвет темнее: вместо очень светло-серого выбирайте более насыщенный оттенок. Не используйте прозрачность для текста — она снижает реальный контраст. Для подписей и плейсхолдеров часто делают слишком светлый цвет: лучше оставить их в норме, а различать другими способами — размером, отступами, иконками.
Зачем коммерческому сайту думать о доступности
Около 10% людей имеют проблемы со зрением, ещё больше — пользуются сайтами в неидеальных условиях: на солнце, в очках с пятнами, ночью с пониженной яркостью экрана. Соответствие WCAG расширяет аудиторию и улучшает SEO — поисковые системы учитывают доступность в ранжировании. Проверить контраст можно в нашем инструменте «Проверка контраста».
Инструменты из статьи
Перейдите и сразу попробуйте — всё работает бесплатно в браузере.