Acessibilidade · Cores
Já abriu um site e precisou apertar os olhos para ler? Quase sempre o problema é contraste. A boa notícia é que dá para acertar com uma conta simples e uma ferramenta gratuita.
O que é contraste de cores?
É a diferença de luminosidade entre a cor do texto e a cor do fundo. Quanto maior a diferença, mais fácil de ler, inclusive para quem tem baixa visão, daltonismo ou está lendo no celular sob o sol.
Por que isso importa?
Contraste ajuda todo mundo, não só quem tem deficiência visual: melhora a leitura em telas com pouco brilho, em ambientes claros e em letras pequenas. Também é um requisito das diretrizes internacionais de acessibilidade na web, as WCAG.
A regra dos números
O contraste é medido em uma razão que vai de 1:1 (nenhuma diferença) até 21:1 (preto sobre branco). Guarde estes três valores mínimos:
4,5:1
para texto de tamanho normal.
3:1
para texto grande (a partir de 24 px, ou 18,66 px em negrito).
3:1
para elementos de interface, como bordas de botões e ícones.
Teste na prática: exemplos com a paleta deste site
Veja como algumas combinações reais se comportam. Repare que a cor bonita nem sempre é a cor legível.
Aa Texto de exemplo
Tinta sobre creme · 16,8:1
Passa com folga.
Aa Texto de exemplo
Branco sobre índigo · 10,9:1
Passa com folga.
Aa Texto de exemplo
Branco sobre magenta · 5,6:1
Passa para texto normal.
Aa Texto de exemplo
Tinta sobre magenta · 3,3:1
Só serve para texto grande.
Aa Texto de exemplo
Cinza claro sobre creme · 2,6:1
Não passa. Escureça o cinza.
Aa Texto de exemplo
Amarelo sobre creme · 1,4:1
Não passa. Use o amarelo só como fundo.
Passo a passo para testar o seu layout
- Anote o código HEX da cor do texto e da cor do fundo (por exemplo, #17151F e #FAF6EF).
- Cole os dois códigos no WebAIM Contrast Checker.
- Confira se o resultado chega a 4,5:1 (texto normal) ou 3:1 (texto grande).
- Se não passar, escureça o texto ou clareie o fundo e teste de novo.
- Não use apenas a cor para passar uma informação: acrescente ícone, texto ou sublinhado.
Dicas rápidas
- Trabalhe com poucas cores e defina antes qual será a de destaque.
- Evite texto sobre foto sem uma camada escura ou clara por trás.
- Teste no celular e com o brilho da tela baixo.
- Para explorar combinações, use o Adobe Color e confira erros com a extensão WAVE.
Quer entender o lado visual? Veja o guia com os 8 princípios do design gráfico, que fala de contraste, hierarquia e cores.
Fonte
Conteúdo baseado no artigo “Contraste de cores e acessibilidade: como usar corretamente?”, da Hand Talk, reescrito e complementado com exemplos próprios. Os valores de contraste dos exemplos foram calculados pela fórmula das WCAG.