Verificador de contraste
Escolha cores de texto e de fundo para verificar sua proporção de contraste em relação aos limites AA e AAA do WCAG. Veja resultados separados para texto normal e grande, junto com uma prévia usando as cores selecionadas.
O que você pode fazer
Confira a proporção entre duas cores
Escolha as cores do texto e do fundo e veja a proporção de contraste com duas casas decimais.
Compare os limites AA e AAA
Veja resultados separados para texto normal e grande, com uma prévia usando as cores selecionadas.
Compare com preto e branco
Abra os detalhes opcionais para comparar a cor do texto com fundos pretos e brancos.
Como usar
Insira a cor do texto
Escolha HEX, RGB, HSL, HSV ou CMYK e insira a cor do texto. Escolher uma amostra muda a entrada para HEX.
Escolha o fundo
Insira um valor HEX de três ou seis dígitos ou use o seletor de cores. O prefixo # é opcional.
Verifique o contraste
Selecione Verificar contraste para conferir a proporção, a prévia do texto e os resultados AA/AAA. Verifique novamente depois de alterar qualquer uma das cores.
Quando isso ajuda
Confira o texto principal sobre um fundo
Insira as cores usadas em uma página e confira se o texto normal atende à proporção exigida.
Compare as cores do título
Use o resultado e a prévia de texto grande ao considerar um par de cores para um título.
Como interpretar os resultados
Proporções AA e AAA
AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Os resultados usam a proporção sem arredondamento.
O que é considerado texto grande
Texto grande tem pelo menos 18 pt ou 14 pt em negrito. Em CSS, isso corresponde a 24px ou aproximadamente 18,7px em negrito. A prévia usa texto sem negrito em 16px e 24px.
Escopo da verificação
Esta ferramenta verifica o contraste entre duas cores sRGB opacas. Não avalia fundos de imagem, mistura de transparência, elementos que não sejam texto nem a conformidade da página inteira.
Perguntas e respostas
Uma proporção aprovada significa que a página inteira está em conformidade?
Este resultado cobre somente o contraste do texto entre as duas cores selecionadas. Avalie separadamente a conformidade da página inteira.
O que a comparação com preto e branco mostra?
Compara a cor do texto selecionada com preto e branco e mostra qual delas tem a proporção mais alta. Esse resultado é separado do resultado com o fundo selecionado.
Posso verificar texto transparente ou texto sobre uma imagem?
Transparência e fundos de imagem não são compatíveis. Insira cores opacas para o texto e o fundo.
Entrada e saída
- Cor do texto
- Valores HEX, RGB, HSL, HSV ou CMYK, ou o seletor de cores. CMYK é uma estimativa sem perfil ICC.
- Fundo
- HEX de três ou seis dígitos, ou o seletor de cores. Transparência não é compatível.
- Resultado
- Proporção de contraste, resultados AA/AAA para texto normal e grande e prévia do texto. Os resultados são exibidos sem uma ação para salvá-los.