Проверка контрастности текста по WCAG 2

Инструмент позволяет проверить соответствие контрастности текста стандартам WCAG 2.x AA и AAA на градиентных и сплошных фонах. Поддерживает форматы цветов: Tailwind CSS, HEX (#), RGB и OKLCH.

Выбор типа фона

Выберите тип фона: градиент или сплошной цвет. Для градиента введите CSS-код градиента или Tailwind-классы (например: bg-gradient-to-r from-blue-500 to-purple-600 или linear-gradient(to right, #3b82f6, #9333ea)). Для сплошного фона укажите цвет в любом поддерживаемом формате или используйте визуальный выбор цвета.

Для создания градиента или копирования цвета можно воспользоваться инструментом на этом сайте.

Настройка текстов

Доступны три текстовых слоя (верхний, средний, нижний). Для каждого можно изменить содержание текста, размер шрифта (от 14px до 48px), толщину шрифта (от 300 до 800) и цвет. Используйте кнопку "Развернуть" для доступа ко всем настройкам.

Управление цветами текста

Выбирайте цвет текста через палитру или вводите вручную в форматах HEX, RGB, OKLCH или Tailwind. Для быстрого применения одного цвета ко всем текстам используйте кнопку "Установить у всех". Инструмент сохраняет историю последних использованных цветов для каждого текстового слоя.

Предпросмотр и визуализация

В блоке "Предпросмотр" отображаются все три текста на выбранном фоне в реальном времени. Это позволяет визуально оценить читаемость до запуска анализа контрастности.

Анализ контрастности

Нажмите кнопку "Проверить контраст" для запуска анализа. Инструмент вычисляет контрастность в каждом пикселе фона и определяет минимальное, среднее и максимальное значение контраста для каждого текста. Результаты сопоставляются со стандартами WCAG 2.x (уровень AA) (4.5:1 для обычного текста, 3:1 для крупного) и AAA (7:1 и 4.5:1 соответственно).

Карта контрастности (только для градиентов)

При работе с градиентами можно включить визуализацию карты контрастности. Красные зоны на карте показывают области с недостаточным контрастом, где текст может быть плохо читаем. Это помогает выявить проблемные участки градиента.

Результаты и рекомендации

Для каждого текста, не соответствующего стандарту AAA, отображается детальная статистика: минимальный контраст, требуемое значение, средний контраст и процент к исправлению. Инструмент предоставляет рекомендации по возможному исправлению: изменение цвета текста/фона, увеличение размера или толщины шрифта, корректировка градиента.

Навигация к настройкам

Для текстов с проблемами контрастности доступна кнопка быстрого перехода к их настройкам. Это позволяет оперативно внести изменения и повторно проверить результат.

Стандарты WCAG 2.x

WCAG 2.x (уровень AA) - минимальный стандарт доступности для большинства сайтов. WCAG 2.x (уровень AAA) - повышенный уровень, рекомендуемый для государственных, образовательных и медицинских ресурсов. Крупным текстом считается шрифт от 24px или от 18px при толщине 700+.

Проверка для людей с нарушениями зрения

Инструмент позволяет увидеть, как выглядят ваши цвета для людей с разными типами цветовой слепоты. Выберите режим симуляции из выпадающего списка:

• Протанопия - человек не различает красный цвет (около 1% мужчин).
• Дейтеранопия - человек не различает зелёный цвет (самый частый тип, около 5-6% мужчин).
• Тританопия - человек не различает синий цвет (редкий тип, около 0.01% людей).
• Ахроматопсия - человек видит мир в чёрно-белых тонах (очень редко).

При выборе режима все цвета (фон и тексты) автоматически преобразуются так, как их видят люди с выбранным нарушением. Это помогает убедиться, что контраст остаётся достаточным даже для людей с цветовой слепотой.

Поддержка устройств

Инструмент адаптирован для работы онлайн в современных версиях браузеров на мобильных устройствах (смартфонах), планшетах, стационарных компьютерах и ноутбуках.

Отсутствие навязчивости