Sobre esta ferramenta
O Verificador de contraste WCAG calcula o contraste entre duas cores opacas, mostra uma pré-visualização do texto e verifica AA e AAA separadamente para texto normal e grande. Avalia apenas o contraste de cores e não constitui uma avaliação completa da acessibilidade do site.
Como utilizar
- Introduza as cores do texto e do fundo em HEX opaco de 3 ou 6 dígitos.
- Observe a apresentação do texto sobre o fundo escolhido.
- Consulte a relação de contraste e os quatro resultados Conforme/Não conforme.
- Ajuste as cores, verifique novamente e copie os resultados.
Exemplos de utilização
- #000000 e #ffffff → 21:1.
- Duas cores iguais → 1:1.
- #777777 e #ffffff → aproximadamente 4.48:1, abaixo do mínimo AA de 4.5:1 para texto normal.
Como funciona o cálculo
Cada canal sRGB é dividido por 255. Se c ≤ 0.04045, o canal linear é c / 12.92; caso contrário, é ((c + 0.055) / 1.055)^2.4. A luminância relativa é L = 0.2126R + 0.7152G + 0.0722B. Contraste = (L mais clara + 0.05) / (L mais escura + 0.05). A avaliação usa o resultado completo sem arredondamento; só a apresentação é arredondada.
Limiares de contraste de texto WCAG 2.x
- AA, texto normal: pelo menos 4.5:1.
- AA, texto grande: pelo menos 3:1.
- AAA, texto normal: pelo menos 7:1.
- AAA, texto grande: pelo menos 4.5:1.
Texto grande corresponde geralmente a pelo menos 18pt (24 píxeis CSS), ou a texto em negrito com pelo menos 14pt (cerca de 18.67 píxeis CSS). A verificação dos limiares usa sempre a relação de contraste não arredondada.
Utilizações comuns
- Verificar o contraste do texto de botões com o respetivo fundo.
- Verificar o contraste de texto corrente e títulos num tema.
- Ajustar designs aos limiares de contraste de texto WCAG.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
O que é o contraste WCAG?
Mede a diferença entre as cores do primeiro plano e do fundo através da luminância relativa, numa escala de 1:1 a 21:1.
O que significa 4.5:1?
É a relação de contraste mínima do nível WCAG AA para texto normal. O resultado tem de atingir pelo menos 4.5 para ser conforme.
Qual é a diferença entre AA e AAA?
Para o contraste de texto, AAA é mais exigente: requer 7:1 para texto normal e 4.5:1 para texto grande.
O que se considera texto grande?
Geralmente, texto com pelo menos 18pt ou texto em negrito com pelo menos 14pt, equivalentes a cerca de 24px e 18.67px, respetivamente.
Posso verificar cores transparentes ou gradientes?
Esta página só trata cores sólidas opacas. As cores transparentes devem primeiro ser compostas sobre o fundo real. Nos gradientes, verifique o menor contraste nas zonas ocupadas pelo texto.