Pular para o conteúdo [1] Pular para a lista de exemplos [2]

O calcanhar de Aquiles do design

Cores são uma boa forma de distinguir informações de uma página, mas não devem ser a única! Não podemos esquecer que o botão “Verde” para uma pessoa daltônica poderá ser azul e que para uma pessoa que esteja usando um leitor de telas não fará sentido essa informação. Afinal, onde está o botão verde que eu preciso clicar?

Além de se preocupar em usar as cores de forma adequada, é preciso se preocupar com o contraste das cores usadas. Este é um dos principais erros que as pessoas cometem no design de páginas web.

Não é apenas o contraste entre a fonte e o plano de fundo, mas também o contraste dos ícones dentro de um botão ou o contraste de um elemento dentro de outro elemento que possua plano de fundo. Se eu colocar um botão azul em um fundo verde, será que aquele botão vai “desaparecer” para pessoas com algum nível de daltonismo ou outra anomalia visual?

Dica

Além de usar ferramentas para testar o contraste, faça o seguinte experimento: deixe a sua página em escala de cinza. Você ainda consegue ler as informações? O conteúdo faz sentido mesmo sem cores?

Escolher cores com bom contraste não significa que você fará um site com design limitado e cores pouco atraentes. Aqui neste site, estamos usando uma paleta de cores variadas entre tons de roxo, magenta e cinza, todas com contraste adequado e de forma atraente. O site Color Safe (site externo) é uma boa alternativa para criar paletas de cores acessíveis e atraentes.

Dica de ferramenta

A extensão Colorblinding (site externo) para o Google Chrome permite simular vários tipos de daltonismo e anomalias visuais.

O melhor contraste é entre texto preto e fundo branco?

Não! Esse é um mito do contraste ideal, mas não é válido para todas as pessoas. As cores preto e branco são as extremidades da luminosidade e saturação, ou seja, preto é ausência total de luminosidade e saturação e o branco é a luminosidade e saturação ao máximo.

A cor branca, particularmente, é muito brilhante e pode causar desconforto em pessoas com dislexia, autismo, vista cansada e que tenham hipersensibilidade sensorial como a Síndrome de Irlen, um distúrbio que causa dificuldade de leitura pela sensibilidade a certas ondas de luz. Inclusive, qualquer pessoa que não tenham alguma destas condições pode sentir desconforto depois de algum tempo.

Imagine quando estamos usando o celular, que já possui uma luz de tela brilhante: se fornecemos uma página de leitura com fundo branco e fonte em preto, é possível que logo essa leitura se torne difícil por esse excesso de estímulo na retina. Outras combinações de cores muito brilhantes podem prejudicar pessoas com epilepsia.

Por fim

Quando nos preocupamos com o uso de cores acessíveis, devemos pensar em diferentes condições em que as cores podem “falhar” se não tiverem um bom contraste. Não apenas pensando em usuários com daltonismo, mas também pessoas com baixa visão, pessoas em locais com alta ou baixa luminosidade e até aparelhos com calibragem incorreta de visor! Ao pensar no uso das cores como um complemento do layout e não como o principal meio de distinguir uma informação, podemos minimizar o impacto destes diferentes contextos por já garantir um bom contraste.

Todos os exemplos

  1. Introdução
  2. Títulos
  3. Imagens
  4. Links
  5. Formulários
  6. Cores
  7. Texto
  8. Multimídia
  9. Foco e Teclado
  10. Tabelas
  11. Navegação