Teste o contraste da cor do texto usando o Seletor de Cor

People with low vision podem não ver áreas muito claras ou muito escuras. Tudo tende a aparecer aproximadamente no mesmo nível de brilho, o que dificulta a distinção de contornos e bordas.

A taxa de contraste mede a diferença de brilho entre o primeiro plano e o plano de fundo do texto. Se o texto tiver uma taxa de contraste baixa, as pessoas com visão subnormal poderão ver seu site como uma tela em branco.

No DevTools, uma maneira de exibir a taxa de contraste de um elemento de texto é usar o Seletor de Cores, na guia Estilos da ferramenta Elementos . O Seletor de Cor ajuda você a verificar se o texto atende aos níveis de taxa de contraste recomendados.

Para marcar o contraste da cor do texto usando o Seletor de Cor:

1. No DevTools, abra a ferramenta Elementos .

2. Na Árvore DOM, selecione o elemento de texto que você deseja inspecionar.

3. Na guia Estilos , localize a propriedade de cor aplicada ao elemento e clique no quadrado de cor ao lado da propriedade de cor .

   O Seletor de Cores é aberto:

   

4. Examine a seção Taxa de contraste do Seletor de Cor:

   

   A seção Taxa de contraste mostra uma pontuação para a taxa de contraste entre o texto e o plano de fundo e um ícone que indica se a taxa de contraste atende às recomendações:

   • Um círculo vermelho riscado significa que o elemento não atende à recomendação mínima.
   • Uma marca de marca significa que o elemento atende à recomendação mínima.
   • Duas marcas de marca significam que o elemento atende à recomendação aprimorada.

5. Para obter mais informações, clique na seção Taxa de contraste para expandi-la:

   

   No seletor visual na parte superior do Seletor de Cor, duas linhas aparecem, percorrendo o seletor visual, juntamente com um círculo para a cor atual. Se a cor atual atender às recomendações, qualquer coisa do mesmo lado da linha também atenderá às recomendações. Se a cor atual não atender às recomendações, qualquer coisa do mesmo lado também não atenderá às recomendações.

6. Para testar cores diferentes, clique no seletor visual ou selecione uma amostra de cor na parte inferior do Seletor de Cor.

Confira também

• Alterar cores com o Seletor de Cores na referência de recursos CSS

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.