Estúdio de Acessibilidade de Cores e Paletas
Crie paletas acessíveis do zero ou de imagens, verifique o contraste WCAG 2.2, gere sugestões de correção, simule daltonismo e exporte para CSS, Tailwind e JSON.
- Verificação rigorosa de luminância relativa e taxa de contraste WCAG 2.2 (AA, AAA e não textual)
- Correção de cor automatizada no espaço OKLCH com distância mínima para preservar o tom
- Extração de paletas no navegador via algoritmo Median Cut sem uploads para servidores
- Simulação de daltonismo (protanopia, deuteranopia, tritanopia, acromatopsia) em componentes reais
- Exportação em variáveis CSS, SCSS, Tailwind CSS, Design Tokens JSON, SVG e PNG
Start From
Color Inspector
Cor base (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Amostras da paleta
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
Verificação de Contraste 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.
Sugestões acessíveis (alteração mínima em 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 | — |
Pré-visualização de componentes reais
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
Simulação de deficiências de visão de cores
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Simulação matemática aproximada. A percepção visual individual pode variar.
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
Análise de risco de contraste em degradê
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%);Legibilidade de texto sobre imagem
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);Exportar código e recursos
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;
}
}Sobre o Estúdio de Acessibilidade de Cores e Paletas
O Estúdio de Acessibilidade de Cores da Solasu é uma solução completa que vai além de um simples gerador de paletas.
Ele integra um fluxo de trabalho profissional: criação de combinações harmônicas, extração de paletas de imagens, validação das normas de contraste WCAG 2.2 (níveis AA, AAA e controles de interface), geração de candidatos com alteração mínima no espaço perceptivo OKLCH, visualização de componentes reais em temas claro e escuro, simulação de daltonismo e exportação de código para CSS, Tailwind, JSON, SVG, PNG e ZIP.
Todas as operações ocorrem diretamente na memória do seu navegador, com zero envio de dados.
Cálculo rigoroso de contraste baseado nas normas W3C / WCAG 2.2
Aplica a fórmula oficial de luminância relativa sRGB com linearização gama (L = 0.2126*R + 0.7152*G + 0.0722*B).
Avalia separadamente texto padrão (AA: 4.5:1, AAA: 7.0:1), texto grande (AA: 3.0:1, AAA: 4.5:1) e componentes não textuais de interface (3.0:1).
Correção de cor com «alteração mínima» no espaço OKLCH
Quando o contraste é insuficiente, o algoritmo realiza uma busca binária na luminosidade OKLCH para encontrar a cor sRGB mais próxima que atinja a meta exigida.
Oferece modos de fundo fixo, texto fixo ou ajuste simultâneo, informando a distância Delta E objetiva.
Extração local de paletas a partir de imagens (Median Cut)
Extrai tons dominantes, de destaque, neutros, escuros e claros de fotos JPEG, PNG ou WebP, ignorando áreas transparentes.
Ajuste automático para 1000px e limite de 64MP para evitar consumo excessivo de memória.
Simulação de daltonismo e testes em componentes de interface
Simulação de protanopia, deuteranopia, tritanopia e acromatopsia em painéis, formulários e gráficos.
Aviso conforme o critério 1.4.1 das WCAG 2.2 para evitar o uso exclusivo da cor na transmissão de status.
Exportação de código pronta para produção
Gera variáveis CSS com estados interativos, configurações para Tailwind CSS v3 e v4, tokens JSON W3C, arquivos SVG e pacotes ZIP.
Perguntas Frequentes (FAQ)
Esta ferramenta é gratuita? Preciso me cadastrar?
É 100% gratuita, sem necessidade de cadastro ou login.
Minhas imagens ou cores ficam salvas em algum servidor?
Não. Todos os cálculos ocorrem localmente no navegador, sem tráfego de rede.
Quais formatos de cores são aceitos?
HEX (3, 4, 6 e 8 dígitos), RGB, RGBA, HSL, HSLA, HSV e OKLCH.
Como o contraste WCAG 2.2 é calculado?
Calcula a luminância relativa linearizada e aplica a razão (Mais claro + 0.05) / (Mais escuro + 0.05).
Qual é a diferença entre os níveis AA e AAA?
O nível AA requer 4.5:1 para texto normal e 3.0:1 para grande; o AAA exige 7.0:1 e 4.5:1.
O que é considerado texto grande?
Texto com pelo menos 18pt (aprox. 24px) ou 14pt (aprox. 18.66px) em negrito.
O que é o contraste não textual?
O critério 1.4.11 exige pelo menos 3.0:1 para bordas de campos, ícones e botões.
Como funcionam as sugestões de correção de cor?
Ajusta a luminosidade em OKLCH buscando a nuance mais próxima que cumpra a meta.
O que significa «alteração mínima»?
Minimiza a distância cromática Delta E para manter a harmonia visual da marca.
Como as cores são extraídas de uma imagem?
Por meio do algoritmo Median Cut executado diretamente no canvas do navegador.
Como os pixels transparentes em PNG são tratados?
Pixels com canal alfa inferior a 128 são descartados automaticamente.
Posso enviar fotos de altíssima resolução?
Sim, a imagem é reduzida proporcionalmente para 1000px para garantir velocidade.
A simulação de daltonismo é exata?
É um modelo matemático amplamente aceito, mas a percepção individual varia.
Quais tipos de daltonismo podem ser simulados?
Protanopia (vermelho), deuteranopia (verde), tritanopia (azul/amarelo) e acromatopsia (monocromia).
Por que gráficos não devem depender só da cor?
Usuários com daltonismo precisam de linhas pontilhadas, traços e rótulos para diferenciar séries.
Como o tema escuro é configurado?
As cores são balanceadas contra um fundo escuro (#0F172A) com nova auditoria de contraste.
Como o contraste em degradês é avaliado?
A ferramenta analisa 11 pontos do degradê e alerta se alguma área cair abaixo de 4.5:1.
Quais são as orientações para texto sobre fotos?
Avalia a luminância média e calcula a opacidade ideal de uma camada atenuada.
É possível exportar para Tailwind CSS?
Sim, gera o arquivo de configuração para Tailwind v3 e o bloco `@theme` para Tailwind v4.
O que vem dentro do arquivo ZIP baixado?
Contém palette.css, palette.scss, tailwind.config.js, tokens.json, palette.svg e palette.png.
Funciona em celulares e tablets?
Sim, a interface é totalmente responsiva e adaptada a telas sensíveis ao toque.
Atingir o contraste suficiente garante acessibilidade plena?
Não, também são fundamentais a navegação por teclado, estrutura semântica e suporte a leitores de tela.