Цветовой контраст в дизайне вашего сайта очень важен с точки зрения восприятия информации пользователем. Нередко можно встретить сайты или landing pages, где фон и текст не имеют должного контраста, в результате чего страдает «читабельность» и возникает желание покинуть страницу как можно быстрее. Особенно остро этот вопрос стоит для людей с дефектами зрения.
Если вы заинтересованы в высокой конверсии, всегда при создании сайта думайте не только о юзабилити и SEO, но и о контрасте цветов. Это важный фактор, который нельзя игнорировать.
Что делает сервис
Предлагаю удобный и простой онлайн сервис для проверки цветового контраста. В его основе лежит принцип определения контраста шрифта и фона, который будет приемлем для людей с проблемами зрения, в том числе дальтоников, и для отображения на мониторах низкого качества.
WCAG 1: яркость и цвет
Первая методика (рекомендации W3C времён WCAG 1.0) сравнивает два числа:
- Разница яркости — яркость считается как (R·299 + G·587 + B·114) / 1000; оптимально от 125.
- Разница цвета — сумма разниц по каналам R, G и B; оптимально от 500.
Например, серый #777777 на белом даёт разницу яркости 136 (норма), но разницу цвета только 408 (меньше 500).
WCAG 2: коэффициент контраста
Современный стандарт WCAG 2 считает отношение относительной яркости светлого и тёмного цвета: от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
| Уровень | Обычный текст | Крупный текст (от 18pt или 14pt жирный) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Уровень AA — обязательный минимум для большинства сайтов и требований доступности (в том числе законодательных), AAA — повышенный.
Примеры
| Текст | Фон | Контраст | Итог |
|---|---|---|---|
#000000 | #FFFFFF | 21:1 | максимум, AAA |
#595959 | #FFFFFF | 7.00:1 | AAA для обычного текста |
#767676 | #FFFFFF | 4.54:1 | AA для обычного текста |
#777777 | #FFFFFF | 4.48:1 | не проходит AA, только крупный текст |
#FF0000 | #FFFFFF | 4.00:1 | только крупный текст (AA) |
#949494 | #FFFFFF | 3.03:1 | на грани для крупного текста |
Обратите внимание: популярный серый #777 на белом не дотягивает до AA, а чуть более тёмный #767676 — уже проходит.
Где пригодится
- выбор цвета основного текста, ссылок и кнопок в макете;
- проверка серых подписей, плейсхолдеров и текста на цветных и фото-фонах;
- тёмная тема — там тоже легко сделать слишком бледный текст;
- аудит доступности (accessibility) сайта и подготовка к требованиям WCAG.
Как пользоваться страницей
Вы задаёте данные цветов в шестнадцатеричном формате или выбираете интересующий цвет из палитры и моментально получаете визуальное отображение сочетания этих цветов и информацию по их совместимости: разницу яркости и цвета, коэффициент контраста и соответствие WCAG 2 AA и AAA. Таким образом, этот бесплатный инструмент станет вам отличным помощником в повседневной работе и позволит избегать распространённых ошибок при оформлении сайта.