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

Проверяйте коэффициент контраста WCAG и соответствие AA/AAA между двумя цветами.

Введённые вами значения цветов обрабатываются локально в браузере, и ничего не загружается на сервер.

Работаете с цветовыми кодами? Попробуйте CSS Color Converter.

Об инструменте Проверка контраста

Эта проверка контраста измеряет коэффициент цветовой контрастности WCAG между любыми двумя цветами и мгновенно сообщает, проходят ли они уровни доступности AA или AAA. Введите цвет переднего плана (текста) и цвет фона как hex или rgb/rgba либо выберите их с помощью встроенных образцов цвета, и инструмент вычислит точный коэффициент плюс вердикты прохождения для обычного и крупного текста. Он создан для разработчиков, дизайнеров и QA-инженеров, которым нужна быстрая проверка коэффициента контрастности цвета при создании доступных интерфейсов, дизайн-систем или маркетинговых страниц. Живой предпросмотр рендерит образец текста в выбранных вами цветах, чтобы вы могли оценить читаемость с первого взгляда и рано выявить проблемы контраста доступности. Всё работает локально в вашем браузере, поэтому ваши значения цветов обрабатываются на устройстве и ничего не загружается на сервер.

Возможности

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

  1. Введите цвет текста в поле «Передний план (текст)» или выберите его с помощью образца цвета.
  2. Введите цвет фона в поле «Фон» или используйте его образец.
  3. Читайте коэффициент контрастности, показанный над значками вердикта.
  4. Проверьте значки прохождения AA и AAA для обычного и крупного текста.

Пример

Ввод

Передний план (текст): #777777
Фон: #ffffff

Результат

коэффициент контрастности: 4.48
AA · обычный текст (4.5:1): Не пройдено
AA · крупный текст (3:1): Пройдено
AAA · обычный текст (7:1): Не пройдено
AAA · крупный текст (4.5:1): Не пройдено

Средне-серый на белом едва не проходит AA для обычного текста.

Частые ошибки и устранение неполадок

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

Что такое проверка контраста и почему важен коэффициент WCAG?
Проверка контраста сравнивает два цвета и сообщает коэффициент контрастности WCAG между ними, который предсказывает, насколько читаемым будет текст. Проверка контраста ArrayKit показывает точный коэффициент плюс вердикты AA и AAA, чтобы вы могли подтвердить, что текст читаем для пользователей со слабым зрением.
Какой коэффициент контрастности нужен для прохождения WCAG?
WCAG AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста, а AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста. Проверка контраста показывает все четыре вердикта сразу.
Как проверить коэффициент контрастности для моего текста и фона?
Введите цвет текста в поле «Передний план» и цвет фона в поле «Фон» (hex, rgb или rgba) или используйте образцы. Проверка контраста обновляет коэффициент и значки AA/AAA вживую по мере ввода.
Что считается крупным текстом для порога 3:1?
Крупный текст — это обычно примерно от 18pt, или от 14pt при жирном начертании. Всё меньше считается обычным текстом и должно соответствовать более высокому коэффициенту 4.5:1.
Учитывает ли коэффициент контрастности прозрачность?
Нет. Коэффициент основан на сплошных значениях RGB, поэтому сведите любой полупрозрачный цвет к его реальному фону перед проверкой в проверке контраста.
Отправляются ли куда-либо цвета, которые я ввожу в проверке контраста?
Нет. Проверка контраста работает полностью в вашем браузере, поэтому введённые цвета остаются на вашем устройстве и ничего не загружается на сервер.

Связанные инструменты

Все инструменты ArrayKit