Контраст WCAG
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Проверка контрастности цветов по стандарту WCAG
Заголовок страницы
Обычный текст. Проверьте читаемость текста на выбранном фоне. Достаточный контраст между текстом и фоном важен для доступности.
Маленький текст (14px). Для мелкого шрифта требования к контрасту строже.
Крупный текст (18px bold). Для крупного текста допустим меньший контраст.
Очень маленький текст (12px). Этот размер требует максимального контраста для комфортного чтения.
WCAG — Web Content Accessibility Guidelines, стандарт доступности веб-контента.
Уровень AA — минимальный рекомендуемый уровень контрастности. Обычный текст >= 4.5:1, крупный текст >= 3:1.
Уровень AAA — повышенный уровень. Обычный текст >= 7:1, крупный текст >= 4.5:1.
Крупный текст — текст 18px+ обычный или 14px+ жирный.
Формула — Относительная яркость L = 0.2126*R + 0.7152*G + 0.0722*B (после sRGB-линеаризации). Контраст = (L1 + 0.05) / (L2 + 0.05), где L1 — большая яркость.
Проверка контрастности WCAG онлайн — доступность цветов
Инструмент рассчитывает коэффициент контрастности между двумя цветами по стандарту WCAG 2.1 и предлагает автоматически скорректированные варианты для достижения уровней AA и AAA. Это обязательный инструмент для разработчиков и дизайнеров, заботящихся о доступности.
Что такое WCAG
WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента, разработанный W3C. Версия 2.1 (2018) и 2.2 (2023) определяют критерии для людей с нарушениями зрения, слуха и когнитивными особенностями. Контрастность текста — один из ключевых критериев (Success Criterion 1.4.3).
Уровни контрастности
| Уровень | Обычный текст | Крупный текст (18pt+ или 14pt жирный) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
| Декоративные элементы | Нет требований | |
Для примера: чёрный на белом (#000/#fff) = контраст 21:1 (максимум). Серый #767676 на белом = ровно 4.5:1 (AA). Светло-серый #aaa на белом = 2.32:1 (не соответствует).
Формула расчёта контрастности
Контраст = (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Относительная яркость рассчитывается из sRGB-компонентов с гамма-коррекцией (линеаризацией).
Подбор доступных цветов
Наш инструмент автоматически подбирает ближайшие варианты цвета, удовлетворяющие AA и AAA. Алгоритм бинарным поиском изменяет яркость (L в HSL) до достижения нужного коэффициента, сохраняя оттенок и насыщенность исходного цвета.
Часто задаваемые вопросы
Применяется ли WCAG к иконкам без текста?
Да, к информационным иконкам (не декоративным) применяется требование AA (3:1). Декоративные элементы исключены.
Обязательно ли соблюдать WCAG?
Для государственных сайтов в большинстве стран — да (закон об инвалидах). Для коммерческих — рекомендуется, так как улучшает UX для всех пользователей и снижает юридические риски.
Влияет ли размер шрифта на требования?
Да. Крупный текст (18px обычный или 14px жирный) требует меньшего контраста: AA = 3:1 вместо 4.5:1.
Как проверить весь сайт на контрастность?
Используйте расширения axe DevTools или WAVE для Chrome. Они автоматически проверяют все элементы страницы.
Для выбора цветов используйте Color Picker, для создания градиентов — CSS Gradient.
Полезные статьи
CSS Border Radius: скругление углов элементов
Как использовать border-radius: синтаксис, сокращённая запись, эллиптические углы. Генератор border-radius онлайн.
Markdown: синтаксис и возможности
Полное руководство по Markdown: форматирование текста, заголовки, списки, ссылки, изображения, таблицы и код.