Verificador de contraste de cores
Verifique as cores de primeiro plano e de fundo em relação aos limites de contraste WCAG 2.2 AA e AAA. Inclua transparência sobre uma tela de fundo explícita, pré-visualize o texto e exporte um relatório.
Também conhecido comoverificador de contraste · verificador de contraste WCAG · contraste de cores · contrast checker · verificador de contraste de cor
Use um nome de cor CSS, HEX, RGB/RGBA ou HSL/HSLA. As cores transparentes são compostas sobre a tela escolhida antes do cálculo.
| Uso | Mínimo | Resultado |
|---|---|---|
| Texto normal · AA | 4.5:1 | Aprovado |
| Texto normal · AAA | 7:1 | Aprovado |
| Texto grande · AA | 3:1 | Aprovado |
| Texto grande · AAA | 4.5:1 | Aprovado |
| Interface e gráficos essenciais · AA | 3:1 | Aprovado |
Aprovado/reprovado usa a taxa não arredondada. Texto grande significa pelo menos 24 px CSS, ou cerca de 18,67 px CSS quando em negrito. O contraste de interface depende das cores adjacentes reais; este par sozinho não pode estabelecer conformidade total com as WCAG.
Deixe cada palavra fácil de ler.
A pré-visualização usa os limites de texto normal. Fundo efetivo: #FFFFFF (arredondado para exibição).
Três pequenos passos.
- Informe as cores do texto e do fundo como nomes de cores CSS, HEX, RGB ou HSL.
- Escolha a tela de fundo opaca por trás das cores transparentes e revise os resultados de contraste.
- Pré-visualize texto normal ou grande, troque as cores e copie ou baixe o relatório.
Algumas coisas para saber.
Usa o cálculo de luminância relativa sRGB das WCAG, com taxas não arredondadas para aprovar ou reprovar. Texto grande tem pelo menos 24 pixels CSS, ou cerca de 18,67 pixels quando em negrito. Isto verifica um par de cores sólidas; gradientes, imagens, a renderização real das fontes, cores de interface adjacentes e a conformidade total de acessibilidade exigem uma revisão à parte.
Como funciona a sua privacidade →Um pouco mais de clareza.
Por que 4,50:1 às vezes reprova?
A taxa exibida é arredondada para duas casas decimais. A decisão usa o valor completo, sem arredondamento; por isso, uma taxa logo abaixo de 4,5 ainda reprova no limite AA para texto normal.
Como a transparência afeta o resultado?
Primeiro, o fundo é composto sobre a tela de fundo opaca selecionada. Depois, o texto é composto sobre esse fundo efetivo antes de o contraste ser calculado. Uma tela de fundo diferente pode mudar o resultado.
Pesquisas relacionadascontraste de cores acessibilidade · contraste de cores online