Проверка контраста цветов
Введите два цвета и сразу увидьте коэффициент контраста WCAG с подсказками AA и AAA.
Введите цвета текста и фона в hex или RGB, чтобы мгновенно рассчитать коэффициент контраста WCAG, увидеть результаты AA/AAA, предпросмотр текста и получить предложения по корректировке.
Как пользоваться проверкой контраста цветов
Введите или вставьте цвет текста и фона. Инструмент нормализует корректный ввод в hex в верхнем регистре, мгновенно рассчитывает коэффициент контраста WCAG и показывает пройдено/не пройдено для порогов AA и AAA. Используйте Предложить исправление, делитесь через URL или сбрасывайте.
Пороги коэффициента контраста WCAG
WCAG 2.x требует минимум 4,5:1 для обычного текста (AA), 3:1 для крупного (AA), 7:1 для обычного (AAA) и 4,5:1 для крупного (AAA). Инструмент всегда показывает все четыре результата для сравнения уровней.
Поддерживаемые форматы цвета
Введите #RGB, #RRGGBB, rgb(r,g,b) или r,g,b через запятую. Каналы — целые числа 0–255. Альфа-прозрачность, 8-значный hex, HSL/HSLA и именованные CSS-цвета в v1 не поддерживаются.
Что означают пройдено и не пройдено
Пройдено означает, что рассчитанный коэффициент соответствует или превышает порог для уровня. Не пройдено — наоборот. Подписи и иконки дополняют цвет, чтобы результаты были понятны не только по цвету.
Часто задаваемые вопросы
Почему не поддерживаются альфа и градиенты?
Версия 1 оценивает только полностью непрозрачные sRGB-цвета. Смешивание с альфа и градиенты требуют правил композиции, которые инструмент пока не моделирует; rgba(), 8-значный hex и анализ градиентов вне MVP.
Как рассчитывается коэффициент контраста?
Используется формула относительной яркости WCAG для непрозрачных sRGB: линеаризация каналов, расчёт яркости, затем (светлее + 0,05) / (темнее + 0,05). Отображаемые значения округляются до двух знаков; проверка порогов использует полное значение.
Что делает Предложить исправление?
Детерминированно сдвигает выбранный цвет текста или фона по пути яркости к чёрному или белому до достижения выбранного уровня WCAG, возвращая ближайший соответствующий hex и итоговый коэффициент, если он существует.
Можно ли поделиться конкретной парой цветов?
Да. Корректные значения текста, фона и размера синхронизируются в параметрах URL (например ?fg=000000&bg=FFFFFF&size=normal) для прямой ссылки на результат.
Сохраняет ли страница мои цвета?
Расчёты выполняются полностью в браузере. Последняя корректная пара может сохраняться в localStorage на устройстве; Сбросить очищает ввод, параметры URL и сохранённое состояние.