Testar o contraste de cor de texto usando o Seletor de Cores
Pessoas com baixa visão pode não ver áreas muito brilhantes ou muito escuras. Tudo tende a aparecer 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, pessoas com baixa visão poderão experimentar seu site como uma tela em branco.
Em DevTools, uma maneira de exibir a taxa de contraste de um elemento de texto é usar o Seletor de Cores, na guia Estilos da ferramenta Elements . O Seletor de Cores ajuda você a verificar se o texto atende aos níveis de taxa de contraste recomendados.
Para marcar o contraste de cor de texto usando o Seletor de Cores:
Em DevTools, abra a ferramenta Elementos .
Na Árvore do DOM, selecione o elemento de texto que você deseja inspecionar.
Na guia Estilos , localize a propriedade de cor aplicada ao elemento e clique no quadrado de cores ao lado da propriedade color .
O Seletor de Cores é aberto:
Examine a seção Taxa de Contraste do Seletor de Cores:
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 cruzado vermelho significa que o elemento não atende à recomendação mínima.
- Uma marcar marca significa que o elemento atende à recomendação mínima.
- Duas marcas de marcar significa que o elemento atende à recomendação aprimorada.
Para obter mais informações, clique na seção Taxa de Contraste para expandi-la:
No seletor visual na parte superior do Seletor de Cores, duas linhas aparecem, em execução no seletor visual, juntamente com um círculo para a cor atual. Se a cor atual atender às recomendações, qualquer coisa no 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.
Para experimentar cores diferentes, clique no seletor visual ou selecione uma amostra de cores na parte inferior do Seletor de Cores.
Confira também
- Alterar cores com a referência do Seletor de Cores nos recursos do CSS
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.