Проверка цветового контраста

Бесплатная программа проверки цветового контраста WCAG. Проверьте цвета текста и фона на соответствие специальным требованиям AA и AAA с помощью живого коэффициента контрастности и предварительного просмотра — шестнадцатеричного или RGB.

Проверьте коэффициент контрастности между цветом текста и фона в соответствии со стандартами WCAG AA и AAA с помощью предварительного просмотра в реальном времени и шестнадцатеричного или RGB-входа.

Share
Категория
Инструменты разработчика
Включает
Возможности 6
Доступ
Бесплатно · Нет регистрации
Конфиденциальность
Запускается в вашем браузере
Проверка цветового контраста

Loading Contrast Checker......

Please wait a moment

Как использовать

Как использовать Проверка цветового контраста

  1. 01

    Выберите цвет текста

    Выберите или введите цвет переднего плана.

  2. 02

    Выберите фон

    Выберите или введите цвет фона.

  3. 03

    Прочитайте соотношение

    Посмотрите коэффициент контрастности и результаты AA/AAA.

  4. 04

    Регулировать

    Настраивайте цвета, пока они не исчезнут.

Варианты использования

Распространенные случаи использования

  • Убедитесь, что текст пользовательского интерфейса соответствует требованиям WCAG.
  • Проверьте кнопку и ссылку на контрастность
  • Аудит цветовой палитры бренда
  • Исправьте низкоконтрастный маркетинговый текст
Обзор

Сделайте ваш текст читабельным для всех

Низкоконтрастный текст — одна из наиболее распространенных проблем доступности. Эта программа проверки вычисляет точный коэффициент контрастности между цветами текста и фона, используя официальную формулу относительной яркости WCAG, а затем сообщает, соответствует ли она стандарту AA (4,5:1 для обычного текста, 3:1 для большого текста) и более строгому AAA (7:1 и 4,5:1). Предварительный просмотр в реальном времени показывает реальный текст выбранных вами цветов.

Введите цвета любым удобным для вас способом

Используйте палитры цветов или напрямую вводите шестнадцатеричные коды и значения rgb() — инструмент анализирует и то, и другое. Когда вы настраиваете любой цвет, соотношение и значки «прошел/не прошел» мгновенно обновляются, поэтому вы можете подталкивать оттенок до тех пор, пока он не будет соответствовать требованиям. Все работает локально, что делает его быстрым помощником при разработке пользовательского интерфейса, тем и маркетинговых страниц.

Функции
01
Результаты WCAG AA и AAA (пройден/не пройден)
02
Расчет коэффициента контрастности в реальном времени
03
Шестнадцатеричный и RGB-вход с палитрами цвета
04
Предварительный просмотр текста в реальном времени в ваших цветах
05
Нормальные и большие текстовые пороги
06
Запускается локально в вашем браузере
Часто задаваемые вопросы

Часто задаваемые вопросы

Какой коэффициент контрастности мне нужен для прохождения WCAG?+

Для АА обычный текст требует соотношения 4,5:1, а крупный текст — 3:1. Для более строгого формата AAA обычному тексту требуется соотношение 7:1, а большому — 4,5:1. Крупный текст имеет размер примерно 18 пт или 14 пт жирный.

Как рассчитывается коэффициент контрастности?+

Он использует формулу относительной яркости WCAG для обоих цветов, затем делит более светлую яркость (плюс 0,05) на более темную (плюс 0,05), получая значение от 1:1 до 21:1.

Могу ли я ввести RGB, а также шестнадцатеричный формат?+

Да — введите шестнадцатеричные коды, например #1e293b или rgb(30, 41, 59), или воспользуйтесь палитрой цветов. Оба формата анализируются мгновенно.

Это бесплатно?+

Да, совершенно бесплатно, без регистрации и полностью работает в вашем браузере.