Проверка контраста цветов (WCAG)
Проверьте коэффициент контраста между цветом текста и фона по WCAG AA и AAA для обычного текста, крупного текста и элементов интерфейса, с предложенными исправлениями.
Загрузка: Проверка контраста цветов…
Ваши файлы не покидают устройство
Как пользоваться: Проверка контраста цветов
- 1
Откройте «Проверка контраста цветов» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Текст с низким контрастом это одна из самых частых проблем доступности в интернете, и она мешает всем, кто читает с телефона на солнце. Эта проверка контраста цветов рассчитывает коэффициент контраста между цветом текста и цветом фона и показывает, соответствует ли он рекомендациям WCAG 2. Если нет, инструмент предложит ближайшие подходящие цвета, чтобы исправить проблему без смены дизайна.
Как проверить контраст
- Введите цвет текста и цвет фона или выберите их на палитре.
- Посмотрите коэффициент контраста и результат для каждого уровня.
- Оцените живой предпросмотр с обычным текстом, крупными заголовками и мелким шрифтом.
- Если уровень не пройден, используйте предложенное исправление или поменяйте цвета местами.
- Скопируйте CSS подходящей комбинации.
Требования WCAG к контрасту
| Элемент | AA | AAA |
|---|---|---|
| Обычный текст | 4,5:1 | 7:1 |
| Крупный текст (24px или 18,66px жирным) | 3:1 | 4,5:1 |
| Элементы интерфейса и иконки | 3:1 | не определено |
Уровень AA упоминается в большинстве законов и правил доступности. AAA строже и рекомендуется для длинных текстов. Жирный текст размером около 18px тоже считается крупным.
Как рассчитывается коэффициент
Инструмент переводит оба цвета в относительную яркость, то есть меру воспринимаемой светлоты, и делит более светлый плюс 0,05 на более тёмный плюс 0,05. Результат меняется от 1:1 (нет контраста, одинаковый цвет) до 21:1 (чёрный на белом).
Советы по доступным цветам
- Серый текст на белом чаще всего и виноват: #767676 примерно самый светлый серый, который ещё проходит AA для обычного текста на белом.
- Проверяйте все состояния: подсказки в полях, неактивные кнопки, ссылки, цвета при наведении и текст на изображениях.
- Не передавайте смысл только цветом, например красным для ошибок; добавьте иконку или текст.
- Проверяйте фирменные цвета заранее: яркий жёлтый и светло-голубой часто не проходят как цвет текста.
Подбираете целую схему? Генератор цветовых палитр показывает контраст каждого цвета, а конвертер цветов переводит значения между HEX, RGB и HSL.
Частые вопросы
Какой коэффициент контраста нужен для WCAG AA?
Не меньше 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса, таких как кнопки, границы полей форм и иконки.
Что считается крупным текстом?
Текст размером не меньше 24px или жирный текст не меньше примерно 18,66px (14 пунктов). Для крупного текста нужно 3:1 для AA и 4,5:1 для AAA.
Чем AA отличается от AAA?
AA это стандартный уровень, на который ссылается большинство законов о доступности. AAA строже, 7:1 для обычного текста, и рекомендуется для длинных фрагментов текста.
Какой максимальный коэффициент контраста?
21:1, то есть чёрный текст на белом фоне или наоборот.
Мой фирменный цвет не проходит. Что делать?
Используйте предложенное исправление: оно сохраняет тон, но меняет светлоту до прохождения. Или применяйте фирменный цвет для крупных заголовков и фонов, а не для основного текста.
Проверяет ли инструмент текст на изображениях?
Нет. Он проверяет два сплошных цвета. Для текста на фото проверьте цвет на фоне самых светлых и самых тёмных участков изображения под текстом.