Проверка контраста — бесплатный инструмент для проверки соотношения контраста WCAG

Цвет — один из самых мощных инструментов в дизайне, но он также может быть одним из самых исключающих. Прекрасная цветовая палитра ничего не значит, если ваши пользователи не могут читать текст. Недостаточный контраст — наиболее распространенная проблема доступности на вебе, затрагивающая более 300 миллионов людей с нарушением цветового восприятия и бесчисленное количество других пользователей, использующих мобильные устройства на ярком солнце или экраны со стареющей яркостью. Наш бесплатный Проверка контраста мгновенно вычисляет соотношение контраста между любыми двумя цветами и точно сообщает, где они находятся по сравнению со стандартами WCAG AA и AAA — чтобы вы могли проектировать инклюзивно, без угадывания.

Что такое контраст цвета и почему это важно?

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

Руководящие принципы по доступности содержимого веба (WCAG) определяют контраст математически, используя относительную яркость — меру того, насколько ярко цвет выглядит человеческому глазу. Формула учитывает тот факт, что наши глаза более чувствительны к зеленому свету, чем к красному или синему. Яркий зеленый может выглядеть светлее, чем яркий красный, даже если у них одинаковая числовая яркость в RGB. Формула WCAG корректирует это, производя соотношение контраста, которое точно отражает восприятие человека.

Диапазон соотношений контраста варьируется от 1:1 (одинаковые цвета, отсутствие контраста) до 21:1 (чистый черный на чистом белом, максимальный контраст). Большинство доступных дизайнов находятся где-то посередине. Соотношение 4.5:1 является минимальным для обычного текста по стандартам WCAG AA. 7:1 — более строгий стандарт AAA. Эти числа не произвольны — они основаны на масштабных исследованиях того, что люди с различными визуальными нарушениями могут на самом деле различать.

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

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

Проверка комбинации цветов занимает секунды. Выберите два цвета и получите мгновенный вердикт.

1. Выберите цвет переднего плана. Обычно это цвет текста. Нажмите на цветную палитру, чтобы открыть встроенный выборщик, или введите код HEX напрямую в поле ввода.
2. Выберите цвет фона. Это поверхность за текстом. Используйте тот же выборщик или введите код HEX вручную.
3. Прочтите соотношение контраста. Инструмент отображает точное соотношение контраста в центральном положении — например, 7.23:1 — чтобы вы точно знали, где вы находитесь.
4. Проверьте соответствие WCAG. Таблица результатов показывает статус прохождения или не прохождения:
   • Обычный текст по стандартам WCAG AA (4.5:1) и AAA (7:1)
   • Большой текст по стандартам WCAG AA (3:1) и AAA (4.5:1)
   • Компоненты интерфейса по стандартам WCAG AA (3:1)
5. Предварительный просмотр цветов в контексте. Инструмент показывает образцы обычного текста и крупного заголовка, отображаемые с вашей выбранной комбинацией, чтобы вы могли визуально оценить реальную читаемость.
6. Обмен цветами с помощью кнопки переворота, чтобы проверить обратную комбинацию — светлый текст на темном фоне вместо темного текста на светлом.
7. Копируйте соотношение в буфер обмена с одного щелчка для документации или заметок в системе дизайна.

Весь процесс мгновенный. Настройте любой цвет и смотрите, как соотношение, таблица соответствия и предварительный просмотр обновляются в реальном времени.

Понимание соотношений контраста

Диапазон соотношения	Уровень доступности	Что это означает
1:1 до 2.99:1	Не соответствует ни одному стандарту	Текст почти невозможно отличить от фона; непригоден для любого читаемого контента
3:1 до 4.49:1	Соответствует AA только для крупного текста и интерфейса	Подходит для больших заголовков (18pt+), кнопок, иконок и границ; не соответствует для основного текста
4.5:1 до 6.99:1	Соответствует AA для всех текстов	Соответствует минимальному стандарту для обычного основного текста; читаем для большинства пользователей
7:1 до 21:1	Соответствует AAA для обычного текста	Улучшенная доступность; читаем для пользователей с серьезными нарушениями зрения; идеально подходит для длинного контента

