Gerador de paletas de cores acessíveis
Gere uma paleta na ferramenta principal e confira as combinações de texto e fundo que pretende usar. A exportação continua disponível mesmo quando uma combinação não atende ao contraste.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
O que esta página explica
Esta página explica o processo e leva diretamente à seção correspondente da ferramenta principal do Chromoforge.
- Gere uma paleta e veja o contraste com branco, preto e as outras cores da paleta ao mesmo tempo.
- A pontuação de uso da paleta combina a cobertura de texto legível, o par de maior contraste e a variedade de matizes. Ela não certifica a acessibilidade.
- As simulações de visão de cores mostram uma aproximação da paleta para deuteranopia, protanopia e tritanopia.
- Confira os pares de cores usados no texto e na interface antes de exportar; o verificador não bloqueia a exportação.
Exemplo prático
Teste o texto e o fundo reais em conjunto. O nome da cor ou o número do tom não garante a legibilidade.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */Qual contraste é necessário para texto de tamanho normal?
O nível AA das WCAG pede 4,5:1 para texto abaixo de 18 pt, ou 14 pt em negrito. Use o verificador manual para conferir a combinação real de texto e fundo antes de publicar.
Elementos decorativos precisam atender ao contraste?
Elementos puramente decorativos e controles desativados têm exceções. A informação visual necessária para reconhecer controles ativos e gráficos significativos geralmente precisa de 3:1 em relação às cores adjacentes. Confira também os requisitos de foco aplicáveis à interface.
Como comparar rapidamente vários pares de cores?
O painel de melhores combinações compara automaticamente as cores da paleta com branco, preto e entre si. Ele mostra os seis maiores contrastes em ordem, sem exigir a digitação de cada par.