🎨

Проверка контраста цветов (WCAG)

Проверьте контрастность цветов по стандарту WCAG 2.1 для доступности сайта

Цвет текста (передний план)

HSL: 240°, 28%, 14%

Цвет фонаHSL: 0°, 0%, 100%

17.06:1Коэффициент контрастности134.5721КритерийМин. контрастРезультатAA — обычный текст4.5:1ПройденAA — крупный текст3:1ПройденAAA — обычный текст7:1ПройденAAA — крупный текст4.5:1ПройденAA — элементы UI3:1ПройденНастройка параметров текстаРазмер шрифта: 16pxНасыщенностьТекущие параметры соответствуют обычному тексту по WCAGПредварительный просмотр

Пример текста для проверки контрастности

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

КнопкаКнопкаСсылкаГотовые цветовые пары

Проверка контраста WCAG — доступность цветов онлайн

Онлайн инструмент для проверки контрастности цветов по стандарту WCAG 2.1 (Web Content Accessibility Guidelines). Определяет коэффициент контраста между текстом и фоном, проверяет соответствие уровням AA и AAA. Инструмент для дизайнеров, разработчиков и специалистов по доступности.

Коэффициент контраста (1:1 — 21:1)
Проверка WCAG AA: нормальный текст ≥ 4,5:1, крупный ≥ 3:1
Проверка WCAG AAA: нормальный ≥ 7:1, крупный ≥ 4,5:1
Ввод цвета: HEX, RGB, HSL, палитра
Предпросмотр текста на фоне
Рекомендации по улучшению контраста

Что такое WCAG

WCAG — международный стандарт доступности веб-контента. Требования к контрасту: AA (минимум) — 4,5:1 для обычного текста, 3:1 для крупного (18pt+ или 14pt bold). AAA (рекомендуемый) — 7:1 и 4,5:1 соответственно.

Коэффициент 1:1 — нет контраста (белый на белом). 21:1 — максимум (чёрный на белом). Значения < 3:1 — нечитаемо для 10% населения (нарушения зрения).

Зачем проверять контраст

Доступность: 15% населения имеют нарушения зрения. Низкий контраст = нечитаемый текст для миллионов. Юридические требования: в ЕС (EAA) и США (ADA) доступность обязательна для госсайтов и публичных сервисов. SEO: Google учитывает доступность как фактор ранжирования. UX: высокий контраст = лучшая читаемость для ВСЕХ, не только для людей с нарушениями.

💡

Пример из жизни