Что считается "крупным текстом"?

WCAG определяет крупный текст как 18 пунктов (24 пикселя) или больше, или 14 пунктов жирный (приблизительно 18.67 пикселей жирный) или больше. Заголовки, кнопки призыва к действию и героический текст часто соответствуют крупному тексту, что означает, что они могут проходить с меньшим соотношением контраста, чем основной текст. Однако стремление к минимуму 4.5:1 везде все еще является лучшей практикой, потому что это обеспечивает согласованность и защищает ваш дизайн от масштабирования и увеличения.

Почему формула использует относительную яркость

Формула контраста WCAG не является простым сравнением значений RGB. Сначала она преобразует каждый цвет в относительную яркость — меру воспринимаемой яркости, которая весит зеленый цвет тяжелее, чем красный или синий, потому что человеческие глаза наиболее чувствительны к зеленому свету. Это причина, почему два цвета с одинаковыми значениями яркости в RGB могут производить очень разные соотношения контраста. Чистый красный (#FF0000) и чистый зеленый (#00FF00) оба имеют максимальную интенсивность в одном канале, но зеленый выглядит намного ярче для человеческого глаза, поэтому его относительная яркость выше.

Основные функции

Функция	Что она делает	Почему это важно
Реальное время вычисления контраста	Мгновенно вычисляет соотношение WCAG при изменении цветов	Перебирайте варианты палитры и смотрите, как соответствие обновляется сразу
Тестирование WCAG AA & AAA	Показывает проход/не проход для обычного текста, крупного текста и компонентов интерфейса на обоих уровнях	Знайте точно, какие стандарты вы соблюдаете, без необходимости запоминать пороги
Живой предварительный просмотр текста	Отображает образцы основного текста и крупных заголовков с вашими цветами	Оценивайте читаемость визуально, а не только математически
Обмен цветами	Меняет передний план и фон с одного щелчка	Тестируйте варианты светлого текста на темном фоне и наоборот мгновенно
Ввод HEX	Принимает прямые коды HEX для точного совпадения цветов	Совпадайте с точными цветами бренда из вашей системы дизайна
Копирование соотношения	Копирует соотношение контраста в буфер обмена	Документируйте соответствие доступности в спецификациях дизайна и аудитах
Сначала конфиденциальность	Все вычисления выполняются в вашем браузере	Нет данных о дизайне отправляется на любой сервер

В отличие от базовых инструментов контраста, которые показывают только число, этот проверщик помещает соотношение в контекст. Вы видите не только то, что ваша комбинация имеет соотношение 4.2:1, но и то, что она не проходит AA для основного текста, но проходит для крупного текста — информация, которая помогает вам решить, следует ли темнить текст или увеличить размер шрифта.

Реальные случаи использования

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

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

Создатели контента, форматирующие документы Маркетолог создает PDF-руководство с цветными выделенными блоками и выделенным текстом. Он использует проверщик контраста, чтобы убедиться, что каждый цвет текста на каждом фоне проходит WCAG AA. Это гарантирует, что PDF будет доступен при преобразовании в HTML или чтении с помощью скринридеров, и защищает организацию от жалоб, связанных с доступностью.

Менеджеры продуктов, проводящие аудиты доступности Менеджер по продуктам готовится к обзору VPAT (Voluntary Product Accessibility Template). Он использует проверщик контраста, чтобы протестировать каждую комбинацию цветов в своем приложении по стандартам WCAG, документируя соотношения для каждого. Это создает аудитный след, который демонстрирует добросовестность и соответствие.

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

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

Советы и лучшие практики

• Стремитесь к уровню AAA, если это возможно. Хотя AA является юридическим минимумом в большинстве юрисдикций, AAA обеспечивает лучший опыт для всех. Если цвета вашего бренда могут достичь 7:1 без конфликта, используйте их. Маленькая визуальная компромисс стоит огромного выигрыша в доступности.
• Не полагайтесь только на цвет. Даже с идеальным контрастом цвет не доступен всем. Пользователи с цветовой слепотой могут не различать красный и зеленый. Всегда сочетайте цвет с иконками, метками, узорами или текстом для передачи значения.
• Проверьте всю вашу палитру. Система дизайна может иметь десять цветов текста и десять цветов фона. Это сто возможных комбинаций. Систематически проверяйте каждую пару — или хотя бы самые распространенные — чтобы предотвратить появление проблем доступности.
• Проверьте состояния фокуса и интерактивные элементы. Кнопки, ссылки, поля форм и переключатели нуждаются в контрасте не менее 3:1 по отношению к окружающей области. Кнопка, которая проходит для текста, может не пройти как компонент интерфейса, если ее граница слишком тонкая.
• Учитывайте прозрачность и прозрачные слои. Если ваш текст находится на изображении или полупрозрачном слое, эффективный фон — это смесь цветов. Проверщик контраста проверяет сплошные цвета, поэтому для прозрачных слоев вам нужно сначала рассчитать смешанный результат или проверять осторожно.
• Проверяйте на разных уровнях масштабирования. Пользователи с низким зрением масштабируют до 200% и более. На высоком масштабировании текст выглядит крупнее, что помогает, но относительный контраст остается тем же. Убедитесь, что ваши соотношения достаточно сильны, чтобы выдерживать увеличение.
• Документируйте свои соотношения. Когда вы завершаете пару цветов, запишите их соотношение контраста в документации вашей системы дизайна. Это помогает будущим дизайнерам и разработчикам поддерживать доступность по мере эволюции продукта.

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

Бесплатно ли использовать Проверку контраста?

Да. Проверка контраста полностью бесплатна без ограничений на использование, без регистрации и без рекламы. Вы можете тестировать столько комбинаций цветов, сколько пожелаете.

Что такое WCAG?

WCAG означает Web Content Accessibility Guidelines. Это международный стандарт, опубликованный W3C, который определяет, как сделать веб-контент доступным для людей с ограниченными возможностями. Текущая версия — WCAG 2.1, а WCAG 2.2 добавляет дополнительные критерии. Руководящие принципы организованы в три уровня: A (минимум), AA (стандарт) и AAA (усиленный).

Какое соотношение контраста нужно для прохождения WCAG AA?

Для обычного текста (менее 18pt или 14pt жирный), вам нужно минимум 4.5:1. Для крупного текста (18pt или больше, или 14pt жирный или больше) и компонентов интерфейса, таких как кнопки и поля форм, вам нужно минимум 3:1.

В чем разница между WCAG AA и AAA?

AA — это стандартный уровень соответствия, требуемый большинством законов и руководящих принципов по доступности по всему миру, включая Раздел 508 в США и Европейский акт по доступности. AAA — это усиленный уровень, обеспечивающий большую доступность, но он не требуется везде и иногда считается слишком строгим для общего веб-контента. Для AAA обычный текст требует соотношения 7:1, а крупный текст — 4.5:1.

Можно ли тестировать цвета RGB или HSL?

Инструмент принимает ввод кода HEX напрямую. Если у вас есть значения RGB или HSL, сначала используйте наш инструмент Color Picker, чтобы преобразовать их в HEX. Введите код HEX в Проверку контраста и мгновенно протестируйте.

Работает ли этот инструмент на мобильных устройствах?

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

Можно ли использовать это для печатного дизайна?

Хотя WCAG специально разработан для цифрового контента, принципы контраста применимы и к печати. Соотношение 4.5:1 или выше обычно обеспечивает читаемый текст в печатных материалах. Однако дизайнеры печати также должны учитывать покрытие чернил, качество бумаги и расстояние просмотра, кроме цифровых соотношений контраста.

Что происходит, если цвета моего бренда не соответствуют WCAG?

Если цвета вашего бренда не соответствуют требуемому соотношению, у вас есть несколько вариантов. Слегка осветлите или потемните текст. Увеличьте размер шрифта, чтобы текст соответствовал категории "крупного текста", которая требует меньшего соотношения. Добавьте тень или контур текста, чтобы увеличить воспринимаемый контраст. Или используйте несоответствующий цвет только для декоративных элементов и выберите доступный альтернативный вариант для функционального текста.