Acessibilidade

Ratios de Contraste WCAG Explicados

Entende o que significam 4.5:1, 7:1 e 3:1. Aprende a testar contraste e garante que o teu design é acessível para todos.

8 min de leitura Iniciante Março 2026

Diagrama de teste de contraste WCAG com diferentes ratios de legibilidade e exemplos de cores

O que é Contraste?

Contraste é a diferença de luminosidade entre o texto e o fundo. Simples assim. Quanto maior a diferença, mais fácil ler. O WCAG — Web Content Accessibility Guidelines — define padrões específicos para garantir que todos conseguem ler o teu design, independentemente de terem visão normal ou dificuldades de visão.

Não é apenas sobre pessoas com daltonismo. Pensa em alguém a ler o teu site ao sol intenso, num telemóvel com brilho fraco, ou a uma idade mais avançada. O contraste adequado beneficia literalmente toda a gente.

Exemplo de contraste adequado versus contraste insuficiente em texto preto e branco

Os Três Ratios Principais

WCAG define diferentes níveis de conformidade. Cada um tem um ratio específico.

4.5:1

Nível AA — O Mínimo

Este é o padrão mais comum. Garante que a maioria das pessoas consegue ler o teu texto. É o que a maioria dos designers persegue porque oferece um bom equilíbrio entre acessibilidade e flexibilidade de design.

Aplica-se a: Texto normal, botões, inputs

7:1

Nível AAA — O Ideal

Isto é o topo. Quem escolhe 7:1 está a dizer “toda a gente vai conseguir ler isto”. É mais restritivo — as cores têm de ser bem contrastantes — mas garante que mesmo pessoas com baixa visão conseguem.

Aplica-se a: Texto crítico, documentos importantes

3:1

Nível AA — Grandes Textos

Se o teu texto é grande — pelo menos 18pt — podes usar 3:1. Porque? Porque texto maior é naturalmente mais fácil de ler. É por isso que podes usar cores mais suaves em títulos grandes.

Aplica-se a: Títulos, headings grandes

Ferramenta de teste de contraste online mostrando como calcular ratio entre cores

Como Testar o Contraste

Não precisa de matemática complicada. Existem ferramentas que fazem isto por ti. O WebAIM Contrast Checker é a mais popular — é grátis e rápido.

Entra no site, coloca o código hexadecimal (ou RGB) da tua cor de texto, coloca o código da cor de fundo, e — boom — ele diz-te se passas em AA ou AAA. Alguns designers também usam o Chrome DevTools ou plugins como o WAVE. Recomendo testar sempre antes de enviar o design para produção.

A dica? Testa no teu telemóvel ao sol. Se consegues ler confortavelmente, provavelmente está bem.

Exemplos Práticos

Vamos ver alguns exemplos reais para entender melhor.

Texto Preto em Fundo Branco

#000000 em #FFFFFF = 21:1. Isto é o máximo. Lê-se perfeitamente em qualquer situação. É por isso que jornais usam preto em branco — é óbvio.

Cinzento Médio em Fundo Escuro

#888888 em #1F1F1F = 5.8:1. Isto passa em AA confortavelmente. Bom para parágrafos longos em modo escuro — ler é confortável e a página não fica “muito branca”.

Cinzento Claro em Fundo Branco

#AAAAAA em #FFFFFF = 2.7:1. Isto NÃO passa em AA. É muito fraco. Não recomendo para texto importante — fica demasiado apagado.

Implementando na Prática

Quando começar um novo projeto, aqui está a abordagem que eu uso:

Defino a cor de fundo principal (digamos, branco ou um azul escuro)
Escolho uma cor de texto que gosto (talvez cinzento ou branco)
Testo o contraste — se não passar, ajusto a cor até passar
Faço o mesmo para títulos, botões e elementos secundários
Testo de novo no browser, telemóvel e até ao sol

Isto demora 5 minutos extra no início, mas poupa horas de retrabalho depois. É investimento.

Designer ajustando cores numa paleta, testando diferentes combinações para contraste adequado

Ferramentas Recomendadas

Estas são as ferramentas que utilizo regularmente.

WebAIM Contrast Checker

A mais rápida. Coloca as cores, vê o resultado em segundos. Sem complicações, sem contas — direto ao assunto.

Chrome DevTools

Abre o Inspector de Elementos, clica numa cor, e vê o contraste. Perfeito se já estás a trabalhar no browser.

WAVE (Browser Extension)

Verifica o site inteiro em tempo real. Mostra problemas de contraste, estrutura, e muito mais. Ótimo para auditoria completa.

Coolors.co

Gera paletas com contraste adequado automaticamente. Útil quando estás preso e precisa de ideias rápidas.

Resumo Rápido

4.5:1 é o padrão

Usa isto para texto normal e obtém AA compliance.

7:1 é o ideal

Se conseguires, usa para garantir acessibilidade máxima.

3:1 para títulos grandes

Texto maior pode usar contraste mais fraco.

Testa sempre

Usa WebAIM ou Chrome DevTools — leva segundos.

Comece Hoje

Já tens uma paleta de cores? Testa o contraste agora. Abre o WebAIM Contrast Checker e vê se o teu design passa. Demora 30 segundos e pode poupar-te de problemas de acessibilidade.

Explorar Mais Artigos

Nota Importante

Este artigo fornece informações educacionais sobre as diretrizes WCAG de contraste. Embora os padrões 4.5:1, 7:1 e 3:1 sejam amplamente aceites na indústria, as necessidades de acessibilidade podem variar dependendo do contexto, da audiência e de requisitos específicos do projeto. Para conformidade legal completa ou requisitos regulatórios, consulta as diretrizes WCAG oficiais ou um especialista em acessibilidade digital. As ferramentas de teste mencionadas são precisas, mas nenhuma ferramenta substitui testes com utilizadores reais.