paleta de cores acessível · WCAG 2.2 · contraste · sinais redundantes
Como criar uma paleta de cores acessível
Transforme cores da marca em papéis de interface, teste os pares que realmente se encostam, preserve foco e estados visíveis e use simulação como apoio, não como substituta de medição ou feedback.
paleta de cores acessível
O que torna uma paleta de cores acessível?
Uma paleta de cores acessível é um conjunto de cores atribuído a papéis, com combinações reais de texto, fundo, controle, foco e gráfico testadas conforme o uso. Para o nível AA da WCAG 2.2, texto normal geralmente precisa de pelo menos 4,5:1, texto grande de 3:1 e a informação visual necessária para identificar controles ativos ou gráficos significativos de 3:1 contra cores adjacentes. A cor não pode ser a única pista. Cada token precisa de uma função, cada par deve alcançar o limite sem arredondamento e erros, links, seleções e gráficos também devem usar texto, forma, padrão ou posição.
Quatro regras para uma paleta de cores acessível
- paleta de cores acessível: atribua primeiro papéis semânticos como tela, superfície, texto principal, destaque, borda, foco, sucesso, aviso e erro
- paleta de cores acessível: meça cada primeiro plano contra o fundo que realmente toca, incluindo hover, foco, seleção, sobreposição e tema escuro
- paleta de cores acessível: trate 4,5:1 e 3:1 como limites mínimos, sem arredondar, e deixe margem para fontes finas e telas reais
- paleta de cores acessível: repita o significado com rótulo, ícone, sublinhado, forma, padrão ou posição para que a diferença de matiz não seja a única instrução
paleta de cores acessível: Testes WCAG 2.2 por papel de interface
| Uso na interface | Par medido | Meta nível AA | Nota prática |
|---|---|---|---|
| Texto normal · paleta de cores acessível | texto contra o fundo renderizado | pelo menos 4,5:1 | 4,499:1 não pode ser arredondado para aprovação |
| Texto grande · paleta de cores acessível | texto grande contra o fundo | pelo menos 3:1 | pelo menos 18 pt normal ou 14 pt negrito, com tamanho equivalente para fontes CJK |
| Controles ativos e gráficos significativos · paleta de cores acessível | pista necessária contra cores adjacentes | pelo menos 3:1 | teste bordas, ícones, foco, seleção e marcas de dados quando carregam significado |
| Informação codificada por cor · paleta de cores acessível | significado além da diferença de matiz | uma pista visível sem cor | adicione texto, forma, padrão, sublinhado, ícone ou posição mesmo quando as cores contrastam |
paleta de cores acessível: Comece com papéis, não com uma bandeja de cores favoritas
Uma paleta de marca descreve identidade; uma paleta de cores acessível descreve decisões. Comece com uma lista curta de funções: tela da página, superfície elevada, texto principal e secundário, link, destaque, borda, anel de foco, estado desativado, sucesso, aviso e erro. Dê um token estável a cada função, em vez de espalhar valores HEX literais pelos componentes. Depois anote quais papéis podem se tocar. O texto principal pode aparecer na página e em um cartão; a borda de erro pode tocar o campo e o fundo. Esse mapa evita testar tudo apenas sobre branco enquanto a interface usa painéis tingidos, transparência, imagens, gradientes e modo escuro. Uma cor da marca pode permanecer para decoração e ser restrita em texto ou controles quando não consegue executar essas funções com segurança.
paleta de cores acessível: Monte uma matriz de pares para texto, controles e estados
Teste combinações, não cores isoladas. Para texto, registre primeiro plano, fundo renderizado, tamanho, peso e estado. Para controles, inclua a informação necessária para localizar o componente e entender foco, marcação, seleção, expansão, erro e hover. A WCAG não aplica a regra de contraste não textual a componentes inativos, mas o produto ainda pode manter estados desativados legíveis e reconhecíveis. Meça transparências depois da composição e use o ponto realista mais desfavorável quando houver texto sobre imagem ou gradiente. Guarde resultados junto aos tokens para que uma mudança de tema não quebre silenciosamente a paleta de cores acessível. A matriz também mostra variantes desnecessárias: se dois cinzas têm o mesmo papel, mas só um passa em todas as superfícies, o sistema menor costuma ser mais seguro.
paleta de cores acessível: Separe contraste de luminância e significado codificado por cor
Contraste e uso de cor respondem a perguntas diferentes. Um selo verde de sucesso pode ter excelente contraste de texto e ainda falhar se apenas o verde o distinguir de um erro vermelho. Mantenha a cor e adicione palavra, ícone, padrão ou estrutura que sobreviva em escala de cinza e a diferentes percepções. Links em parágrafos se beneficiam de sublinhado. Gráficos precisam de rótulos diretos, formatos de marcador, estilos de linha ou padrões quando identificar séries é importante. O foco deve continuar visível sem exigir o nome de uma cor. Cores complementares ou distantes no círculo não são automaticamente acessíveis: distância de matiz não garante contraste de luminância nem cria uma segunda pista. A paleta de cores acessível oferece a base, mas o conteúdo e o componente concluem a comunicação.
Checklist de uma paleta de cores acessível
- paleta de cores acessível: nomeie cada amostra por papel semântico e documente as superfícies e estados permitidos
- paleta de cores acessível: meça texto normal em 4,5:1 ou mais e texto grande em 3:1 ou mais contra o fundo renderizado
- paleta de cores acessível: meça bordas ativas, foco, estados e gráficos necessários em 3:1 contra cores adjacentes
- paleta de cores acessível: verifique normal, hover, foco, ativo, selecionado, inválido, desativado, sobreposição, tema escuro e zoom alto
- paleta de cores acessível: adicione rótulo, forma, ícone, padrão, sublinhado ou posição sempre que a cor comunicar status ou identidade
- paleta de cores acessível: guarde matriz, resultado da ferramenta, versão do componente e data para repetir os testes após mudanças
paleta de cores acessível: Crie e verifique a paleta em quatro etapas
paleta de cores acessível: 1. Inventariar papéis
paleta de cores acessível: liste textos, superfícies, bordas, controles, foco, dados e feedback e marque quais se tocam em cada tema e estado.
paleta de cores acessível: 2. Gerar candidatos
paleta de cores acessível: use a ferramenta de harmonia para explorar opções coerentes, separando preferência de marca dos critérios de contraste.
paleta de cores acessível: 3. Medir a matriz
paleta de cores acessível: teste os pares reais sem arredondar e substitua ou restrinja qualquer token que não alcance o limite de sua função.
paleta de cores acessível: 4. Revisar estados completos
paleta de cores acessível: simule diferenças de visão, inspecione cinza e foco por teclado e teste componentes reais no desktop e no celular.
paleta de cores acessível: O que a WCAG 2.2 realmente estabelece
- paleta de cores acessível: O critério 1.4.3 define 4,5:1 para texto normal e 3:1 para texto grande no nível AA, considera grande ao menos 18 pt normal ou 14 pt negrito e não permite arredondar limites. Ler W3C Understanding SC 1.4.3
- paleta de cores acessível: O critério 1.4.11 exige ao menos 3:1 contra cores adjacentes para a informação visual necessária a controles ativos, seus estados e objetos gráficos significativos. Ler W3C Understanding SC 1.4.11
- paleta de cores acessível: O critério 1.4.1 exige uma alternativa visível quando a cor comunica informação, ação, resposta ou distinção; reconhecer uma cor exata pede outra pista mesmo com 3:1. Ler W3C Understanding SC 1.4.1
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Perguntas sobre uma paleta de cores acessível
Toda cor da paleta precisa contrastar com todas as outras?
paleta de cores acessível: Não. Teste os pares destinados a se tocar e os papéis que cumprem. O texto principal talvez precise passar em várias superfícies, enquanto um destaque decorativo nunca leva texto nem identifica um controle. Documente restrições para impedir uso não testado. Uma matriz de pares é mais precisa que chamar uma amostra isolada de conforme ou não conforme.
Cores complementares são automaticamente acessíveis?
paleta de cores acessível: Não. Posições opostas no círculo descrevem relação de matiz, não um resultado WCAG. Complementares intensas podem ter luminância parecida, dificultar texto ou se confundir em algumas visões. Gere candidatos harmônicos, depois meça contraste e adicione pistas não cromáticas.
Um simulador de daltonismo prova conformidade WCAG?
paleta de cores acessível: Não. Simulação é uma lente de revisão, não diagnóstico, cálculo de conformidade ou substituta de pessoas com deficiência. Meça pares obrigatórios com ferramenta determinística, revise pistas redundantes e estados completos e inclua avaliação especializada ou de usuários conforme o risco.