Testar o contraste de cor do texto com o Seletor de Cores
Pessoas com visão reduzida podem não ver áreas muito brilhantes ou muito escuras. Tudo tende a aparecer no mesmo nível de luminosidade, o que torna difícil distinguir contornos e arestas.
A proporção de contraste mede a diferença de luminosidade entre o primeiro plano e o fundo do texto. Se o seu texto tiver uma proporção de baixo contraste, as pessoas com dificuldades de visão poderão experimentar o seu site como um ecrã em branco.
Em DevTools, uma forma de ver a proporção de contraste de um elemento de texto é utilizar o Seletor de Cores, no separador Estilos da ferramenta Elementos . O Selecionador de Cores ajuda-o a verificar se o texto cumpre os níveis de proporção de contraste recomendados.
Para marcar o contraste de cor do texto com o Seletor de Cores:
Em DevTools, abra a ferramenta Elementos .
Na Árvore DOM, selecione o elemento de texto que pretende inspecionar.
No separador Estilos , localize a propriedade color que é aplicada ao elemento e, em seguida, clique no quadrado de cor junto à propriedade color .
O Seletor de Cores é aberto:
Examine a secção Proporção de contraste do Selecionador de Cores:
A secção Proporção de contraste mostra uma pontuação para a proporção de contraste entre o texto e o fundo e um ícone que indica se a proporção de contraste cumpre as recomendações:
- Um círculo vermelho riscado significa que o elemento não cumpre a recomendação mínima.
- Uma marca de marcar significa que o elemento cumpre a recomendação mínima.
- Duas marcas de marcar significa que o elemento cumpre a recomendação melhorada.
Para obter mais informações, clique na secção Proporção de contraste para expandi-la:
No seletor de elementos visuais na parte superior do Selecionador de Cores, são apresentadas duas linhas, em execução no seletor visual, juntamente com um círculo para a cor atual. Se a cor atual cumprir as recomendações, qualquer coisa no mesmo lado da linha também cumpre as recomendações. Se a cor atual não cumprir as recomendações, qualquer conteúdo do mesmo lado também não cumpre as recomendações.
Para experimentar cores diferentes, clique no seletor de elementos visuais ou selecione um cronómetro de cores na parte inferior do Selecionador de Cores.
Confira também
- Alterar cores com o Selecionador de Cores na referência de funcionalidades do CSS
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.