Um Guia Prático sobre Contraste de Cores para Design de UI

Porque o Contraste de Cores é um Pilar do Bom Design

O contraste de cores é a diferença de brilho (luminância) entre duas cores. No design de UI, isto geralmente significa o contraste entre o texto e o seu fundo.

Embora possa parecer um detalhe menor, é um dos aspetos mais críticos da usabilidade e acessibilidade. Um bom contraste garante que o seu conteúdo seja legível para todos, incluindo:

Pessoas com baixa visão.
Utilizadores com deficiências na visão de cores (daltonismo).
Qualquer pessoa que use um ecrã sob luz solar intensa ou numa sala mal iluminada.
Utilizadores com monitores de baixa qualidade.

Em suma, projetar para um bom contraste é projetar para todos. É um elemento fundamental do design inclusivo.

Compreender os Rácios de Contraste da WCAG

As Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) fornecem uma forma clara e matemática de medir o contraste. O rácio varia de 1:1 (branco sobre branco) a 21:1 (preto sobre branco).

Existem dois níveis principais de conformidade a conhecer:

Nível AA (O Padrão)

Este é o alvo de acessibilidade mais comum e é um requisito legal para muitos websites.

Texto Normal: Requer um rácio de contraste de pelo menos 4.5:1.
Texto Grande: Requer um rácio de pelo menos 3:1.
- A WCAG define “texto grande” como 18pt (24px) ou maior, ou 14pt (18.66px) e negrito.

Nível AAA (Melhorado)

Esta é uma norma mais rigorosa para sites onde a legibilidade é primordial, como artigos com muito texto ou websites governamentais.

Texto Normal: Requer um rácio de contraste de pelo menos 7:1.
Texto Grande: Requer um rácio de pelo menos 4.5:1.

Pode verificar instantaneamente as suas próprias combinações de cores em relação a estas normas usando a nossa ferramenta gratuita de Verificação de Contraste de Cores.

Verificações Rápidas para o Seu Design (Antes de Medir)

Antes mesmo de abrir uma ferramenta, pode detetar problemas potenciais com estas técnicas simples.

O Teste do Apertar de Olhos: Afaste-se do seu ecrã e aperte os olhos até que o design se torne desfocado. O seu texto ou elemento de UI funde-se com o fundo? Se for difícil de distinguir, o seu contraste é provavelmente muito baixo.
O Teste da Escala de Cinzentos: Converta o seu design para escala de cinzentos. Se não conseguir diferenciar facilmente entre os elementos ou ler o texto, está a depender demasiado da cor e não o suficiente do contraste. A informação importante deve continuar a ser clara a preto e branco.

Embora estes testes sejam úteis, são subjetivos. Confirme sempre os seus resultados com uma ferramenta fiável.

Como Corrigir Cores de Baixo Contraste

Corrigir um rácio de baixo contraste não significa que tenha de abandonar a sua paleta de marca. Muitas vezes, pequenos ajustes direcionados são tudo o que é necessário.

Digamos que tem um texto cinzento claro (#888888) sobre um fundo branco (#FFFFFF). Isto tem um rácio de contraste de apenas 2.9:1, falhando a norma AA para texto normal.

Aqui estão as suas opções:

1. Escurecer o Texto (ou Clarear o Fundo)

Esta é a correção mais direta. Ao alterar a cor do texto para um cinzento mais escuro como #767676, o rácio salta para 4.54:1, que passa a norma AA. Este pequeno ajuste é muitas vezes impercetível esteticamente, mas faz uma enorme diferença na legibilidade.

2. Aumentar o Tamanho ou o Peso da Fonte

Se estiver comprometido com uma cor específica, pode fazê-la passar aumentando o seu tamanho. No nosso exemplo, se o texto #888888 for tornado grande e negrito (por exemplo, 14pt negrito ou 18pt normal), o seu rácio de 2.9:1 falharia para texto normal, mas quase passaria o requisito de 3:1 para texto grande. Esta é uma boa opção para títulos.

3. Não Confie Apenas na Cor

Para elementos de UI como links ou estados de erro, nunca use a cor como o único indicador.

Links: Um link azul de baixo contraste pode ser difícil de ver. Garanta que todos os links estão também sublinhados, especialmente no corpo do texto.
Mensagens de Erro: Não se limite a tornar o texto vermelho. Adicione um ícone (como um triângulo de aviso) e texto a negrito para chamar a atenção para a mensagem.

A Regra de Ouro

Na dúvida, aponte para um rácio de 4.5:1 para todo o texto importante. Esta regra simples garantirá que os seus designs são acessíveis, profissionais e fáceis de usar por todos. Torne a verificação de contraste uma parte regular do seu fluxo de trabalho de design, não uma reflexão tardia.