Verificador de contraste de cor

Introduza duas cores e veja instantaneamente a razão de contraste WCAG com orientação AA e AAA.

Pré-visualização

Amostra de texto normal com as suas cores

Amostra de texto grande

Razão de contraste

Introduza ambas as cores para ver a razão

Resultados WCAG

  • AA normal(4.5:1)Reprovado
  • AA texto grande(3:1)Reprovado
  • AAA normal(7:1)Reprovado
  • AAA texto grande(4.5:1)Reprovado

Introduza cores de primeiro plano e fundo em hex ou RGB para calcular instantaneamente a razão de contraste WCAG, ver resultados AA/AAA, pré-visualizar texto e obter sugestões de ajuste opcionais.

Como usar este verificador de contraste de cor

Digite ou cole uma cor de primeiro plano e uma de fundo. A ferramenta normaliza entradas válidas para hex maiúsculo, calcula instantaneamente a razão de contraste WCAG e mostra aprovado ou reprovado para os limiares AA e AAA. Use Sugerir correção, partilhe pela URL ou repor para recomeçar.

Limiares de razão de contraste WCAG

O WCAG 2.x exige pelo menos 4,5:1 para texto normal (AA), 3:1 para texto grande (AA), 7:1 para texto normal (AAA) e 4,5:1 para texto grande (AAA). Esta ferramenta mostra sempre os quatro resultados para comparar níveis.

Formatos de cor suportados

Introduza #RGB, #RRGGBB, rgb(r,g,b) ou valores r,g,b separados por vírgulas. Os canais devem ser inteiros de 0 a 255. Transparência alfa, hex de 8 dígitos, HSL/HSLA e cores nomeadas CSS não são suportados na v1.

O que significam aprovado e reprovado

Aprovado significa que a razão calculada cumpre ou excede o limiar indicado para esse nível. Reprovado significa que não cumpre. Etiquetas e ícones acompanham a cor para que os resultados sejam compreensíveis sem depender apenas da cor.

Perguntas Frequentes

Por que alfa e gradientes não são suportados?

A versão 1 avalia apenas cores sRGB totalmente opacas. Mistura com alfa e gradientes exigem regras de composição que esta ferramenta ainda não modela; rgba(), hex de 8 dígitos e análise de gradientes ficam fora do MVP.

Como é calculada a razão de contraste?

O verificador usa a fórmula de luminância relativa WCAG para cores sRGB opacas: lineariza cada canal, calcula a luminância e aplica (mais claro + 0,05) / (mais escuro + 0,05). As razões mostradas arredondam para duas casas decimais; as verificações de limiar usam o valor completo.

O que faz Sugerir correção?

Move deterministicamente a cor de primeiro plano ou fundo selecionada ao longo de um caminho de luminosidade em direção ao preto ou branco até cumprir o nível WCAG escolhido, devolvendo o hex conforme mais próximo e a razão resultante quando existir.

Posso partilhar um par de cores específico?

Sim. Valores válidos de primeiro plano, fundo e tamanho de texto sincronizam nos parâmetros da URL (por exemplo ?fg=000000&bg=FFFFFF&size=normal) para ligar diretamente a um resultado.

A página guarda as minhas cores?

Os cálculos correm inteiramente no seu navegador. O último par de cores válido pode ser guardado em localStorage no seu dispositivo por conveniência; use Repor para limpar entradas, parâmetros de URL e estado guardado.