Проверка цветового контраста
Проверьте, проходят ли ваши цвета текста и фона по WCAG 2.1 AA и AAA. Видно коэффициент контраста, живой предпросмотр в трёх размерах и статус pass/fail для обычного текста, крупного текста и элементов UI. Переключение цветов одной кнопкой.
Как пользоваться
1
Введите цвет текста
HEX или RGB значение для текста.
2
Введите цвет фона
HEX или RGB значение для фона.
3
Посмотрите коэффициент
Видно значение и статус AA, AAA или «не пройдено».
4
Проверьте превью
Смотрите, как текст выглядит при разных размерах на этом фоне.
Передний план (текст)
Фон
Коэффициент контраста
17.40:1
Обычный текст
AAA
AA 4,5:1 · AAA 7:1
Крупный текст
AAA
AA 3:1 · AAA 4,5:1
Элементы UI
AAA
AA 3:1
Живой предпросмотр
Крупный заголовок 24px
Обычный текст 16px — стандартный размер для чтения.
Мелкий текст 14px
Запомните: WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного. AAA — 7:1 и 4,5:1 соответственно. Крупный текст — 18pt+ или 14pt жирный.
Возможности
WCAG 2.1 AA и AAA
Проверка для обычного текста, крупного текста и элементов UI.
Живой предпросмотр
Пара цветов показана в трёх размерах текста в реальном времени.
Статус pass/fail
Понятные индикаторы для AA и AAA на каждом размере.
Поменять передний и задний план
Поменяйте два цвета одним кликом.
Типичные сценарии
- Проверить доступность цвета текста
- Создать палитру по WCAG
- Проверить контраст кнопок и элементов UI
- Провести аудит сайта на доступность