Текст читается? Проверьте контраст за десять секунд
Что такое WCAG, AA и AAA, к каким цифрам контраста стремиться, и проверка прямо на этой странице.
Светло-серый текст на белом аккуратно выглядит в макете и перестаёт читаться на телефоне под солнцем. Проверка занимает десять секунд, и это самое дешёвое исправление доступности.
WCAG, AA и AAA простыми словами
WCAG расшифровывается как Web Content Accessibility Guidelines, рекомендации по доступности веб-контента. Это открытый стандарт W3C, организации, которая разрабатывает стандарты веба. Он описывает, как сделать сайт удобным для людей со слабым зрением, дальтонизмом, нарушениями слуха или моторики. Актуальные версии 2.1 и 2.2, и про контраст текста в них написано одно и то же.
WCAG состоит из конкретных проверок, и у каждой есть уровень:
- A — минимум. Без него часть людей вообще не сможет пользоваться сайтом.
- AA — рабочий стандарт. Когда в договоре, законе или требованиях крупного клиента написано «сайт должен быть доступным», почти всегда имеется в виду WCAG AA. В ЕС с июня 2025 года его требует Европейский акт о доступности для многих интернет-магазинов и сервисов, в США по нему обычно оценивают сайты в судебных исках. В России на WCAG 2.1 основан ГОСТ Р 52872-2019.
- AAA — самый строгий уровень. Для всего сайта его никто не требует, но для текста, который читают долго, это хорошая цель.
Контраст — одна из этих проверок. Полезно знать два исключения: логотипы, а также чисто декоративный текст и текст на неактивной кнопке не обязаны ей соответствовать.
Кому это помогает? Людям со слабым зрением, примерно каждому двенадцатому мужчине с той или иной формой дальтонизма, пожилым читателям и всем, кто смотрит в телефон на солнце. А это все мы.
Что значит число
Коэффициент контраста сравнивает яркость текста с яркостью фона. Он идёт от 1:1, когда цвет на самом себе, до 21:1, чёрный на белом. Пороги задают WCAG, рекомендации по доступности веба:
| Текст | AA | AAA |
|---|---|---|
| Обычный | 4.5:1 | 7:1 |
| Крупный: 24px или 18,66px жирный | 3:1 | 4.5:1 |
Коротко: для обычного текста нужно минимум 4.5:1, а там, где читают много, лучше 7:1.
Проверьте свои цвета
Выберите цвет текста и фона или вставьте их HEX-коды. Проверка работает в браузере и никуда ничего не отправляет.
Так выглядит текст
Так выглядит текст
| AA | AAA | |
|---|---|---|
| Обычный текст | ||
| Крупный текст |
По умолчанию здесь светло-серый на белом, любимое сочетание макетов. У него 2.32:1, и он не проходит ни одну проверку, даже для крупного текста. Теперь нажмите : это самый светлый серый, который проходит AA на белом, 4.54:1. дотягивает до AAA, 7:1. На экране разница небольшая, а в читаемости большая.
Если не проходит
- Затемняйте текст или осветляйте фон небольшими шагами, пока коэффициент не превысит 4.5:1.
- Оставьте низкоконтрастные цвета для декора, рамок и неактивных состояний.
- Тексту на фото нужна сплошная или полупрозрачная подложка: проверяйте по самому светлому месту картинки.
Чтобы проверить цвета на любом живом сайте, подойдёт пипетка, например в WhatStyle: она показывает контраст при наведении.