Verificador de contraste de cores
Cheque. WCAG AA e AAA contraste de texto para cores hex opacas. Visualize o seu par, troque de cores, e aplique uma alternativa de texto de alto contraste.
Relatório de contraste.
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
O texto exportado permanece em inglês; seus dados são mantidos como foram digitados.
Sem registro. Nenhum crédito de IA. Esta ferramenta monta sua saída no seu navegador.
De uma ideia para algo útil.
- 01
Digite texto e cores de fundo.
- 02
Reveja a razão calculada e limiares normais ou de texto grande.
- 03
Tente uma cor de texto e exporte o resultado.
Um pouco de contexto.
As relações de contraste usam WCAG Fórmula de relativa-luminância para cores opacas de SRGB. Um texto normal requer 4,5:1 e um grande texto requer 3:1. Texto grande geralmente significa pelo menos 24. CSS Pixels, ou cerca de 18,67 CSS Pixels em negrito. A proporção bruta determina o resultado antes do arredondamento. Isto é uma verificação de cor, não uma auditoria de acessibilidade.
Boas perguntas.
Posso colocar cores transparentes?
Não. Use valores opacos de 3 ou 6 dígitos. Cor transparente composta em seu fundo final antes de medir.
Uma relação passageira significa que minha página está acessível?
Não. Navegação de teclado, semântica, foco, dimensionamento legível, e outros requisitos ainda precisam de testes. A ferramenta avalia apenas este par texto/fundo.