Дизайнер выбирает цвет текста на светло-голубом фоне (#E3F2FD). Предлагает серый (#90A4AE) — «выглядит стильно». Нужно проверить контраст.

Ввёл: текст #90A4AE на фоне #E3F2FD

Контраст: 2,8:1 — НЕ проходит AA (нужно 4,5:1)

Попробовал темнее: #546E7A → контраст 5,2:1 — проходит AA, не проходит AAA

✅

Сменил серый на #546E7A (контраст 5,2:1) — проходит WCAG AA. Визуально почти так же «стильно», но читаемо для людей с нарушениями зрения. Без проверки 10% пользователей не смогли бы прочитать текст.

🧠

Знаете ли вы?

👁️

15% населения Земли (1,2 млрд) имеют нарушения зрения. 4,5% мужчин — дальтоники. Контраст 4,5:1 обеспечивает читаемость для 95%+ людей

📊

Чёрный на белом: контраст 21:1 (максимум). Тёмно-серый (#333) на белом: 12,6:1. Светло-серый (#999) на белом: 2,8:1 — НЕ проходит WCAG

⚖️

С 2025 в ЕС (European Accessibility Act) доступность обязательна для всех онлайн-магазинов и сервисов. Штрафы за несоответствие: до 2% от оборота

🎨

Чисто белый текст на жёлтом фоне: контраст 1,1:1 — практически невидим. Жёлтый — самый проблемный цвет для контраста с белым

📱

На мобильных контраст ещё важнее: блики, солнечный свет, маленький экран. Apple Human Interface Guidelines требует контраст ≥ 4,5:1 для всех элементов

🔤

Крупный текст (18pt / 14pt bold) может иметь контраст 3:1 (AA) — глаз легче различает крупные символы. Мелкий текст — строже: 4,5:1

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

Элемент	WCAG AA (мин.)	WCAG AAA (рекоменд.)	Пример
Обычный текст (< 18pt)	4,5:1	7:1	#595959 на #FFFFFF = 7,0:1 ✓
Крупный текст (≥ 18pt)	3:1	4,5:1	#757575 на #FFFFFF = 4,6:1 ✓ AA
UI-элементы (кнопки)	3:1	—	Границы, иконки
Логотипы	Нет требований	—	Декоративный текст
Плейсхолдеры	3:1 (неофициально)	—	Серый на белом

💡

Важно знать

Быстрое правило: чёрный/белый текст проходит WCAG на ЛЮБОМ фоне. Если нужен цветной текст: проверьте контраст. Светло-серый (#999) на белом — НЕ проходит (2,8:1). Минимум для AA: #757575 на белом (4,6:1). Всегда проверяйте — глаз обманывает.

Как использовать Проверка контраста цветов (WCAG)

Шаг 1

Введите цвет текста и цвет фона (HEX, RGB или выберите из палитры)

Шаг 2

Инструмент рассчитает коэффициент контраста (1:1 — 21:1)

Шаг 3

Проверьте: проходит ли WCAG AA (4,5:1) и AAA (7:1)

Шаг 4

Если не проходит — затемните текст или осветлите фон до нужного контраста

Примеры использования

Чёрный (#000) на белом (#FFF)

Контраст 21:1. Максимум. Проходит AA и AAA. Но может быть «жёстким» для глаз — #333 на #FFF = 12,6:1 (тоже отлично)

Серый (#999) на белом

Контраст 2,8:1. НЕ проходит AA (< 4,5:1). Нечитаемо для 10% пользователей. Решение: #757575 (4,6:1)

Белый (#FFF) на голубом (#2196F3)

Контраст 3,3:1. Проходит AA для крупного текста (≥ 3:1), НЕ проходит для обычного (< 4,5). Решение: #E3F2FD на #1565C0 = 7,2:1

Тёмная тема: светло-серый на тёмном

#B0BEC5 на #263238 = 6,7:1. Проходит AA и AAA для крупного. Для обычного текста: используйте #ECEFF1 (10,2:1)

Красный (#F44336) на белом

Контраст 3,9:1. НЕ проходит AA для обычного текста. Ярко-красный — проблемный цвет для контраста. Решение: #C62828 = 7,4:1 (темнее)

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

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

Отношение яркости светлого цвета к тёмному. Формула: (L1 + 0,05) / (L2 + 0,05), где L — относительная яркость. 1:1 = нет контраста. 21:1 = максимум (чёрный/белый). WCAG требует ≥ 4,5:1 для обычного текста.

Крупный текст — это сколько?

По WCAG: 18pt (24px) и больше, ИЛИ 14pt (18,67px) bold. Для крупного: контраст ≥ 3:1 (AA). Для обычного: ≥ 4,5:1. Разница: глаз легче различает крупные символы → требование мягче.

Обязательно ли соответствовать WCAG?

Юридически: в ЕС (EAA, с 2025) и США (ADA, Section 508) — да для госсайтов и публичных сервисов. В РФ: ГОСТ Р 52872-2019 рекомендует, но не обязывает. Практически: доступность улучшает UX для ВСЕХ пользователей и SEO.

AA или AAA — к чему стремиться?

AA — минимум (4,5:1). Достаточно для большинства. AAA (7:1) — для сайтов здравоохранения, госуслуг и максимальной доступности. Стремитесь к AAA, соглашайтесь на AA. Ниже AA — недопустимо.

Как проверить всю страницу?

Ручная проверка: каждая пара текст/фон. Автоматическая: расширения Lighthouse, axe, WAVE. Они сканируют DOM и находят все элементы с низким контрастом. Рекомендуется: автоматическая + ручная для ключевых элементов.

Тёмная тема сложнее для доступности?

Да. Белый текст на тёмном фоне воспринимается как более контрастный, чем есть. Кроме того: «halation» (свечение белого на чёрном) снижает читаемость. Рекомендация: не чисто белый (#FFF), а слегка серый (#E0E0E0) на не чисто чёрном (#1A1A1A).

Полезная информация

🔒 Конфиденциальность. Расчёт выполняется в браузере — цвета не отправляются на сервер.

♿ Для доступности. 15% населения имеют нарушения зрения. Контраст ≥ 4,5:1 = читаемый текст для 95%+ людей. 30 секунд на проверку = доступный сайт.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