Verificador de Paleta de Cores Acessível
Verifique toda a sua paleta de cores para acessibilidade WCAG. Adicione 2–8 cores e veja as proporções de contraste para cada combinação texto-fundo. Todo o processamento ocorre no seu navegador.
Resumo da paleta
6 combinação(ões) falha(m) em AA para texto normal:
- #1A1A2E on #2563EB (3.30:1)
- #2563EB on #1A1A2E (3.30:1)
- #2563EB on #EAEAEA (4.30:1)
- #EAEAEA on #2563EB (4.30:1)
- #EAEAEA on #FFFFFF (1.20:1)
- #FFFFFF on #EAEAEA (1.20:1)
Sua paleta
Adicione ou remova cores (2–8). Cada cor pode ser usada como texto ou fundo; verificamos cada par.
Matriz de contraste
Cada célula é "cor do texto sobre cor de fundo": proporção e aprovação/reprovação WCAG AA (normal).
| Texto ↓ \ Fundo → | 1A1A2E | 2563EB | EAEAEA | FFFFFF |
|---|---|---|---|---|
1A1A2E | — | 3.30 Falha | 14.18 Passa | 17.06 Passa |
2563EB | 3.30 Falha | — | 4.30 Falha | 5.17 Passa |
EAEAEA | 14.18 Passa | 4.30 Falha | — | 1.20 Falha |
FFFFFF | 17.06 Passa | 5.17 Passa | 1.20 Falha | — |
Paletas predefinidas
Referência WCAG
Índice
O que é acessibilidade de paleta?
Acessibilidade de paleta significa que cada forma de combinar cores do seu conjunto — texto sobre fundo, bordas em superfícies, botões em cartões — atende aos requisitos de contraste para que o conteúdo seja legível e os elementos de UI distinguíveis para todos os usuários, incluindo pessoas com baixa visão ou diferenças de visão de cores.
Verificar um único par (ex. texto do corpo sobre fundo da página) não é suficiente. Títulos, legendas, botões, links e bordas criam muitos pares possíveis. Uma paleta acessível é aquela onde as combinações que você realmente usa (ou pode usar) passam nas regras de contraste WCAG.
Por que verificar toda a paleta?
Sistemas de design e paletas de marca têm múltiplos papéis: fundos (página, cartões, seções), texto (títulos, corpo, legendas) e UI (botões, bordas, ícones). Qualquer um deles pode ficar sobre outro. Se você só testa "texto principal sobre fundo de página", pode perder pares com falha como "legenda sobre fundo de cartão" ou "texto do botão sobre primário".
Um verificador de paleta testa cada combinação texto-fundo para que você veja o quadro completo: quais pares passam, quais falham e quantas combinações atendem AA ou AAA. Isso facilita corrigir pares problemáticos ou documentar combinações aprovadas para sua equipe.
Como a ferramenta funciona
Adicione 2–8 cores usando o seletor de cores ou entrada hexadecimal. A ferramenta cria cada par ordenado texto-fundo e calcula a proporção de contraste usando a fórmula WCAG.
- Resumo — Total de combinações, quantas passam em AA (normal) e AAA (normal), e uma lista de pares com falha.
- Matriz de contraste — Uma tabela com cada célula mostrando a proporção e Passa/Falha para WCAG AA texto normal (4,5:1).
- Copiar relatório — Um clique copia sua paleta, resumo e cada combinação para colar em documentos ou tickets.
Todos os cálculos são executados no seu navegador; nenhum dado de cor é enviado a um servidor.
Quando usar
- Sistemas de design — Antes de fixar cores de marca ou UI, verifique cada par texto/fundo pretendido.
- Troca de tema — Para temas claro/escuro ou múltiplos temas, garanta que a paleta de cada tema passe como conjunto.
- Auditorias — Veja rapidamente quais combinações em uma paleta existente falham e precisam de ajuste.
- Documentação — Exporte o relatório para documentar pares aprovados para sua equipe ou clientes.
Níveis de contraste WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem proporções mínimas de contraste para texto e UI:
- AA Normal — Mínimo 4,5:1 para texto regular (menos de 18pt ou 14pt negrito). Este é o alvo habitual para texto do corpo.
- AAA Normal — 7:1 para contraste aprimorado.
- AA Grande — 3:1 para texto grande (18pt+ ou 14pt+ negrito).
- Componentes de UI e gráficos — Mínimo 3:1 para ícones, bordas, controles de formulário e gráficos significativos.
A matriz nesta ferramenta mostra passa/falha para AA normal. O resumo e relatório incluem contagens para AA e AAA para que você possa ver quantos pares atendem cada nível.
Perguntas frequentes
O Verificador de Contraste de Cores testa um primeiro plano e um fundo por vez — ideal para validar uma única combinação ou tentar alternativas. O Verificador de Paleta de Cores Acessível testa cada par em um conjunto de 2–8 cores de uma vez, para que você possa ver quais combinações na sua paleta completa passam ou falham e copiar um relatório completo.
Se uma cor não é um hexadecimal válido de 3 ou 6 dígitos (ex. você ainda está digitando ou deixou um valor em branco), a ferramenta não pode calcular o contraste para pares que o usam. Corrija ou remova a cor inválida e essas células mostrarão a proporção e Passa/Falha em vez disso.
Você pode adicionar entre 2 e 8 cores. Com 2 cores você obtém 2 combinações (A sobre B, B sobre A). Com 8 cores você obtém 56 combinações. Manter a paleta nas cores que você realmente usa para texto e fundos mantém a matriz gerenciável e o relatório focado.
Não. Todos os cálculos de contraste usam a mesma fórmula WCAG e são executados inteiramente no seu navegador. Suas cores nunca saem do seu dispositivo.
Se muitas combinações falharem, sua paleta pode ter muitas tonalidades semelhantes (ex. cinzas claros sobre cinzas ligeiramente diferentes). Adicione mais contraste: inclua cores claramente mais claras e mais escuras para ter opções válidas de texto/fundo. Use o Verificador de Contraste de Cores para testar pares individuais e obter sugestões de melhoria.
Sim. Você pode inserir hex de 6 dígitos (ex. #1A1A2E) ou abreviatura de 3 dígitos (ex. #FFF). A ferramenta expande códigos de 3 dígitos para 6 dígitos internamente e os usa na matriz e no relatório.