🎨
← Voltar aos guias

Contraste de Cores Acessível: Diretrizes WCAG Explicadas para Designers

· Tags: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Contraste de Cores Acessível: Diretrizes WCAG Explicadas

O contraste de cores é um dos aspectos mais importantes da acessibilidade web. Ele afeta diretamente se os usuários conseguem ler seu conteúdo, navegar pela sua interface e concluir suas tarefas. Ainda assim, as falhas de contraste estão entre os problemas de acessibilidade mais comuns na web — muitas vezes porque os designers escolhem cores que ficam bem nas próprias telas sem verificar as proporções.

Este guia explica tudo o que você precisa saber sobre os requisitos de contraste de cores do WCAG, como atendê-los e como projetar interfaces acessíveis sem sacrificar a qualidade visual.

O Que é a Proporção de Contraste de Cores?

O contraste de cores é uma medida da diferença na luminância percebida entre duas cores — normalmente primeiro plano (texto) e fundo. O contraste é expresso como uma proporção que varia de 1:1 (cores idênticas, texto invisível) a 21:1 (texto preto sobre fundo branco, o máximo possível).

A proporção de contraste é calculada usando a luminância relativa, que considera como o olho humano percebe diferentes comprimentos de onda da luz. A fórmula é:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. O olho humano é mais sensível à luz verde do que à vermelha ou azul, então o cálculo da luminância pondera os canais de forma diferente.

Você não precisa calcular isso manualmente. Toda ferramenta de verificação de contraste, incluindo nosso conversor de cores, faz isso instantaneamente.

Requisitos de Contraste do WCAG

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem três níveis de conformidade: A, AA e AAA. Os requisitos de contraste de cores se aplicam nos níveis AA e AAA.

Nível AA do WCAG (Mínimo Recomendado)

AA é o padrão mínimo para a maioria dos sites e é exigido por lei em muitas jurisdições (incluindo a Lei Europeia de Acessibilidade e as regulamentações de acessibilidade nos EUA, Canadá e Austrália).

| Categoria de Texto | Proporção Mínima | Exemplo de Cinza Conforme Sobre Branco | |---------------|------------------|------------------------------------------| | Texto normal (abaixo de 18px / 14px em negrito) | 4.5:1 | #767676 sobre branco | | Texto grande (18px+ em negrito ou 24px+ normal) | 3:1 | #9A9A9A sobre branco | | Componentes de interface (bordas, ícones, campos de formulário) | 3:1 | Bordas de componentes, indicadores de foco | | Gráficos não decorativos | 3:1 | Gráficos, infográficos, ícones |

Nível AAA do WCAG (Aprimorado)

AAA é um padrão mais alto que oferece melhor legibilidade, especialmente para usuários com baixa visão ou problemas de sensibilidade ao contraste.

| Categoria de Texto | Proporção Mínima | Exemplo de Cinza Conforme Sobre Branco | |---------------|------------------|------------------------------------------| | Texto normal | 7:1 | #595959 sobre branco | | Texto grande | 4.5:1 | #777777 sobre branco |

AAA não é exigido para conformidade com a maioria das regulamentações, mas é recomendado para sites que atendem idosos ou usuários com deficiências visuais.

O Que Esses Requisitos Cobrem

Os requisitos de contraste do WCAG se aplicam a:

  • Texto — Todo texto do corpo, títulos, rótulos, legendas e texto de links
  • Texto em imagens — Texto que faz parte de uma imagem (exceto texto decorativo)
  • Componentes de interface — Botões, campos de formulário, controles deslizantes, interruptores e suas bordas
  • Ícones — Ícones essenciais que transmitem informação (não decorativos)
  • Indicadores de foco — Os contornos de foco do teclado devem ter contraste de 3:1 contra o fundo adjacente

O Que Esses Requisitos NÃO Cobrem

  • Logotipos — Texto que faz parte de um logotipo de marca ou nome de empresa
  • Elementos decorativos — Imagens puramente decorativas sem propósito funcional
  • Interface inativa — Botões desabilitados ou controles de formulário (embora ainda devam ser perceptíveis)
  • Texto sensorial — Texto que faz parte de uma imagem de fundo onde o texto não é essencial

