skip to content

Есть ли на вашем сайте проблемы с цветовым контрастом?
Запустите тест цветового контраста на своем веб-сайте, чтобы узнать, доступен ли он для людей с ограниченными возможностями.

Иллюстрация руководства по соответствию ADA

Цветовой контраст в веб-доступности

Хороший цветовой контраст означает достаточный контраст между текстом и фоном, что делает текст различимым. Чтобы помочь людям с дефицитом цвета, например с умеренно слабым зрением, обновленные рекомендации WCAG 2.1 требуют наличия достаточного контраста между текстом переднего плана и цветами фона.

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

С Accessi вам не нужно быть экспертом, чтобы проверить свой веб-сайт на контрастные цвета для доступности.

Иллюстрация движущихся частей

Зачем использовать средство проверки контраста?

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

Средство проверки контраста обеспечивает соответствие стандартам WCAG, Section 508, ADA, EN 301 549, BITV 2.0 и AODA.

Иллюстрация трех элементов

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

Соответствие уровню WCAG AA показывает, какое соотношение сделает пару цветов воспринимаемой большинством (но не всеми) людьми с остротой зрения или недостатком цвета. Расширенное соответствие уровня WCAG AAA указывает на то, что сочетание цветов будет восприниматься максимально возможным количеством людей с ограниченными возможностями.

Соответствие WCAG 2.1 в основном означает соблюдение большинства законов о доступности, следовательно, представляет собой золотой стандарт, которому нужно следовать.

Как проверить цветовой контраст

  • Введите URL / домен.
  • Получите точный аудит, который включает.
  • Поделитесь отчетом об аудите со своей командой.
  • Начните исправлять свой сайт и цвета, чтобы обеспечить доступ для людей с ограниченными возможностями.

Уникальный инструмент тестирования доступности

Наше бесплатное программное обеспечение автоматически сканирует ваш веб-сайт и определяет ошибки доступности цветового контраста в соответствии со стандартами тестирования WCAG 2.0 / 2.1 и их влияние на людей с ограниченными возможностями.

Наша автоматическая проверка цветового контраста оценивает цвета веб-сайта и предоставляет подробный аудиторский отчет, содержащий приоритетные рекомендации, которые позволят вам устранить препятствия, которые могут помешать людям с ограниченными возможностями получить доступ к сайту.

Как это работает

Сканер веб-доступности полностью автоматизирован и разделяет категории тестирования на:

  • Высокая отдача: проблемы, требующие неотложного внимания
  • Среднее влияние: необходимы исправления
  • Низкое влияние: требуется проверка вручную

Наша программа проверки соответствия цветового контраста предоставляет отчет, который позволяет фильтровать по:

  • Рекомендации (WCAG 2.0 / 2.1) Уровень A-AAA
  • Приоритет (высокий, средний и низкий уровень воздействия)
  • Теги (CSS, HTML, JavaScript и т. Д.).

Контролируйте свой аудит

Веб-средство проверки доступности также предоставляет информацию о препятствиях доступности, передовых методах тестирования и наглядных примерах неправильных и правильных способов достижения соответствия цветового контраста.

Иллюстрация движущихся частей

FAQ - Цветовой контраст

Что такое цветовой контраст?

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

Зачем использовать проверку цветового контраста?

Использование анализатора цветового контраста необходимо для того, чтобы каждый, включая людей с недостатками зрения или цвета, мог воспринимать ваш веб-контент.

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

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

Какие элементы не требуются для соответствия требованиям цветового контраста WCAG?

Декоративные изображения, неактивные компоненты пользовательского интерфейса, такие как логотипы брендов и медиафайлы, не требуют контрастности в WCAG, хотя в ваших интересах сделать их легко воспринимаемыми.

Как выполнить проверку соответствия цветового контраста?

Путем тестирования вашего веб-сайта на соответствие WCAG 2.0 AA с помощью средства проверки доступности Accessi.org.