Google is committed to advancing racial equity for Black communities. See how.

Descobrir e corrigir textos de baixo contraste com o Chrome DevTools

O uso do contraste incorreto é o inimigo número um da acessibilidade na Web (link em inglês). Vejamos como o DevTools pode ajudar a entender, descobrir e corrigir esse problema.

O que você aprenderá

  • O problema do baixo contraste
  • Como descobrir textos de baixo contraste
  • Como corrigir textos de baixo contraste

O que é necessário

  • Um computador em funcionamento com uma rede Wi-Fi confiável
  • Chrome 87 ou uma versão mais recente

O que você fará

Você corrigirá os problemas de baixo contraste de uma página da Web.

Clique no link a seguir para abrir a página com textos de baixo contraste:

Abrir a página

Na página, abra o Chrome DevTools (link em inglês).

Cerca de 1 em cada 20 pessoas (link em inglês) sofre de deficiência na percepção de cores, também conhecida pelo termo "daltonismo". Isso dificulta a diferenciação das cores, podendo aumentar problemas relacionados ao contraste.

Por exemplo, se você é um desenvolvedor sem essa deficiência, a aparência do texto na página pode estar boa para você.

Textos de baixo contraste

Em alguns casos, talvez você consiga ler textos de baixo contraste, mas pessoas com deficiências visuais não têm esse privilégio.

O DevTools pode ajudar a entender essas deficiências, permitindo que você simule o daltonismo (link em inglês) no seu app da Web.

Abra o Command Menu (link em inglês). Comece a digitar Rendering e selecione Show Rendering. Na guia Rendering, role para baixo até a opção Emulate vision decifiencies.

O DevTools pode emular a visão embaçada e os seguintes tipos de daltonismo:

  • Protanopia: incapacidade de perceber luzes vermelhas.
  • Deuteranopia: incapacidade de perceber luzes verdes.
  • Tritanopia: incapacidade de perceber luzes azuis.
  • Acromatopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente rara).

Tente selecionar opções diferentes e navegar pela página. Por exemplo, selecione Protanopia. O contraste de cor do texto ficou ainda pior. Ele está quase ilegível.

Há algumas maneiras de descobrir textos de baixo contraste.

Dica do modo de inspeção

A dica do Inspect Mode (link em inglês) na parte superior da página da Web mostra a taxa de contraste dos elementos de texto.

Por exemplo, clique no ícone Inspect no canto superior esquerdo do DevTools para inspecionar (link em inglês) a palavra "very". A taxa de contraste do texto será exibida na dica. O ícone de exclamação ao lado da taxa indica que ela está baixa.

.

Taxa de contraste no seletor de cores

Também é possível ver a taxa de contraste no seletor de cores.

Inspecione (link em inglês) a palavra "very". No painel Styles, clique na visualização de cores da propriedade CSS color. A taxa de contraste será exibida no seletor de cores. O ícone vermelho de proibição indica que a taxa está baixa.

.

[Experimental] Detectar problemas de baixo contraste em toda a página com o painel CSS Overview

Passar por cada elemento da página para verificar a taxa de contraste pode ser trabalhoso. O painel CSS Overview ajuda você a detectar todos os textos de baixo contraste da página.

Depois de usar a CSS Overview, role para baixo até a seção Colors para ver todos os Contrast issues (Problemas de contraste). Clique em uma das cores, como o plano de fundo amarelo com texto em verde-limão, e o DevTools exibirá uma lista de elementos que têm esse problema. Clique em um elemento da lista para abri-lo no painel Elements.

O DevTools apresenta sugestões de cor para textos de baixo contraste.

Inspecione (link em inglês) a palavra "very". No painel Styles, clique na visualização de cores da propriedade CSS color. Expanda a seção Contrast ratio.

Seletor de cores

O DevTools oferece uma classificação de cores AA e AAA:

No exemplo, duas linhas aparecem no seletor visual na parte superior do seletor de cores. De cima para baixo:

  • Primeira linha: AA. Selecione qualquer cor abaixo dessa linha para atender à recomendação mínima.
  • Segunda linha: AAA. Selecione qualquer cor abaixo dessa linha para atender à recomendação avançada.

Clique e corrija a cor manualmente:

  • Uma marca de seleção indica que o elemento atende à recomendação mínima.
  • Duas marcas de seleção indicam que ele atende à recomendação avançada.

Marca de seleção de contraste de cor

.

Sugestões de cores acessíveis

O DevTools também sugere cores acessíveis para AA e AAA, facilitando a correção.

Clique na cor sugerida ao lado da taxa contraste para corrigir a cor do texto.

Sugestões de cores

.

Agora você pode tentar corrigir todos os textos de baixo contraste na página e usar novamente o recurso CSS Overview para ver se todos os problemas de contraste foram corrigidos.

Parabéns! Você concluiu este codelab.

O que você achou deste codelab?

Achei chato. Gostei!