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

Проверьте цветовые сочетания текста и фона на соответствие контрастности требованиям WCAG.

Контрастный результат -

Руководство

Обычный текст

Крупный текст

AA (мин)

AAA (улучшено)

Предварительный просмотр

Пример большого текста

Пример обычного текста. Соответствие WCAG гарантирует читаемость для пользователей с нарушениями зрения. Проверьте уровни AA и AAA.

Пример текста меньшего размера. Этот размер обычно требует более высокой контрастности, часто соответствующей стандартам AAA для хорошей читаемости.

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

Что такое WCAG 2.1

WCAG (Web Content Accessibility Guidelines) - это международные стандарты по доступности веб-контента, направленные на обеспечение удобного и равноправного доступа к информации для людей с ограничениями зрения и иными особенностями восприятия.

Версия 2.1 дополняет предыдущие требования новыми критериями, включая нормы по контрастности цветов.

Для чего нужна проверка цветового контраста?

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

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

Что значат эти индикаторы

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

Значки «Соответствует» или «Не соответствует» показывают, соответствует ли цветовое сочетание минимальным требованиям WCAG для каждого уровня и размера текста.

Для обычного текста необходима контрастность не ниже 4,5:1 на уровне AA и 7:1 на уровне AAA, а для крупного текста - 3:1 на уровне AA и 4,5:1 на уровне AAA.

Рекомендуется стремиться к максимальному уровню соответствия с учётом требований вашего проекта.