Color Contrast Checker
Проверка контрастности цветов по стандартам WCAG AA и AAA для доступного дизайна
Превью
Заголовок страницы (Aa Бб)
Обычный текст абзаца. Проверяем читаемость и контраст для пользователей с нарушением зрения.
Мелкий текст — самый требовательный к контрасту. WCAG требует 4.5:1 для AA.
Коэффициент контрастности
17.40:1
Отличный контраст (WCAG AAA)
Соответствие WCAG
WCAG AA — Обычный текст
Порог: 4.5:1
WCAG AA — Крупный текст
Порог: 3:1
WCAG AAA — Обычный текст
Порог: 7:1
WCAG AAA — Крупный текст
Порог: 4.5:1
О стандарте WCAG
WCAG AA (минимум)
- • Обычный текст: 4.5:1
- • Крупный текст (18pt+): 3:1
- • Элементы UI: 3:1
WCAG AAA (усиленный)
- • Обычный текст: 7:1
- • Крупный текст (18pt+): 4.5:1
- • Рекомендован для критичного контента
О сервисе Color Contrast Checker
Color Contrast Checker проверяет соотношение контраста между цветом текста и фона по требованиям WCAG 2.1. Введите цвета — получите коэффициент контраста и рекомендации по уровням AA и AAA.
Часто задаваемые вопросы
Для обычного текста: AA — минимум 4.5:1, AAA — 7:1. Для крупного текста (18px+ или 14px bold+): AA — 3:1, AAA — 4.5:1. Контраст влияет на читаемость для людей с ослабленным зрением и при плохом освещении.
Осветлите или затемните текст/фон. Увеличьте разницу по яркости: тёмный текст на светлом фоне или наоборот. Используйте Color Converter для подбора оттенков с нужной светлотой (HSL Lightness). Избегайте серого на сером.
Коэффициент контраста считается для итогового цвета после наложения слоёв. Полупрозрачный текст на фоне даёт другой контраст, чем непрозрачный. Для точной проверки используйте финальные вычисленные цвета или проверяйте в браузере.
Крупный — минимум 18pt (24px) обычный или 14pt (18.5px) жирный. Для такого текста требования контраста ниже (3:1 для AA), так как крупные символы легче различать. Иконки и элементы UI тоже могут подпадать под эти правила.
В ряде стран (ЕС, США для госсектора) доступность регламентирована. Даже без обязательств соблюдение WCAG улучшает UX для всех пользователей и снижает риски исков. Контраст — один из самых простых критериев для выполнения.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker