ToolPronto
Verifique o contraste e monte uma paleta
Teste o contraste pelas regras WCAG, encontre alternativas e copie as cores para o CSS.
Verificar cores
Verificador de contraste de texto
Teste uma combinação de texto e fundo pelos limites da WCAG 2.x.
Uma cor legível depende do contexto real.Uma cor legível depende do contexto real.
- Proporção de contraste
- 16.68:1
- Texto normal AA
- ✓ Aprovado
- Texto grande AA
- ✓ Aprovado
Formatos da cor
#17201Brgb(23 32 27)hsl(147 16% 11%)Verificar cores
Paleta com cinco cores
Gere, bloqueie, audite, simule e exporte uma paleta reutilizável com cinco cores.
Esta prévia determinística é uma aproximação, não um diagnóstico nem um teste de conformidade. As cores exportadas não mudam.
Auditoria de contraste da paleta original
Em cada linha, a primeira cor é o texto e a segunda é o fundo.
- Cor 1 sobre a cor 2
#096447 / #E2F3EC6.24:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 1 sobre a cor 3
#096447 / #17201B2.32:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 1 sobre a cor 4
#096447 / #F4F6F36.61:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 1 sobre a cor 5
#096447 / #6D46D91.21:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 2 sobre a cor 1
#E2F3EC / #0964476.24:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 2 sobre a cor 3
#E2F3EC / #17201B14.51:1Texto normal AA: AprovadoTexto normal AAA: AprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 2 sobre a cor 4
#E2F3EC / #F4F6F31.06:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 2 sobre a cor 5
#E2F3EC / #6D46D95.18:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 3 sobre a cor 1
#17201B / #0964472.32:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 3 sobre a cor 2
#17201B / #E2F3EC14.51:1Texto normal AA: AprovadoTexto normal AAA: AprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 3 sobre a cor 4
#17201B / #F4F6F315.35:1Texto normal AA: AprovadoTexto normal AAA: AprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 3 sobre a cor 5
#17201B / #6D46D92.80:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 4 sobre a cor 1
#F4F6F3 / #0964476.61:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 4 sobre a cor 2
#F4F6F3 / #E2F3EC1.06:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 4 sobre a cor 3
#F4F6F3 / #17201B15.35:1Texto normal AA: AprovadoTexto normal AAA: AprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 4 sobre a cor 5
#F4F6F3 / #6D46D95.48:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 5 sobre a cor 1
#6D46D9 / #0964471.21:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 5 sobre a cor 2
#6D46D9 / #E2F3EC5.18:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado - Cor 5 sobre a cor 3
#6D46D9 / #17201B2.80:1Texto normal AA: ReprovadoTexto normal AAA: ReprovadoTexto grande AA: ReprovadoTexto grande AAA: Reprovado - Cor 5 sobre a cor 4
#6D46D9 / #F4F6F35.48:1Texto normal AA: AprovadoTexto normal AAA: ReprovadoTexto grande AA: AprovadoTexto grande AAA: Aprovado
Verificador de contraste e ferramentas de paleta
O verificador mede uma combinação de texto e fundo pelos limites de contraste de texto da WCAG 2.x. Em um cartão separado, você pode gerar uma paleta, bloquear cores, auditar todas as combinações, visualizar simulações e copiar variáveis CSS.
Para que serve cada ferramenta de cor
- Contraste: conferir texto normal e grande antes de usar duas cores juntas.
- Paleta: explorar cinco cores sem perder as que você já escolheu.
- Auditoria: encontrar pares aprovados e entender os limites das simulações.
Como verificar o contraste
- Informe as cores do texto e do fundo.
- Confira a proporção e os resultados para cada tamanho de texto.
- Ajuste uma cor ou copie um valor aprovado para o CSS.