As cores que você escolhe para a interface do app afetam a leitura e o entendimento dos usuários. Um contraste de cor suficiente facilita a leitura e compreensão de textos e imagens.
Além de ajudar os usuários com diversos tipos de deficiência visual, um contraste de cor suficiente facilita 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 primeiro e segundo planos com contraste 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 TextView para exibir texto, adicione android:textColor e android:background para definir as cores de primeiro e segundo planos com uma alta taxa de contraste. Ao usar Text no Compose, adicione o parâmetro de cor e Modifier.background para definir as cores do primeiro e segundo planos com uma alta taxa de contraste.
- 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
ImageViewouImagepara renderizar conteúdo gráfico ou iconografia, confirme se o contraste entre as cores do primeiro e segundo planos corresponde ou ultrapassa as taxas recomendadas. - 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), as cores não opacas (com um valor de canal alfa inferior a 255) podem ter uma aparência 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.
- Siga as diretrizes do W3C para taxas de contraste mínimas de textos e iconografia especificamente.
- Considere incluir um tema de alto contraste como opção, ou permita que o usuário escolha as cores do conteúdo principal
Para saber mais, consulte as Diretrizes de cor e contraste para acessibilidade do Material Design.
Testes
Para testar manualmente o contraste de cor em um app, siga estas etapas:
- Abra o app.
- Faça uma captura de tela.
- Com um software de visualização ou edição de imagens, use uma "ferramenta de conta-gotas" para extrair uma amostra aparente das cores na captura de tela.
- Use uma calculadora de taxa de contraste para determinar a taxa de contraste das cores adjacentes.
- 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 se quiser fazer o teste manual do seu app no dispositivo. No caso de testes automatizados, ative a verificação de acessibilidade no Espresso e no Robolectric.