As cores que escolher para a interface da app afetam a facilidade de leitura e compreensão dos utilizadores. Um contraste de cor suficiente torna o texto e as imagens mais fáceis de ler e compreender.
Além de beneficiar os utilizadores portadores de várias deficiências visuais, um contraste de cor suficiente ajuda todos os utilizadores a ver uma interface nos dispositivos em condições de luminosidade extrema, como quando expostos a luz solar direta ou num ecrã com pouco brilho.
Implementação
Quando implementar a interface do utilizador de uma app, especifique as cores de primeiro e segundo planos com um contraste de cor suficiente.
Uma "relação de contraste" é uma análise da diferença de luminosidade, ou a intensidade da luz emitida, entre duas cores vizinhas quando mostradas num ecrã. Esta relação varia entre 1 e 21 (frequentemente escrita como 1:1 a 21:1), em que os números mais altos significam um maior contraste. Existem várias ferramentas disponíveis para analisar a relação de contraste de duas cores vizinhas, como esta calculadora de relação de contraste de cor.
Quando usar TextView para apresentar texto, use android:textColor e android:background para definir as cores de primeiro e segundo plano com uma relação de alto contraste. Quando usar Text no Compose, use o parâmetro de cor e Modifier.background para definir as cores de primeiro e segundo plano com uma relação de alto contraste.
- Pelo menos, 4.5:1 para texto pequeno (abaixo de 18 pontos para regular ou 14 pontos para negrito)
- Pelo menos, 3.0:1 para texto grande (18 pontos e acima para regular ou 14 pontos e acima para negrito)
Notas acerca do contraste de cor:
-
Quando usar
ImageViewouImagepara renderizar conteúdo gráfico ou iconografia, certifique-se de que o contraste entre as cores de primeiro e segundo plano corresponde ou excede a relação recomendada. - As relações de contraste são medidas com base na cor aparente do primeiro e segundo plano de um elemento quando colocado sobre outros elementos. Se estiver a definir cores num formato ARGB (valores hexadecimais de #AARRGGBB), tenha em atenção que as cores não opacas (aquelas com um valor de canal alfa inferior a 255) podem ter uma cor aparente diferente devido à fusão com conteúdo composto por baixo das mesmas.
- A suavização e o anti-aliasing dos tipos de letra podem afetar a cor aparente de algum conteúdo, sobretudo conteúdo com pouca largura de traços. Para melhorar a legibilidade, escolha uma combinação de cores com uma maior relação de contraste ou aumente a largura de traços do conteúdo.
Design
Quando criar uma interface do utilizador, considere escolher uma paleta com um contraste de cor suficiente para as cores adjacentes.
- Para texto e iconografia especificamente, siga as diretrizes da W3C para relações de contraste mínimas
- Considere incluir um tema de alto contraste como opção ou permita ao utilizador escolher as cores do conteúdo principal
Para mais informações, consulte as diretrizes de cor e contraste de acessibilidade do Material Design.
Testes
Para confirmar manualmente o contraste de cor numa app:
- Abra a app.
- Faça uma captura de ecrã.
- Use um software de visualização ou edição de imagem e uma "ferramenta de conta-gotas" para extrair uma amostra de cores da captura de ecrã.
- Use uma calculadora de relação de contraste para determinar a relação de contraste das cores adjacentes.
- Se a relação de contraste for inferior à definida pelas diretrizes da W3C, a interface pode beneficiar de um contraste de cor aumentado.
As ferramentas de teste automáticas do Android podem detetar inúmeros problemas de contraste de cor. Considere a utilização do Teste de acessibilidade para Android para testar manualmente a app no dispositivo. Para testes automáticos, ative a verificação de acessibilidade no Espresso e Robolectric.