Design

Escolher cores que todos conseguem ler

Por The AsasWeb team 2 min de leitura

As WCAG exigem um rácio de contraste de pelo menos 4,5:1 para o texto corrido e de 3:1 para texto grande e elementos de interface. A forma fiável de cumprir estes objetivos é integrá-los na paleta desde o início, escolher uma tinta escura e uma superfície clara que passem com folga e depois verificar cada par de cores com uma ferramenta de contraste. Nunca sinalize nada apenas pela cor e verifique o modo escuro em separado, porque uma paleta que passa sobre branco pode falhar sobre quase preto.

Texto com pouco contraste parece elegante numa ferramenta de design e desaparece na vida real: ao sol, num ecrã barato ou para quem tem visão reduzida. Cor acessível não é apagar a sua marca. É garantir que as pessoas a conseguem mesmo ler.

Conheça os objetivos

A WCAG define mínimos claros. O texto de corpo precisa de um rácio de contraste de pelo menos 4,5 para 1 face ao fundo. Texto grande, a partir de cerca de 24 pixels, e elementos de interface precisam de pelo menos 3 para 1. Estes são os pisos, não os objetivos, e são fáceis de verificar com qualquer ferramenta de contraste.

Integre o contraste na sua paleta

O truque é desenhar a paleta em torno destes objetivos desde o início, em vez de descobrir as falhas no fim. Escolha uma tinta escura e uma superfície clara que passem com folga, e depois escolha cores de destaque que funcionem tanto como texto como como preenchimento. Neste site, cada par de cores está documentado com o seu rácio medido, para que nada passe despercebido.

Não dependa só da cor

A cor nunca deve ser a única forma de assinalar algo. Um campo obrigatório, um erro, uma ligação num parágrafo: cada um precisa de uma segunda pista, como texto, um ícone ou um sublinhado. Quem não distingue diferenças de cor continua a precisar da mensagem.

Atenção ao modo escuro

Uma paleta que passa em modo claro pode falhar em modo escuro, onde uma cor de marca que ficava bem sobre branco pode ficar demasiado ténue sobre uma superfície quase preta. Cada tema precisa dos seus próprios valores verificados.

Tratamos o contraste como um número medido, não como um palpite. Se não tem a certeza de que as cores da sua marca passam, inicie um projeto e nós auditamo-las e encontramos uma paleta que seja ao mesmo tempo fiel à marca e legível.

Quer este padrão no seu próprio site?

Conte-nos o seu projeto e responderemos com próximos passos honestos e práticos.