Requisitos AA e AAA
Texto normal precisa de 4,5:1 para AA e 7:1 para AAA. Para texto grande, os valores são 3:1 e 4,5:1, respectivamente.
Verificador de contraste de cores
Compare as cores do texto e do fundo com os requisitos WCAG AA e AAA. Experimente um ajuste ou salve o par.
Selecionar modo
Texto
Fundo
Título de exemplo
Compare aqui as cores escolhidas para o texto e o fundo. Verifique os limites conforme o tamanho e o peso reais da fonte.
Texto pequeno: verifique a legibilidade das cores em diferentes tamanhos.
Mais ações
Ferramentas relacionadas
Suas estatísticas
0
Cores escolhidas
0
Paletas exportadas
0
Gradientes criados
0
Contrastes verificados
Seletor de cores
Modo mais usado
0%
Pontuação de atividade
Como verificar o contraste de cores
Não foi possível carregar o vídeo. Você pode seguir as instruções abaixo.
O vídeo mostra a interface em inglês.
Insira valores HEX com o sinal # ou use as amostras de cor. Confira se os dois campos são válidos. A prévia e a relação de contraste são atualizadas quando as cores mudam.
Verifique as cores do texto e do fundo
Relação e prévia atualizadas na hora
Ao alterar qualquer cor, a relação e o texto de exemplo são atualizados. O controle de tamanho muda a prévia, mantendo os quatro resultados visíveis.
Experimente um ajuste
As opções Ajustar para AA e Ajustar para AAA tentam modificar a cor do texto. O ajuste pode falhar com o fundo escolhido, então confira a relação obtida.
Mostrar mais 3Mostrar menos
Filtros de cor aproximados
As opções Protanopia, Deuteranopia e Tritanopia aplicam filtros visuais simples. Elas não comprovam a legibilidade para pessoas com deficiência na visão de cores.
Salve um par de cores
Dê um nome à predefinição para salvar as cores do texto e do fundo neste navegador. Carregue o par novamente em Predefinições.
Outras ferramentas de cores
Os links de modo abrem páginas próprias para o seletor, as paletas, os degradês ou a extração de cores de imagens.
Perguntas frequentes
Como verifico o contraste de cores?
Escolha as cores do texto e do fundo ou insira valores HEX de seis dígitos. Confira a relação e os quatro resultados AA e AAA. Um resultado aprovado vale para esse par de cores e a categoria de texto correspondente, não para o site inteiro.
Qual relação de contraste as WCAG exigem?
Para texto normal, AA exige pelo menos 4,5:1 e AAA, 7:1. Texto grande precisa de 3:1 para AA e 4,5:1 para AAA. Existem exceções, como logotipos e controles inativos.
É possível ajustar o contraste automaticamente?
Ajustar para AA e Ajustar para AAA tentam clarear ou escurecer o texto alterando os canais RGB. O matiz pode mudar e o ajuste pode falhar dependendo do fundo. Confira a relação após cada tentativa.
As prévias simulam com precisão as deficiências na visão de cores?
Elas usam filtros simples de sépia, saturação e matiz. Considere-as prévias aproximadas. Não são modelos validados de visão de cores e não confirmam que um design seja acessível.
Mostrar mais 4Mostrar menos
O que é considerado texto grande?
As WCAG consideram grande o texto de pelo menos 18 pt em peso normal ou 14 pt em negrito, equivalentes a cerca de 24 px e 18,67 px em CSS. O tamanho da prévia não determina qual requisito se aplica ao seu design real.
O verificador de contraste é gratuito?
Sim. O MORELESS oferece a ferramenta gratuitamente e sem conta. Os cálculos de cores são feitos neste navegador.
Posso verificar as cores da minha marca?
Sim. Insira diretamente os valores HEX do texto e do fundo. Você também pode salvar o par como uma predefinição com nome neste navegador. Teste separadamente cada combinação usada no design real.
Como abro as outras ferramentas de cores?
Use os links de modo acima do verificador. Eles abrem páginas próprias para o seletor, a extração de cores de imagens, as paletas e os degradês.
Detalhes técnicos
Luminância relativa
A relação usa a luminância relativa das duas cores sRGB. Ela vai de 1:1 para cores iguais a 21:1 para preto e branco. A verificação compara duas cores uniformes, não uma captura de página.
Requisitos de contraste de texto
Os quatro resultados são calculados com a relação sem arredondamento. AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4,5:1. Passar nessas verificações não comprova, por si só, conformidade com as WCAG.
Mostrar mais 2Mostrar menos
Filtros aproximados da prévia
As três prévias de visão de cores aplicam filtros CSS de sépia, saturação e rotação de matiz à área de exemplo. Elas não alteram a relação de contraste exibida nem implementam um modelo validado de visão de cores.
Ajuste e armazenamento
O ajuste modifica os três canais RGB do texto em etapas até atingir a meta ou encerrar a tentativa. Ele não garante a aprovação nem preserva necessariamente o matiz. Os pares com nome são armazenados localmente no IndexedDB.