Ir para o conteúdo principal
Bethemesh
Web e SEO

Verificador de contraste

Compare uma cor de texto e uma cor de fundo, calcule a respetiva relação de contraste e verifique rapidamente os limites WCAG AA e AAA.

  • Área de transferência

Integrar este widget

Personalize o resultado, verifique a pré-visualização e copie o código.

Pré-visualização

Tipo de código de integração

Código a copiar

Responsivo e redimensionado automaticamente pela Bethemesh.

Esta ferramenta foi útil?

Como funciona esta ferramenta?

Este verificador calcula a relação de contraste entre uma cor de texto e uma cor de fundo pelo método das WCAG e indica se a combinação cumpre os limiares AA e AAA. Serve para validar uma paleta antes de a levar para uma maqueta, uma folha de estilos ou um componente, sem enviar as cores para nenhum servidor.

Cada cor hexadecimal é convertida em luminância relativa: os canais vermelho, verde e azul são linearizados e ponderados segundo a sensibilidade do olho (o verde pesa mais de 70 % da luminância).

A relação divide a luminância mais clara mais 0,05 pela mais escura mais 0,05. Vai de 1:1 (duas cores iguais) a 21:1 (preto sobre branco) e não depende da ordem das cores.

O resultado é comparado com três limiares: 4,5:1 para texto normal em AA, 3:1 para texto grande em AA e 7:1 para texto normal em AAA. Uma pré-visualização mostra o texto nas duas cores escolhidas.

Como usar esta ferramenta

  1. Escolha a cor do texto

    Introduza ou selecione a cor dos caracteres.

  2. Escolha a cor do fundo

    Indique a cor do fundo sobre o qual o texto aparece.

  3. Leia a relação e os níveis

    A relação aparece com Conforme ou Não conforme para AA texto normal, AA texto grande e AAA texto normal.

  4. Ajuste até ao nível pretendido

    Escureça o texto ou clareie o fundo aos poucos e volte a verificar.

Fórmula da relação de contraste WCAG

A relação compara a luminância relativa das duas cores.

Relação de contraste

Relação = (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância da cor mais clara

O 0,05 representa a luz ambiente refletida pelo ecrã.

Luminância relativa

L = 0,2126 × R + 0,7152 × G + 0,0722 × B, com canais linearizados entre 0 e 1

Um canal c (valor sobre 255 dividido por 255) vale c ÷ 12,92 se for no máximo 0,03928; caso contrário, ((c + 0,055) ÷ 1,055)^2,4.

L_1
Luminância da cor mais clara
L_2
Luminância da cor mais escura
R_s, G_s, B_s
Canais vermelho, verde e azul linearizados

Casos de uso

Validar uma identidade visual

Confirmar que uma cor de marca continua legível como texto sobre fundo branco ou escuro antes de a usar em todo o site.

Corrigir uma auditoria de acessibilidade

Encontrar o tom mais próximo que atinge 4,5:1 quando uma auditoria assinala um cinzento demasiado claro.

Escolher a cor de um botão

Comparar o texto de um botão com o seu fundo e testar depois os estados hover e desativado.

Exemplos

Cinzento #777777 sobre fundo branco

Este cinzento muito usado falha o AA por pouco: serve para um título grande, não para um parágrafo.

Entrada

Cor do texto: #777777 · Cor do fundo: #ffffff

Resultado

Relação de contraste: 4.48:1 · AA texto normal: Não conforme · AA texto grande: Conforme · AAA texto normal: Não conforme

Cinzento #595959 sobre fundo branco

Um cinzento mais escuro atinge exatamente o limiar AAA de 7:1 sem a dureza do preto puro.

Entrada

Cor do texto: #595959 · Cor do fundo: #ffffff

Resultado

Relação de contraste: 7.00:1 · AA texto normal: Conforme · AA texto grande: Conforme · AAA texto normal: Conforme

Dicas e boas práticas

  • Considera-se texto grande o de 24 px (18 pt) normal ou 18,66 px (14 pt) a negrito; abaixo disso, procure 4,5:1.
  • Para texto sobre imagem ou gradiente, teste a zona do fundo mais desfavorável.
  • Ícones e contornos de campos seguem outro critério WCAG (1.4.11), que pede 3:1 face às cores vizinhas.
  • Uma relação conforme não resolve tudo: um texto muito fino ou muito pequeno pode continuar difícil de ler.

Fontes e referências

Perguntas frequentes

O que é uma relação de contraste?

É a luminância da cor mais clara dividida pela da mais escura, cada uma mais 0,05. Vai de 1:1 para duas cores iguais a 21:1 para preto sobre branco.

Que limiares é preciso atingir?

Para o nível AA, 4,5:1 em texto normal e 3:1 em texto grande. Para o nível AAA, 7:1 em texto normal. O AA é o nível exigido pela maioria das regras, incluindo a norma europeia EN 301 549.

Porque é que #777777 sobre branco não é conforme?

A relação é de 4.48:1, logo abaixo de 4,5:1. A ferramenta não arredonda a seu favor: com 4,48, o texto normal não atinge o AA.

A ordem das duas cores altera o resultado?

Não. A fórmula põe sempre a cor mais clara no numerador: texto branco sobre azul e texto azul sobre branco dão a mesma relação.

A transparência é tida em conta?

Não. A ferramenta compara duas cores opacas. Para uma cor semitransparente, calcule primeiro a cor que resulta sobre o fundo e verifique essa cor.

As cores são enviadas para algum lado?

Não. O cálculo é feito no seu navegador e as cores não saem do seu dispositivo.

Ferramentas relacionadas

Continue com estas ferramentas

Ferramentas semelhantes ou complementares a esta.

Ferramentas semelhantes

Gerador de slug

Transforme um título ou uma frase num slug limpo e pronto para usar numa URL.

Web e SEOUtilizar esta ferramenta

Validador de URL

Valide, normalize e inspecione endereços Web localmente.

Web e SEOUtilizar esta ferramenta

Leia também

GuiaBoas práticasIniciante

Contraste WCAG: como tornar as cores acessíveis?

Compreenda os limites de contraste WCAG, meça uma combinação de cores e corrija casos que dificultam leitura ou utilização da interface.

31 de agosto de 20263 min
TutorialBoas práticasIniciante

Otimizar imagens para a Web sem perder qualidade

Redimensionamento, compressão, WebP, AVIF e boas práticas: um método completo para tornar as imagens de um site mais leves sem degradar desnecessariamente o resultado.

30 de agosto de 20264 min