Проверка контраста цветов (WCAG 2.2 AA и AAA)
Проверка контраста
Формат hex, например #2f47d9 или #fff.
Обычный текст: добавьте товар в корзину и оплатите в три шага.
Крупный текст: €129
Рамка и иконка кнопки
Коэффициент контраста
4.54 : 1
| Требование | Минимум | Результат |
|---|---|---|
| Обычный текст, уровень AAWCAG 1.4.3 | 4.5 : 1 | — |
| Крупный текст, уровень AAWCAG 1.4.3 | 3 : 1 | — |
| Обычный текст, уровень AAAWCAG 1.4.6 | 7 : 1 | — |
| Крупный текст, уровень AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Иконки, рамки полей и другие элементы интерфейсаWCAG 1.4.11 | 3 : 1 | — |
Крупный текст — это не меньше 24 px или 18.66 px жирным. Проверка работает в вашем браузере; цвета никуда не отправляются.
Введите цвет текста и цвет фона: инструмент покажет коэффициент контраста по формуле WCAG 2.x, проходит ли пара уровни AA и AAA для обычного и крупного текста и для элементов интерфейса, а также ближайший цвет текста, который достигает 4,5:1.
Что означают результаты
| Требование | Минимум | Критерий WCAG |
|---|---|---|
| Обычный текст, уровень AA | 4,5 : 1 | 1.4.3 Контраст (минимальный) |
| Крупный текст, уровень AA | 3 : 1 | 1.4.3 Контраст (минимальный) |
| Обычный текст, уровень AAA | 7 : 1 | 1.4.6 Контраст (повышенный) |
| Крупный текст, уровень AAA | 4,5 : 1 | 1.4.6 Контраст (повышенный) |
| Иконки, рамки, элементы интерфейса | 3 : 1 | 1.4.11 Контраст нетекстовых элементов |
Уровень AA — это уровень, на который опираются EN 301 549, Европейский акт о доступности, немецкий BFSG и практика США по ADA. AAA строже, и эти законы его не требуют.
Почему контраст важен для интернет-магазина
Серые цены на белом, белый текст на бледном баннере, светлые подсказки в форме оформления заказа: люди со слабым зрением, пожилые покупатели и любой человек с телефоном на солнце читают их медленно или не читают вовсе. Низкий контраст — самая частая проблема, которую автоматическая проверка находит на сайтах магазинов. Исправляйте её в настройках цветов темы или в её CSS-переменных, а не элемент за элементом.
Как рассчитывается коэффициент
Коэффициент сравнивает относительную яркость более светлого и более тёмного цвета: (L1 + 0.05) / (L2 + 0.05). Он меняется от 1:1 (один и тот же цвет) до 21:1 (чёрное на белом). Прозрачность, тени и фоновые изображения меняют реальный контраст; текст на изображении проверяйте с самой тёмной и самой светлой частью изображения под ним.
Проверьте весь сайт
Этот инструмент проверяет одну пару цветов. Pandus находит на странице каждый текст с низким контрастом — с цветами, коэффициентом и скриншотом — и каждую неделю проверяет каждую страницу вашего сайта. См. также правило низкий контраст текста.