ImageColorPicker.com

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

Проверьте коэффициент контраста между передним и фоновым цветами для обеспечения доступности.

Проверьте свои цвета

Проверьте цветовые комбинации, чтобы убедиться, что они соответствуют стандартам доступности WCAG для читаемости текста.

5.06 к 1
Контраст
AA
Результат для текста
Хорошо

Сравниваются: #FFFFFF на #B331C3

Текст

16px, Обычный (400)

Засчитывается как обычный текст.

  • AA (WCAG 1.4.3): не менее 4.5:1

    Пройдено

  • AAA (WCAG 1.4.6): не менее 7:1

    Нужно ещё 1.94

    Не пройдено

Компоненты интерфейса и графика

Иконки, границы полей, индикаторы фокуса и другие элементы, которые нужно различать, чтобы пользоваться интерфейсом.

  • AA (WCAG 1.4.11): не менее 3:1

    Пройдено
5.06 к 1. Текст: соответствует AA, не соответствует AAA. Компоненты интерфейса: соответствует.
Как это проверяется
Сравниваемые цвета (после смешивания)
Текст #FFFFFF на фоне #B331C3
Относительная яркость
Текст 1.0000, фон 0.1572
Формула
(L1 + 0.05) / (L2 + 0.05) где L1 — яркость более светлого цвета, а L2 — более тёмного.
Точный коэффициент
5.0674 к 1, отображается как 5.06 к 1. Отображаемое значение усекается, а не округляется, поэтому оно никогда не выглядит лучше, чем есть. Точное значение сравнивается с требованием.

Размер текста: 16px, Обычный (400)

Засчитывается как обычный текст. Крупный текст — не менее 24px (18pt), или не менее 18.67px (14pt) при жирном начертании (насыщенность 700 или более). Размеры отображаются усечёнными, не округлёнными.

Засчитывается как обычный текст. Крупный текст — не менее 24px (18pt), или не менее 18.67px (14pt) при жирном начертании (насыщенность 700 или более). Размеры отображаются усечёнными, не округлёнными.

Aa
Заголовок предпросмотра

Быстрая коричневая лиса перепрыгивает через ленивую собаку

Пример маленького текста (12px)

Текст
#ffffff
Фон
#b331c3

Стандарты WCAG

Уровень AA

Минимальный коэффициент контраста 4.5:1 для обычного текста и 3:1 для крупного текста. Требуется для большинства веб-сайтов.

Уровень AAA

Улучшенный коэффициент контраста 7:1 для обычного текста и 4.5:1 для крупного текста. Рекомендуется для оптимальной доступности.

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

Рассчитайте коэффициент контраста текста и фона.

Выберите цвет с помощью селектора цвета для текста и фона или введите цвет в формате RGB шестнадцатеричного кода (например, #259 или #2596BE). Вы можете настроить ползунок для выбора цвета. Руководство по доступности веб-контента (WCAG) содержит конкретные рекомендации, чтобы определить, читаем ли текст для зрячих пользователей. Этот критерий использует определенный алгоритм для сопоставления цветовых комбинаций с сопоставимыми коэффициентами. Согласно этой формуле, WCAG утверждает, что коэффициент контраста 4.5:1 между текстом и его фоном является достаточным для обычного текста, а для крупного текста (18+ pt обычный или 14+ pt жирный) должен быть как минимум 3:1.

Ключевые особенности

  • Расчет контрастности в реальном времени
  • Проверка соответствия WCAG AA и AAA
  • Ползунки HSL для точной настройки
  • Несколько форматов предпросмотра

Расширенные инструменты

  • Автоматическая коррекция цвета
  • Образцы текста и фона
  • Определение названия цвета
  • Экспорт результатов

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

Для соответствия WCAG AA обычный текст требует коэффициент контраста не менее 4,5:1, а крупный текст (18pt или 14pt жирным) требует 3:1.

WCAG AAA требует более высокого коэффициента контраста: 7:1 для обычного текста и 4,5:1 для крупного текста, тогда как AA требует 4,5:1 и 3:1 соответственно.

Воспользуйтесь функцией автоматического исправления, чтобы изменить цвет текста или фона и сохранить замысел дизайна, или вручную настройте цвета ползунками HSL с визуальными индикаторами, которые показывают оптимальные зоны для соответствия AA/AAA.

Зелёные зоны и маркеры AA/AAA показывают оптимальные диапазоны для соответствия WCAG. Подсказки направления (Светлее/Темнее) помогут улучшить контраст с учётом вашей текущей цветовой комбинации.

Да, вы можете ввести любые HEX-коды или выбрать цвета с помощью инструмента выбора. URL обновляется автоматически, поэтому вы можете поделиться конкретной цветовой комбинацией.