Проверка контрастности цветов
Убедитесь, что ваш текст легко читается всеми, и получите исправление, если это не так.
Запечатано на этом устройстве
Работает в вашем браузере. Ничего не загружается на сервер.
Запечатано
Цвета
- Коэффициент контрастности
- Обычный текст
- AA · 4,5:1
- AAA · 7:1
- Крупный текст
- AA · 3:1
- AAA · 4,5:1
- Элементы интерфейса и иконки
- AA · 3:1
- Контраст APCA (для справки)
APCA — новый метод, который изучается для будущих рекомендаций по доступности. Сегодня эталоном остаётся WCAG 2.2.
Превью
Так выглядит крупный текст
Обычный текст должен легко читаться всеми, в том числе людьми со слабым зрением, на телефоне под ярким солнцем или на старом экране.
Мелкому шрифту и подписям нужен самый высокий контраст.
Предлагаемые исправления
Как это работает
-
Введите два цвета
Введите или выберите цвет текста и цвет фона. Подойдёт любой формат: HEX, RGB, HSL или название CSS.
-
Изучите результат
Посмотрите коэффициент контрастности и то, проходит ли он WCAG 2.2 AA и AAA для обычного текста, крупного текста и элементов интерфейса.
-
При необходимости исправьте
Если уровень не пройден, примените один из предложенных цветов: это ближайший цвет того же тона, который проходит проверку.
Частые вопросы
Какой коэффициент контрастности нужен?
Уровень AA в WCAG 2.2 требует не менее 4,5:1 для обычного текста и 3:1 для крупного. Уровень AAA требует 7:1 и 4,5:1. Иконкам, рамкам полей ввода и другим элементам интерфейса нужно не менее 3:1 относительно соседних цветов.
Какой текст считается крупным?
Текст размером не менее 18 пунктов (24 CSS-пикселя) или не менее 14 пунктов (около 18,7 CSS-пикселя), если он полужирный. Всё, что меньше, — обычный текст.
Почему 4,49:1 не проходит, если это так близко к 4,5:1?
Пороги WCAG — строгие минимумы, и коэффициент нельзя округлять вверх. Поэтому здесь коэффициент округляется вниз: если значение выглядит как пройденное, оно действительно проходит.
Что такое APCA?
APCA (Accessible Perceptual Contrast Algorithm) — новый способ измерения контраста, который учитывает, тёмный ли текст на светлом фоне или светлый на тёмном. Его изучают для будущей версии рекомендаций. Здесь он показан только для справки: сегодня юридические требования и аудиты опираются на коэффициент WCAG 2.
Как подбираются предлагаемые цвета?
Инструмент сохраняет тон и насыщенность вашего цвета и меняет только светлоту в перцептивном цветовом пространстве OKLCH, пока не найдёт ближайшее значение, достигающее нужного уровня. Цвет остаётся узнаваемым, просто становится чуть светлее или темнее.
Работает ли это с прозрачными цветами?
Да, для цвета текста: полупрозрачный цвет текста сначала смешивается с фоном, ведь именно этот цвет видят люди. Фон считается непрозрачным.