O verificador usa a fórmula oficial de luminância relativa do WCAG, por isso os valores coincidem com os do WebAIM e com a maioria das auditorias de acessibilidade. Tudo corre no navegador - as cores nunca são enviadas para fora e não há limites de utilização.
Contraste de cores - verificador WCAG
Funciona inteiramente no navegador - sem carregar nada, sem registo.
Rácio de contraste
Passaprecisa de 4.5:1
Passaprecisa de 3:1
Falhaprecisa de 7:1
Passaprecisa de 4.5:1
Grande = 18 pt (24 px), ou 14 pt (18,66 px) em negrito.
O que é um verificador de contraste de cores?
Um verificador de contraste de cores mede o rácio de contraste entre a cor do texto e o fundo e indica se cumpre as normas de acessibilidade WCAG. Devolve um valor entre 1:1 e 21:1 e mostra se passa ou falha nos níveis AA e AAA, tanto para texto normal como para texto grande.
Como utilizar
- 1Introduza as cores. Escreva um código hex, um valor rgb() ou o nome de uma cor CSS para o texto e o fundo, ou selecione-as com o seletor de cor.
- 2Leia o rácio. O rácio de contraste atualiza-se em direto, com uma pré-visualização do texto sobre o fundo escolhido.
- 3Verifique os resultados. Cada indicador mostra se passou ou falhou no WCAG AA e AAA para texto normal e texto grande.
Para quem é
- Designers que testam as cores da marca antes de chegarem ao desenvolvimento.
- Programadores front-end que verificam botões, ligações e etiquetas face ao WCAG AA.
- Auditores de acessibilidade que documentam falhas de contraste com rácios exatos.
- Equipas de conteúdo e e-mail que confirmam que o texto se mantém legível em fundos coloridos.
Perguntas frequentes
O verificador de contraste de cores é gratuito?
Sim - é 100% gratuito, sem registo e sem limites. Funciona inteiramente no navegador.
Que rácio de contraste preciso para o WCAG AA?
O WCAG 2.1 Nível AA exige um rácio mínimo de 4,5:1 para texto normal e 3:1 para texto grande. O Nível AAA eleva esses valores para 7:1 em texto normal e 4,5:1 em texto grande.
O que conta como texto grande?
Texto grande é o que tem pelo menos 18 pt (cerca de 24 px) com peso normal, ou 14 pt (cerca de 18,66 px) em negrito. O texto grande admite um rácio de contraste mais baixo porque os glifos maiores são mais fáceis de ler.
Como se calcula o rácio de contraste?
A fórmula é (L1 + 0,05) / (L2 + 0,05), em que L1 e L2 são a luminância relativa da cor mais clara e da mais escura. A luminância é calculada a partir dos canais vermelho, verde e azul em sRGB, de acordo com a definição do WCAG 2.x.
Suporta hex, RGB e nomes de cores?
Sim. Pode introduzir hex de 3, 4, 6 ou 8 dígitos, valores rgb() e rgba(), ou qualquer nome de cor CSS como «teal». Também pode escolher as cores com o seletor nativo.
Por que razão o mesmo rácio passa às vezes e falha outras?
O rácio exigido depende do tamanho do texto e do nível que se pretende atingir. Um rácio de 3,5:1 falha no AA para texto normal mas passa no AA para texto grande - verifique sempre em função do tamanho e do nível que utiliza de facto.