Проверка Контраста Цветов Онлайн
Проверяйте контраст цветов по стандарту WCAG 2.1 прямо в браузере.
Sample Text
This is a normal text paragraph to verify readability.
#1a1a1f
#f8f6f3
Зачем это нужно
Контрастность по WCAG: доступность сайта
WCAG 2.1 AA/AAA
Проверка соответствия уровням AA и AAA стандарта W3C.
Без интернета
Расчёт в браузере без отправки данных на сервер.
Точный алгоритм
Вычисление относительной яркости по формулам WCAG 2.1.
Мгновенно
Результат обновляется при выборе цветов.
Как это работает
Три шага — никаких сложностей
Введите цвета
Выберите или введите цвет текста и цвет фона в формате HEX, RGB или HSL.
Получите результат
Инструмент вычислит коэффициент контраста и укажет, соответствует ли он уровням AA и AAA WCAG.
Скорректируйте при необходимости
Подберите альтернативные цвета, обеспечивающие требуемый уровень контраста.
FAQ
Остались вопросы?
WCAG (Web Content Accessibility Guidelines) — руководство W3C по доступности веб-контента. Уровень AA (минимальный для большинства сайтов): контраст 4.5:1 для обычного текста, 3:1 для крупного текста (18pt+ или жирный 14pt+). Уровень AAA (расширенная доступность): контраст 7:1 для обычного и 4.5:1 для крупного текста.
Коэффициент контраста = (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Относительная яркость вычисляется через линеаризацию sRGB-значений каналов и взвешивание по человеческому восприятию.
Относительная яркость — мера воспринимаемой яркости цвета относительно белого (яркость белого = 1, чёрного = 0). Вычисляется через гамма-коррекцию sRGB-значений и взвешивание по восприятию: Y = 0.2126R + 0.7152G + 0.0722B.
Уровень AA WCAG 2.1 является юридическим требованием для государственных сайтов во многих странах и стандартом де-факто для коммерческих проектов. В ЕС Директива о доступности веб-сайтов (EU 2016/2102) обязывает государственные органы соответствовать WCAG AA. В США Section 508 предъявляет аналогичные требования.
Нет. WCAG 1.4.11 (Non-text Contrast, уровень AA) также требует контраст 3:1 для элементов интерфейса (границы форм, иконки, индикаторы состояния) и компонентов, передающих информацию. Это означает, что кнопки, поля ввода и иконки тоже должны соответствовать минимальным требованиям контраста.
WCAG и контрастность: доступность как стандарт и юридическое требование
WCAG (Web Content Accessibility Guidelines) разрабатываются W3C с 1999 года. WCAG 2.0 был опубликован в 2008 году, WCAG 2.1 в 2018 году, WCAG 2.2 в 2023 году. Критерий 1.4.3 (Contrast Minimum) требует коэффициент контраста 4.5:1 для текста нормального размера на уровне AA. Критерий 1.4.6 (Contrast Enhanced) требует 7:1 на уровне AAA.
Исследование WebAIM Million (ежегодный аудит миллиона сайтов) неизменно показывает, что недостаточный контраст — самая распространённая проблема доступности. В 2023 году она выявлена на 83.6% из проанализированных главных страниц. Особенно уязвимы пользователи со слабовидением, цветовой слепотой (8% мужчин) и использующие мониторы при ярком внешнем освещении.
Помимо соответствия стандартам, высокий контраст положительно влияет на конверсию. A/B-тесты показывают, что кнопки с чётким контрастом имеют более высокий CTR. Инструменты для автоматической проверки контраста встроены в Chrome DevTools, Figma (через плагины), Axe DevTools и Lighthouse.