Проверка контрастности WCAG
Проверяет контраст цвета текста и фона по WCAG 2.1. Уровни AA, AAA для обычного и крупного текста. Превью в реальном времени.
О сервисе
Проверяет коэффициент контраста между цветом текста и фона по стандарту WCAG 2.1. Показывает соответствие уровням AA и AAA для обычного и крупного текста.
Что умеет
- Расчёт коэффициента контрастности (от 1:1 до 21:1)
- 4 проверки: AA/AAA для обычного и крупного текста
- Живой превью с заданными цветами
- Color picker и HEX-поле для каждого цвета
- Цветовая индикация результата (зелёный/красный)
Как работает
Формула relative luminance из WCAG 2.1: L = 0.2126·R + 0.7152·G + 0.0722·B (после линеаризации). Контраст = (L1 + 0.05) / (L2 + 0.05).
Пример
Тёмно-серый #1e293b на белом #ffffff даёт 14.5:1 — проходит даже AAA. Светло-серый #94a3b8 на белом — только 2.8:1, не проходит даже AA.
Нужен подобный сервис для вашего сайта или сложный сценарий — пишите, разработаю под задачи.
Похожие инструменты
Генератор border-radius
Конструктор скруглений углов CSS. Все углы одинаково или каждый отдельно, превью прямоугольника.
Генератор clip-path
Готовые формы clip-path: треугольник, ромб, шестиугольник, звезда, стрелка и др. Превью + готовый CSS.
Генератор CSS box-shadow
Конструктор тени для блоков с превью карточки. Слайдеры X/Y/blur/spread, цвет, режим inset, несколько теней.
Генератор CSS-анимации
Готовые @keyframes анимации: fade, bounce, shake, pulse, spin, slideIn. Слайдеры длительности, повторов и timing-функции.
Генератор CSS-градиента
Визуальный конструктор linear- и radial-градиентов. Color stops, угол наклона, готовый CSS-код.
Конвертер px → rem / em / vw
Перевод значений CSS из пикселей в rem, em, vw, vh, % и обратно. Настраиваемый root font-size, ширина и высота вьюпорта.
Сделаю такой же сервис под вашу задачу
Внутренние инструменты для сотрудников, публичные сервисы для клиентов, конвертеры и генераторы. Напишите — обсудим.
