Verificador de Contraste de Cores

Teste a relação de contraste entre as cores do primeiro plano e do fundo para garantir a acessibilidade.

1.00:1
Contraste
Fail
Muito fraco

Texto normal

AA (4.5:1)
AAA (7:1)

Texto grande

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#ff7e00

Correcções rápidas

Aa

Pré-visualiza o título

A rápida raposa castanha salta sobre o cão preguiçoso

Exemplo de texto pequeno (12px)

Texto
#000000
Antecedentes
#ff7e00

Normas WCAG

Level AA

Relação de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande. Necessário para a maioria dos sítios Web.

Level AAA

Relação de contraste melhorada de 7:1 para texto normal e 4,5:1 para texto grande. Recomendado para uma acessibilidade óptima.

Contraste insuficiente para todos os tamanhos de texto - não cumpre as normas WCAG.

Verificador de Contraste de Cores

Calcule a relação de contraste entre as cores do texto e do fundo.

Escolha uma cor utilizando o seletor de cores para o texto e o fundo, ou introduza uma cor no formato hexadecimal RGB (por exemplo, #259 ou #2596BE). Pode ajustar o seletor para escolher a cor. As Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) têm uma norma específica para ajudar a determinar se o texto é legível para os utilizadores. Este critério utiliza um algoritmo para mapear combinações de cores em proporções comparáveis. Utilizando esta fórmula, as WCAG afirmam que uma relação de contraste de 4.5:1 entre o texto e o fundo é suficiente para texto normal, e que texto grande (18pt ou maior, ou 14pt ou maior e a negrito) deve ter uma relação de contraste de pelo menos 3:1.

Caraterísticas principais

  • Cálculo do rácio de contraste em tempo real
  • Verificação da conformidade com as WCAG AA e AAA
  • Deslizadores HSL para ajuste fino
  • Vários formatos de pré-visualização

Ferramentas avançadas

  • Fixação automática da cor
  • Amostras de texto e de fundo
  • Deteção do nome da cor
  • Exportar resultados