Contraste de cor

Contexto

As cores que você escolhe para a interface do seu app afetam o modo como os usuários a leem e entendem. Um contraste de cor suficiente facilita a leitura e compreensão de textos e imagens.

Além de beneficiar os usuários com diversos tipos de deficiência visual, um contraste de cor suficiente ajuda todos os usuários durante a visualização da interface nos dispositivos em condições extremas de iluminação, como em uma exposição direta à luz solar ou em uma tela com pouco brilho.

Implementação

Ao implementar a interface do usuário de um app, especifique as cores de segundo e primeiro planos com contraste de cor suficiente.

Uma "taxa de contraste" é um cálculo da diferença na iluminação, ou intensidade da luz emitida, entre duas cores vizinhas exibidas em uma tela. Essa taxa varia de 1 a 21 (geralmente escrita como 1:1 a 21:1), em que os números maiores significam um maior contraste. Há várias ferramentas disponíveis para calcular a taxa de contraste de duas cores vizinhas, como esta calculadora de taxa de contraste de cores.

Ao usar a TextView para exibir texto, use android:textColor e android:background para definir as cores de primeiro e segundo planos com uma alta taxa de contraste. O W3C recomenda:

  • No mínimo 4,5:1 para textos pequenos (abaixo de 18 pontos, regular, ou de 14 pontos, negrito)
  • No mínimo 3,0:1 para texto grande (18 pontos ou mais, regular, ou 14 pontos ou mais, negrito)

Observações sobre o contraste de cor:

  • Ao usar a ImageView para renderizar conteúdos gráficos ou iconografia, verifique se o contraste entre as cores de primeiro e de segundo planos correspondem às taxas recomendadas, ou as excedem.
  • Taxas de contraste são medidas com base na cor aparente de primeiro e de segundo planos de um elemento, quando disposto em camadas sobre outros elementos. Se você definir cores em um formato ARGB (valores hexadecimais de #AARRGGBB), observe que cores não opacas (aquelas com um valor de canal alfa inferior a 255) podem ter uma cor aparente diferente devido à mistura com o conteúdo renderizado sob elas.
  • O anti-aliasing e a suavização da fonte pode afetar a cor aparente de alguns conteúdos, especialmente daqueles com baixa largura de traço. Para melhorar a legibilidade, escolha uma combinação de cores com maior taxa de contraste ou aumente a largura de traço do conteúdo.

Design

Ao projetar uma interface do usuário, escolha uma paleta com contraste de cor suficiente para as cores adjacentes.

  • Para textos e iconografia especificamente, siga as diretrizes do W3C para taxas de contraste mínimas
  • Considere incluir um tema de alto contraste como opção, ou permita que o usuário escolha as cores do conteúdo principal

Para ver mais informações, consulte as Diretrizes de cor e contraste para acessibilidade do material design.

Teste

Para testar manualmente o contraste de cor em um app:

  1. Abra o app.
  2. Faça uma captura de tela.
  3. Usando a visualização de imagem ou um software de edição, use uma "ferramenta conta-gotas" para extrair uma amostra de cor aparente das cores na captura de tela.
  4. Use uma calculadora de taxa de contraste para determinar a taxa de contraste das cores adjacentes.
  5. Se a taxa de contraste for menor que o valor definido pelas diretrizes do W3C, a interface poderá ficar melhor com o aumento do contraste de cor.

As ferramentas de teste automatizadas do Android podem detectar diversos problemas de contraste de cor. Recomendamos que você use o Scanner de acessibilidade para Android no teste manual do seu app no dispositivo. No caso de testes automatizados, ative a verificação de acessibilidade no Espresso e no Robolectric.

Pesquisa
Limpar pesquisa
Fechar pesquisa
Google Apps
Menu principal
Pesquisar na Central de Ajuda
true
717068
false
false