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

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

Что такое коэффициент контрастности цветов?

Коэффициент контрастности цветов измеряет разницу в воспринимаемой яркости между двумя цветами. Он варьируется от 1:1 (одинаковые цвета, нет контраста) до 21:1 (максимальный контраст: черный на белом). Коэффициент рассчитывается по формуле WCAG 2.x на основе значений относительной яркости обоих цветов.

Требования WCAG к контрастности

Руководство по обеспечению доступности веб-контента (WCAG) определяет два уровня соответствия для контрастности цветов:

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

WCAG определяет крупный текст как текст размером не менее 18 пунктов (24px) обычной жирности или не менее 14 пунктов (18.66px) полужирного начертания. Крупный текст имеет более низкие требования к контрастности, потому что крупные символы естественным образом легче читать.

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

1. Введите ваши цвета: Выберите цвета переднего плана (текста) и фона с помощью палитры, введите шестнадцатеричные коды или выберите готовый пример.
2. Проверьте превью: Мгновенно увидите, как ваши цвета выглядят на реальных элементах интерфейса (заголовки, основной текст, кнопки, ссылки, поля ввода).
3. Нажмите "Проверить контраст": Получите точный коэффициент контрастности и статус соответствия WCAG для обычного текста, крупного текста и компонентов интерфейса.
4. Примените предложения: Если ваши цвета не проходят проверку, воспользуйтесь автоматическими предложениями, чтобы найти ближайшую доступную альтернативу.

Понимание результатов

Коэффициент контрастности

Основное число (например, 8.59:1) показывает, насколько сильно различаются два цвета. Чем выше значение, тем лучше для читаемости. Коэффициент не менее 4,5:1 гарантирует, что большинство пользователей смогут комфортно читать текст обычного размера.

Общая оценка

• AAA (Отлично): Соответствует всем критериям WCAG, включая повышенные (7:1+). Наилучшая возможная доступность.
• AA (Хорошо): Соответствует стандартным требованиям (4.5:1+). Удовлетворяет законодательным требованиям в большинстве стран.
• AA Large (Частично): Проходит только для крупного текста или компонентов интерфейса (3:1+). Обычный текст не проходит проверку.
• Fail (Плохо): Не соответствует ни одному критерию контрастности WCAG. Текст будет трудно читать многим пользователям.

Предложения цветов

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

Почему важен контраст цветов

• Соблюдение законодательства: Во многих странах соответствие WCAG AA требуется по закону (ADA, Section 508, EN 301 549, EAA).
• Пользовательский опыт: Хороший контраст улучшает читаемость для всех пользователей, а не только для людей с ограниченными возможностями.
• Влияние на SEO: Поисковые системы все чаще учитывают доступность при ранжировании сайтов.
• Охват аудитории: Примерно 1 из 12 мужчин и 1 из 200 женщин имеют особенности цветовосприятия.

Советы по выбору доступных цветов

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

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

Что такое коэффициент контрастности цветов?

Коэффициент контрастности цветов измеряет разницу в воспринимаемой яркости между двумя цветами. Он варьируется от 1:1 (нет контраста, один и тот же цвет) до 21:1 (максимальный контраст, черный на белом). Коэффициент рассчитывается по формуле WCAG 2.x: (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета, а L2 — более темного.

Какой коэффициент контрастности требуется для соответствия WCAG AA?

WCAG AA требует минимального коэффициента контрастности 4,5:1 для обычного текста (менее 18pt или 14pt жирным шрифтом) и 3:1 для крупного текста (18pt+ или 14pt+ жирным шрифтом). Для нетекстовых компонентов интерфейса и графических объектов минимум составляет 3:1.

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

WCAG AA — это стандартный уровень соответствия, требующий 4,5:1 для обычного текста и 3:1 для крупного текста. WCAG AAA — это повышенный уровень, требующий 7:1 для обычного текста и 4,5:1 для крупного текста. AA требуется большинством законов о доступности, в то время как AAA рекомендуется, но не всегда обязателен для всего контента.

Что считается крупным текстом в рекомендациях WCAG?

В рекомендациях WCAG крупный текст определяется как текст размером не менее 18 пунктов (24px) обычной жирности или не менее 14 пунктов (приблизительно 18,66px) полужирного начертания. Крупный текст имеет более низкие требования к контрастности, так как его легче читать.

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

Чтобы исправить низкий контраст: (1) Сделайте цвет текста темнее или фон светлее, либо наоборот. (2) Используйте нашу функцию предложений цвета, которая автоматически находит ближайший подходящий вариант. (3) Увеличьте размер шрифта до параметров "крупного текста". (4) Используйте дополнительные визуальные индикаторы помимо цвета.

Относится ли контрастность только к тексту?

Нет. Критерий успеха WCAG 2.1 1.4.11 требует минимального контраста 3:1 для нетекстовых элементов, таких как границы полей ввода, иконки и важные графические объекты. Это касается кнопок, форм и индикаторов фокуса.

Дополнительные ресурсы

• WCAG 2.1: Понимание контраста (Минимум)
• WCAG 2.1: Понимание контраста (Повышенный)
• Руководство по обеспечению доступности веб-контента — Википедия