Проверка контрастности цвета WCAG — исправление ошибок PageSpeed

Одна из самых частых ошибок, которую показывает Google PageSpeed Insights — недостаточная контрастность текста и фона. Сообщение «Background and foreground colors do not have a sufficient contrast ratio» означает, что ваш текст плохо читается для пользователей с нарушениями зрения и не соответствует стандартам доступности WCAG 2.1.

Что такое контрастность и почему это важно?

Контрастность — это соотношение яркости между цветом текста и цветом фона. Измеряется в виде коэффициента от 1:1 (нет контраста) до 21:1 (черный текст на белом фоне). Стандарты WCAG (Web Content Accessibility Guidelines) требуют:

• Минимум 4.5:1 для обычного текста (до 18px или до 14px жирного).
• Минимум 3:1 для крупного текста (от 18px или от 14px жирного).
• Минимум 7:1 для уровня AAA (улучшенная доступность).

Как PageSpeed проверяет контрастность?

Google Lighthouse (движок PageSpeed Insights) сканирует все текстовые элементы на странице и вычисляет контрастность между цветом текста (CSS свойство color) и цветом фона (background-color). Если коэффициент ниже порога, вы получаете предупреждение в разделе «Accessibility» (Доступность).

Это влияет на общую оценку PageSpeed. Например, если у вас было 95 баллов, но есть 3 предупреждения о контрастности, оценка может упасть до 85-90 баллов.

Как пользоваться инструментом

• Шаг 1. Возьмите цвета из CSS вашего сайта (или из предупреждения PageSpeed).
• Шаг 2. Введите цвет текста и цвет фона в соответствующие поля.
• Шаг 3. Посмотрите на коэффициент контрастности и статус WCAG (PASS/FAIL).
• Шаг 4. Если контрастность недостаточная, используйте предложенные альтернативные цвета.
• Шаг 5. Скопируйте рекомендуемый HEX-код и замените его в CSS вашего сайта.

Примеры типичных проблем

Проблема: Серый текст #999999 на белом фоне #FFFFFF.
Контрастность: 2.85:1 (FAIL для WCAG AA).
Решение: Замените на #595959 — контрастность станет 7:1 (PASS для WCAG AAA).

Проблема: Светло-голубой текст #66B2FF на белом фоне.
Контрастность: 2.5:1 (FAIL).
Решение: Замените на #0066CC — контрастность 6.5:1 (PASS для WCAG AA).

Как найти цвета в CSS?

Откройте ваш сайт в Chrome, нажмите F12 (инструменты разработчика), выберите элемент с текстом и посмотрите computed styles. Цвет текста — свойство color, цвет фона — background-color. Скопируйте HEX-значения и вставьте в наш инструмент.

💡 Совет: После исправления контрастности проверьте общую скорость сайта через PageSpeed Insights. Если есть другие проблемы (неоптимизированные изображения, отсутствие кэширования), используйте наши конвертер в WebP и другие инструменты для комплексной оптимизации.