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

Коэффициент сравнивает относительную светимость цветов переднего плана и фона по формуле контраста WCAG. Шкала варьируется от 1:1 для одинаковой светимости до 21:1 для самой сильной разницы чёрного и белого. Расчёт использует введённые значения цветов, поэтому он не учитывает автоматически прозрачность, градиенты, фоновые изображения, тени, сглаживание, условия отображения или другой цвет в интерактивном состоянии. Тестируйте фактические отображаемые цвета для состояний обычного, наведения, фокуса, активного, отключённого и посещённого, когда они различаются.

Для обычного текста WCAG AA использует минимальный коэффициент 4.5:1, а AAA - 7:1. Крупный текст использует более низкие пороги, поскольку более крупные, достаточно жирные символы легче различить: 3:1 для AA и 4.5:1 для AAA. Является ли текст крупным, зависит от его отображаемого размера и веса, а не только от дизайнерской метки. Пара может пройти для крупного заголовка и не пройти для основного текста. Проверяйте требование, соответствующее реальной типографике и целевой конформности.

Да. Контраст текста - лишь одна часть доступности цвета. Визуальная информация, необходимая для идентификации элементов управления интерфейса, состояний компонентов, графических объектов и индикаторов фокуса клавиатуры, обычно требует как минимум 3:1 контраста с соседними цветами в соответствии с рекомендациями WCAG по нетекстовому контрасту. Декоративные элементы и неактивные элементы управления имеют разные соображения. Тестируйте границы, значки, диаграммы, выбранные состояния, сообщения проверки и контуры фокуса в контексте. Текстовая пара, прошедшая AA, не доказывает, что каждый интерактивный или графический элемент на том же экране доступен.

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

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