Студия доступности цветов и палитр
Создавайте палитры с нуля или из изображений, проверяйте контраст WCAG 2.2, получайте рекомендации по исправлению, симулируйте дальтонизм и экспортируйте в CSS, Tailwind и JSON.
- Точная проверка относительной яркости и контрастности по стандартам WCAG 2.2 (AA, AAA, нетекстовые элементы)
- Автоматическая коррекция цвета в пространстве OKLCH с минимальным изменением оттенка
- Локальное извлечение палитры из изображений алгоритмом Median Cut без отправки на сервер
- Симуляция всех типов дальтонизма (протанопия, дейтеранопия, тританопия, ахроматопсия) в реальном UI
- Экспорт кода в форматы CSS variables, SCSS, Tailwind CSS, Design Tokens JSON, SVG и PNG
Start From
Color Inspector
Базовый цвет (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Палитра цветов
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
Проверка контрастности по WCAG 2.2
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
Рекомендации по доступности (минимальный сдвиг OKLCH)
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
Предпросмотр компонентов интерфейса
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
Симуляция цветовой слепоты
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Математическая аппроксимация. Реальное индивидуальное восприятие может отличаться.
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
Анализ рисков контрастности градиента
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);Читаемость текста на изображении
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);Экспорт кода и файлов
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}О Студии доступности цветов и палитр
Студия доступности цветов и палитр Solasu — это не просто инструмент выбора цвета или калькулятор контраста.
Это полноценная профессиональная среда проектирования: создание цветовых гармоний, извлечение палитр из загруженных изображений, проверка стандартов WCAG 2.2 (уровни AA, AAA и элементы интерфейса), алгоритм минимальной коррекции в перцептивном пространстве OKLCH, интерактивный предпросмотр реальных компонентов в светлой и темной темах, симуляция дальтонизма и экспорт готового кода в CSS, Tailwind, JSON, SVG, PNG и ZIP.
Все операции происходят исключительно в оперативной памяти вашего браузера, гарантируя стопроцентную конфиденциальность.
Точный расчет контраста по стандартам W3C / WCAG 2.2
Расчет основан на официальной формуле относительной яркости sRGB с учетом гамма-линеаризации (L = 0.2126*R + 0.7152*G + 0.0722*B).
Инструмент раздельно тестирует обычный текст (AA: 4.5:1, AAA: 7.0:1), крупный текст (AA: 3.0:1, AAA: 4.5:1) и нетекстовые элементы (3.0:1).
Коррекция цвета с «минимальным сдвигом» в пространстве OKLCH
При недостаточном контрасте алгоритм находит ближайший оттенок в пространстве OKLCH, сохраняя исходный цветовой тон и характер бренда.
Доступны режимы фиксации фона, текста или одновременной мягкой подстройки обоих параметров с метрикой Delta E.
Локальное извлечение палитры из изображений (Median Cut)
Автоматическое выделение доминантных, акцентных, нейтральных, светлых и темных цветов из JPEG, PNG и WebP. Прозрачные пиксели автоматически исключаются.
Безопасное пропорциональное сжатие до 1000px и лимит в 64МП защищают браузер от перегрузки.
Симуляция дальтонизма и предпросмотр компонентов
Поддержка симуляции протанопии, дейтеранопии, тританопии и ахроматопсии в реальных виджетах, формах и графиках.
Предупреждение по стандарту WCAG 2.2 SC 1.4.1 о недопустимости передачи информации только цветом без дублирования иконками и текстом.
Экспорт кода для продакшена в CSS, Tailwind и JSON
Мгновенное формирование переменных CSS с состояниями интерактивности, конфигурации Tailwind CSS v3 и v4, токенов W3C Design Tokens, векторных файлов SVG и ZIP-архивов.
Часто задаваемые вопросы (FAQ)
Этот инструмент бесплатный? Нужна ли регистрация?
Инструмент абсолютно бесплатен, регистрация и вход не требуются.
Сохраняются ли изображения или цвета на сервере?
Нет. Вся обработка выполняется локально в браузере. Сетевые запросы отсутствуют.
Какие форматы цветов поддерживаются?
Поддерживаются HEX (3, 4, 6 и 8 знаков), RGB, RGBA, HSL, HSLA, HSV и OKLCH.
Как рассчитывается контрастность WCAG 2.2?
Через формулу относительной яркости: (Более светлый + 0.05) / (Более темный + 0.05).
В чем разница между уровнями AA и AAA?
AA требует минимум 4.5:1 для обычного текста и 3.0:1 для крупного; AAA — 7.0:1 и 4.5:1.
Какой текст считается крупным?
Текст от 18pt (около 24px) или полужирный от 14pt (около 18.66px).
Что такое нетекстовый контраст?
Критерий 1.4.11 требует контраста не менее 3.0:1 для границ полей, кнопок и значков.
Как работают рекомендации по исправлению цвета?
Алгоритм варьирует яркость L в OKLCH для поиска ближайшего подходящего цвета.
Что означает «минимальный сдвиг»?
Минимизацию евклидова расстояния Delta E в Oklab для максимального сохранения исходного оттенка.
Как извлекаются цвета из картинки?
Через алгоритм квантования Median Cut на пиксельном холсте браузера.
Как обрабатываются прозрачные пиксели PNG?
Пиксели с альфа-каналом менее 128 автоматически игнорируются при анализе.
Можно ли загружать фото высокого разрешения?
Да, изображение автоматически масштабируется до 1000px для мгновенной обработки.
Насколько точна симуляция дальтонизма?
Это общепринятая математическая модель, однако индивидуальное восприятие может различаться.
Какие типы нарушений цветового зрения симулируются?
Протанопия, дейтеранопия, тританопия и полная монохромазия (ахроматопсия).
Почему на графиках нельзя полагаться только на цвет?
Пользователи с дальтонизмом различают ряды данных благодаря пунктирным линиям и подписям.
Как настраивается темная тема?
Палитра оптимизируется под глубокий темный фон (#0F172A) с повторным аудитом контраста.
Как проверяется контраст на градиентах?
Система анализирует 11 контрольных точек и выявляет локальные зоны с контрастом ниже 4.5:1.
Как размещать текст поверх фотографий?
Инструмент анализирует среднюю яркость и рассчитывает оптимальную прозрачность подложки.
Поддерживается ли экспорт в Tailwind CSS?
Да, создаются конфигурации для Tailwind v3 и современные стили `@theme` для Tailwind v4.
Что входит в архив ZIP?
palette.css, palette.scss, tailwind.config.js, tokens.json, SVG и PNG.
Работает ли инструмент на смартфонах?
Да, интерфейс оптимизирован под сенсорные экраны и мобильные браузеры.
Гарантирует ли соблюдение контраста полную доступность сайта?
Нет, контраст критически важен, но также требуются поддержка клавиатуры, семантика и масштабируемость шрифтов.