Бесплатный генератор

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

Проверьте контрастность цветов по стандартам WCAG

Converge Converge Team
•

Colors

Large Text Preview

Normal body text preview. Check if this is easy to read against the background color.

Results

Contrast Ratio
12.63:1
AA Normal Text
Requires 4.5:1
PASS ✓
AA Large Text
Requires 3:1
PASS ✓
AAA Normal Text
Requires 7:1
PASS ✓
AAA Large Text
Requires 4.5:1
PASS ✓

Проверка контрастности цветов измеряет читаемость текста на фоне, рассчитывая коэффициент контрастности, определённый в Руководстве по обеспечению доступности веб-контента (WCAG 2.1). Она показывает, соответствуют ли ваши цветовые сочетания стандартам доступности — и смогут ли люди с нарушениями зрения прочитать ваш контент. Используйте её вместе с нашим генератором цветовых палитр, чтобы создавать доступные палитры бренда с нуля.

Согласно анализу доступности 1 миллиона домашних страниц WebAIM за 2024 год, низкая контрастность текста — самая распространённая ошибка доступности, обнаруженная на 83,6% всех проверенных сайтов. Это значит, что подавляющее большинство сайтов не соответствует минимальным требованиям контрастности для обеспечения читаемости текста людьми с нарушениями зрения.

Бизнес-обоснование существенно. По оценкам ВОЗ, 2,2 миллиарда человек в мире имеют ту или иную форму нарушения зрения. Только в США, по данным CDC, 12 миллионов человек старше 40 лет имеют нарушения зрения. Доступный дизайн — это не только этично, но и практично, затрагивая значительную часть вашей аудитории.

WCAG 2.1 определяет два уровня соответствия: AA требует соотношение 4.5:1 для обычного текста (3:1 для крупного), а AAA требует 7:1 для обычного (4.5:1 для крупного). Этот инструмент мгновенно рассчитывает оба уровня при выборе цветов, позволяя находить доступные сочетания без угадывания.

Как пользоваться Generator

  1. Задайте цвет переднего плана: выберите или введите цвет текста (обычно более тёмный).
  2. Задайте цвет фона: выберите или введите цвет фона (обычно более светлый).
  3. Прочитайте результат: коэффициент контрастности и статус соответствия WCAG обновляются мгновенно.
  4. Корректируйте до соответствия: изменяйте цвета, пока не увидите зелёные галочки для нужного уровня соответствия.

Советы

  • Стремитесь к AA минимум: 4.5:1 для основного текста — это законодательный стандарт в большинстве юрисдикций. AAA (7:1) лучше, но не всегда обязателен.
  • Проверяйте реальные цвета: не ограничивайтесь проверкой чёрного на белом. Тестируйте цвета бренда, цвета ссылок, текст кнопок и текст-заполнитель — именно здесь прячутся проблемы с контрастностью.
  • Не забывайте о состояниях hover и focus: интерактивные элементы часто меняют цвет при наведении. Оба состояния — обычное и при наведении — должны иметь достаточную контрастность.
  • Крупный текст более гибкий: заголовкам от 24px достаточно контрастности 3:1. Это позволяет использовать больше фирменных цветов в заголовках, сохраняя строгое соответствие для основного текста.

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

Что такое коэффициент контрастности цветов?
Коэффициент контрастности — это числовая мера разницы в воспринимаемой яркости между двумя цветами, выражаемая как соотношение, например 4.5:1. Он варьируется от 1:1 (нет контраста, одинаковый цвет) до 21:1 (максимальный контраст, чёрный на белом). Руководство по обеспечению доступности веб-контента (WCAG) использует это соотношение для определения минимальных стандартов читаемости.
Каковы требования WCAG к контрастности?
WCAG 2.1 определяет два уровня соответствия. AA (минимальный) требует 4.5:1 для обычного текста и 3:1 для крупного (жирный от 18px или обычный от 24px). AAA (повышенный) требует 7:1 для обычного текста и 4.5:1 для крупного. Большинство законов о доступности ссылаются на AA как минимальный стандарт.
Почему контрастность цветов важна?
Приблизительно 1 из 12 мужчин и 1 из 200 женщин имеют нарушения цветового восприятия. Текст с низкой контрастностью также труден для пожилых людей, людей при ярком солнечном свете и всех с ослабленным зрением. Согласно исследованию WebAIM 2024 года, низкая контрастность текста — самая распространённая ошибка доступности, обнаруженная на 83,6% проверенных домашних страниц.
Как рассчитывается коэффициент контрастности?
Коэффициент использует значения относительной яркости каждого цвета. Относительная яркость учитывает, как человеческий глаз воспринимает яркость (зелёный кажется ярче синего при одинаковом значении). Формула: (L1 + 0.05) / (L2 + 0.05), где L1 — яркость более светлого цвета, а L2 — более тёмного.
Что считается крупным текстом в WCAG?
Крупный текст определяется как 18pt (24px) и более для обычного начертания или 14pt (18.67px) и более для жирного. К крупному тексту предъявляются более мягкие требования по контрастности, так как большие символы по определению легче читать. Большинство основного текста на сайтах имеет размер 16px, что считается обычным текстом и требует контрастности 4.5:1.
Требуется ли соответствие AA или AAA по закону?
Большинство законов о доступности (ADA в США, EAA в ЕС, AODA в Канаде) ссылаются на WCAG 2.1 AA как минимальный стандарт. AAA — это рекомендательный уровень: мало какие сайты достигают его для всего контента. Однако соответствие AAA для ключевого контента — навигации, форм и сообщений об ошибках — значительно улучшает удобство для всех пользователей.

Похожие инструменты

Email Signature Generator →QR Code Generator →Color Palette Generator →

Ready to try Converge?

$49/month flat. Up to 15 agents. 14-day free trial, no credit card required.

Start Free Trial