Цветовой контраст WCAG для дизайнеров

Если ваш текст не соответствует контрасту WCAG AA, около 285 миллионов людей с нарушениями зрения не смогут его прочитать. К тому же вы рискуете столкнуться с юридическими проблемами в ЕС и США. Хорошая новость: правило простое.

Правило 4.5:1

Основной текст должен иметь коэффициент контрастности не менее 4.5:1 по отношению к фону, чтобы соответствовать WCAG AA. Крупный текст (от 24px обычный или от 18px жирный) имеет более низкий порог — 3:1.

Для соответствия AAA: 7:1 для основного текста, 4.5:1 для крупного текста.

Как рассчитывается коэффициент контрастности

WCAG использует относительную яркость — преобразуйте каждый цвет в значение яркости (0 = чёрный, 1 = белый) по специальной формуле, затем вычислите (L1 + 0.05) / (L2 + 0.05), где L1 — более светлый цвет.

Вам не нужно делать расчёты — воспользуйтесь нашим бесплатным проверкой контраста, чтобы ввести любые два цвета и увидеть коэффициент.

Частые случаи неудач

• Светло-серый на белом — #999 на #fff = 2.85 (не проходит). #767676 на #fff = 4.54 (проходит).
• Белый на жёлтом — почти всегда не проходит. Используйте тёмный текст на жёлтом.
• Цветные ссылки в основном тексте — большинство синих ссылок проходят на белом, но не проходят на светло-сером. Проверяйте фактический окружающий фон.
• Фирменные цвета, которые выглядят отлично — они часто не проходят. Добавьте почти белый фон или затемните текст.

Выбор доступных цветовых пар

Три надёжных паттерна:

1. Тёмный на светлом — #1f2937 на #fff = 14:1 (идеально).
2. Белый на тёмном — #fff на #1f2937 = 14:1 (идеально).
3. Тёмный на акцентном — #1f2937 на #fbbf24 = 9:1 (идеально для кнопок).

Помимо текста

WCAG 2.1 также требует 3:1 для нетекстовых элементов (кнопки, фокусные кольца, границы форм). Проверка обрабатывает и то, и другое.

Обои, которые не мешают вашим виджетам

Если вы дизайнер, устанавливающий обои за виджетами часов и уведомлениями, выбирайте обои с контрастом ниже 5:1 в зонах виджетов. Наш инструмент Gaussian blur может смягчить загруженные участки любых обоев для лучшей читаемости виджетов.

Попробуйте наши бесплатные инструменты

Большинство этих руководств сопровождаются практическим инструментом, который вы можете использовать прямо сейчас — для первого запуска регистрация не требуется:

• Изменение размера изображения — пиксельное уменьшение + увеличение.
• Конвертация в WebP — файлы на 30-50% меньше, чем JPG.
• Удаление фона — вырезание в один клик, прозрачный PNG.
• Генератор фавиконок — все размеры браузеров из одного источника.
• Ресайзер для соцсетей — точные размеры для каждой платформы.
• Пакетная обработка — примените любой инструмент к до 200 изображений за раз.

Просмотрите полный каталог инструментов.