Verificador de contraste de cores

A taxa compara a luminância relativa das cores de primeiro plano e de fundo usando a fórmula de contraste da WCAG. A escala vai de 1:1 para luminância idêntica a 21:1 para a diferença mais forte entre preto e branco. O cálculo usa os valores de cor inseridos, portanto não considera automaticamente transparência, gradientes, imagens de fundo, sombras, suavização de bordas, condições de exibição ou uma cor diferente apresentada em um estado interativo. Teste as cores reais renderizadas para os estados normal, passar o mouse, foco, ativo, desabilitado e visitado quando eles diferirem.

Para texto comum, a WCAG AA exige uma taxa mínima de 4.5:1 e a AAA, 7:1. Texto grande usa limites menores, pois caracteres maiores e suficientemente em negrito são mais fáceis de distinguir: 3:1 para AA e 4.5:1 para AAA. A definição de texto grande depende do tamanho e do peso renderizados, não apenas de um rótulo de design. Portanto, um par pode ser aprovado para um título grande e reprovado para texto do corpo. Verifique o requisito que corresponde à tipografia real e ao nível de conformidade.

Sim. O contraste do texto é apenas uma parte da acessibilidade de cores. As informações visuais necessárias para identificar controles de interface, estados de componentes, objetos gráficos e indicadores de foco do teclado geralmente precisam de pelo menos 3:1 de contraste com as cores adjacentes, de acordo com a diretriz de contraste não textual da WCAG. Elementos decorativos e controles inativos têm considerações diferentes. Teste bordas, ícones, gráficos, estados selecionados, mensagens de validação e contornos de foco no contexto. Um par de texto que passa no AA não prova que todos os elementos interativos ou gráficos na mesma tela são acessíveis.

Insira as cores efetivas do primeiro plano e do plano de fundo no ponto em que o texto ou um gráfico essencial aparece. Camadas semitransparentes se fundem com o que está atrás delas, e gradientes ou fotografias criam diferentes taxas de contraste no mesmo elemento. Amostre a área relevante mais fraca e, em seguida, teste outras posições prováveis e recortes responsivos. Se o contraste depender de uma sombra, contorno ou sobreposição, inclua o efeito renderizado real na revisão manual. Prefira um fundo sólido e estável atrás de textos importantes quando a imagem subjacente puder mudar.

Não. O contraste é apenas um requisito mensurável. Um design acessível também exige tipografia legível, espaçamento suficiente, estrutura semântica, rótulos, operação pelo teclado, foco visível, alternativas significativas, zoom e reflow utilizáveis, movimento controlado e instruções que não dependam somente da cor. Pares de cores podem ser aprovados matematicamente e mesmo assim serem difíceis em fontes finas, tamanhos pequenos, ofuscamento, diferenças de visão de cores ou layouts densos. Use o resultado como uma das verificações em uma revisão mais ampla e teste a interface real com conteúdo e estados representativos.