Falhas Comuns de Contraste e Como Corrigi-las

1. Texto Cinza Claro

Texto cinza claro sobre fundos brancos é, de longe, a falha de contraste mais comum. Um tom como #CCCCCC sobre branco tem uma proporção de contraste de apenas 1.6:1 — muito abaixo do mínimo de 4.5:1.

Correção: Escureça seu texto cinza. Para texto do corpo sobre branco, busque pelo menos #595959 (conforme AAA). Até #767676 (mínimo AA para texto de 14px) é visivelmente mais escuro do que a maioria das escolhas de cinza "sutil".

2. Cores de Marca Usadas para Texto do Corpo

As cores de marca geralmente são claras demais quando aplicadas como texto. Um azul médio como #3366CC sobre branco tem uma proporção de cerca de 3.5:1 — abaixo do padrão de 4.5:1.

Correção: Reserve as cores de marca para títulos e acentos. Use quase preto (#1A1A1A a #333333) para texto do corpo. Verifique se qualquer texto colorido atende à proporção.

3. Indicadores de Link Somente com Cor

Links que diferem do texto do corpo apenas pela cor falham no Critério de Sucesso 1.4.1 do WCAG (Uso da Cor). Usuários com daltonismo podem não perceber a diferença.

Correção: Sempre forneça um indicador sem cor para links. Abordagens comuns:

  • Sublinhar os links (a solução mais robusta)
  • Adicionar um ícone (seta ou símbolo de link externo)
  • Usar peso em negrito para links no texto
  • Fornecer um destaque de fundo

4. Texto Sobre Imagens de Fundo

Texto colocado sobre fotos ou gradientes raramente tem contraste suficiente em toda a imagem.

Correção:

  • Adicione uma sobreposição semitransparente entre a imagem e o texto
  • Use text-shadow para um efeito sutil de contorno
  • Coloque o texto em uma caixa sólida sobreposta
  • Garanta que qualquer parte da imagem que possa aparecer atrás do texto atenda à proporção mínima

5. Texto de Espaço Reservado (Placeholder) com Baixo Contraste

Espaços reservados de formulário como #BDBDBD sobre branco (1.9:1) são comuns, mas falham nos requisitos de contraste.

Correção: Escureça os espaços reservados para pelo menos #757575 (4.6:1). Melhor ainda, use rótulos em vez de espaços reservados — rótulos ficam sempre visíveis e nunca desaparecem quando os usuários começam a digitar.

Testando o Contraste de Cores

Ferramentas Automatizadas

  • DevTools do navegador — Os DevTools do Chrome e do Firefox têm verificação de contraste integrada. Inspecione um elemento e procure a proporção de contraste no painel "Styles" ou "Accessibility".
  • Verificadores de contraste online — Insira duas cores e obtenha status instantâneo de aprovação/reprovação para AA e AAA.
  • Plugins de ferramentas de design — Stark, A11y e Contrast estão disponíveis para Figma, Sketch e Adobe XD. Eles verificam o contraste diretamente nos seus arquivos de design.
  • Lighthouse — A auditoria Lighthouse do Google relata automaticamente falhas de contraste.

Teste Manual

Ferramentas automatizadas só conseguem verificar o contraste do texto. Para uma revisão completa de acessibilidade:

  1. Desligue o monitor — Você consegue distinguir todos os elementos da interface?
  2. Use um filtro de escala de cinza — A informação ainda é transmitida corretamente sem cor?
  3. Teste com um simulador de daltonismo — Ferramentas como Colorblindly (extensão do Chrome) mostram como seu site aparece para usuários com vários tipos de deficiência de visão de cores.
  4. Teste sob luz solar direta — A alta luz ambiente reduz o contraste percebido.

Projetando para o Daltonismo

Aproximadamente 1 em cada 12 homens (8%) e 1 em cada 200 mulheres (0.5%) tem alguma forma de deficiência de visão de cores. Os tipos mais comuns são:

  • Deuteranopia (cegueira ao verde, 6% dos homens) — Dificuldade em distinguir vermelho de verde
  • Protanopia (cegueira ao vermelho, 2% dos homens) — O vermelho aparece mais escuro, confusão com o verde
  • Tritanopia (cegueira ao azul, rara) — Dificuldade em distinguir azul de amarelo

Estratégias de Design

  1. Nunca confie somente na cor — Qualquer informação transmitida por meio da cor (estados de erro, indicadores de status, categorias de gráficos) também deve ser transmitida por texto, ícones, padrões ou posição.

  2. Evite combinações problemáticas — Vermelho/verde, azul/roxo, verde/marrom e verde/azul são os pares mais comumente confundidos.

  3. Use padrões e texturas — Em gráficos e tabelas, use linhas pontilhadas, preenchimentos hachurados e formas diferentes além da cor.

  4. Adicione rótulos diretamente — Em visualizações de dados, rotule os pontos de dados diretamente em vez de depender de uma legenda codificada por cores.

  5. Teste com simuladores — Todo design deve ser testado com simuladores de deuteranopia e protanopia antes de publicar.

Construindo um Sistema de Cores Acessível

Passo 1: Escolha Cores de Base Acessíveis

Comece com cores que naturalmente fornecem bom contraste. Azuis profundos, verdes escuros e vermelhos ricos podem ser cores de base acessíveis quando combinados adequadamente.

Passo 2: Gere uma Escala Conforme

Crie uma escala de luminosidade em que cada etapa mantenha contraste suficiente tanto com os vizinhos mais claros quanto com os mais escuros. OKLCH é ideal para isso porque seu canal de luminosidade é perceptualmente uniforme:

--text-primary: oklch(10% 0.01 0);    /* Quase preto, ~19:1 sobre branco */
--text-secondary: oklch(35% 0.02 0);  /* Cinza escuro, ~9:1 sobre branco */
--text-muted: oklch(45% 0.02 0);      /* Cinza médio, ~5.5:1 sobre branco */
--text-disabled: oklch(60% 0.02 0);   /* Cinza claro, ~3:1 sobre branco */

Passo 3: Verifique Cada Combinação

Cada par de primeiro plano e fundo no seu sistema de design deve ser verificado:

  • Texto primário sobre superfície — mínimo de 4.5:1 (7:1 recomendado)
  • Texto secundário sobre superfície — mínimo de 4.5:1
  • Texto esmaecido sobre superfície — mínimo de 3:1 (apenas para texto não essencial)
  • Elementos interativos — mínimo de 3:1 para estados
  • Indicadores de foco — mínimo de 3:1

Checklist Prática para Desenvolvedores

  • [ ] Todo texto do corpo atende ou excede a proporção de contraste de 4.5:1
  • [ ] Todo texto grande atende ou excede a proporção de contraste de 3:1
  • [ ] Links têm um indicador sem cor (sublinhado, ícone ou mudança de peso)
  • [ ] Campos de formulário têm bordas ou fundos visíveis (não apenas texto de espaço reservado)
  • [ ] Indicadores de foco têm contraste de 3:1 contra fundos adjacentes
  • [ ] Estados de erro combinam cor com texto ou ícones
  • [ ] Gráficos e tabelas usam padrões ou rótulos diretos além da cor
  • [ ] Texto de espaço reservado atende ao mínimo de 4.5:1
  • [ ] Elementos desabilitados são visualmente distinguíveis, mas ainda perceptíveis
  • [ ] O design foi testado com simuladores de daltonismo

Conclusão

O contraste de cores acessível não é opcional — é um requisito fundamental do design web inclusivo. Atender aos padrões AA do WCAG torna seu conteúdo acessível a usuários com deficiências visuais, melhora a legibilidade para todos e muitas vezes resulta em designs mais limpos e intencionais. Comece com a verificação de contraste no seu fluxo de trabalho, use a cor como complemento — e não substituto — de outros indicadores visuais e sempre teste seus designs através das lentes da acessibilidade.

Use nosso conversor de cores online gratuito com verificação de contraste integrada para conferir suas combinações de cores contra os padrões AA e AAA do WCAG.