Verificador de contraste – Razão de contraste WCAG

Verificar o contraste de cores para acessibilidade

O contraste de cores é fundamental para a legibilidade. Quando o texto em primeiro plano não tem contraste suficiente com o fundo, ele se torna difícil de ler — especialmente para pessoas com baixa visão ou deficiências na visão de cores.

Este verificador de contraste calcula a razão de contraste entre duas cores quaisquer e avalia segundo os critérios de sucesso da WCAG 2.1. Insira cores nos formatos HEX, RGB ou HSL e obtenha resultados instantâneos.

Entendendo os níveis de contraste WCAG

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões de contraste mínimas para a legibilidade do texto. Existem dois níveis de conformidade:

• WCAG AA Texto normal — exige uma razão de contraste de pelo menos 4,5:1
• WCAG AA Texto grande — exige uma razão de contraste de pelo menos 3:1 (texto grande é 18pt+ ou 14pt+ em negrito)
• WCAG AAA Texto normal — exige uma razão de contraste de pelo menos 7:1
• WCAG AAA Texto grande — exige uma razão de contraste de pelo menos 4,5:1

AA é o nível padrão que a maioria dos sites e aplicativos busca atingir. AAA é o nível aprimorado, recomendado quando a máxima legibilidade é importante.

Como usar o verificador de contraste

1. Insira uma cor de primeiro plano (texto) — HEX, RGB ou HSL
2. Insira uma cor de fundo em qualquer formato suportado
3. Veja a razão de contraste e uma pré-visualização ao vivo do texto sobre o fundo
4. Confira os resultados aprovado/reprovado para os níveis WCAG AA e AAA
5. Use o botão de troca para inverter rapidamente as cores de primeiro plano e fundo

Quando verificar o contraste de cores

• Ao escolher cores de texto e fundo para um site ou aplicativo
• Para verificar se um design system atende aos requisitos de acessibilidade
• Ao testar cores de botões, links ou ícones em relação aos seus fundos
• Ao conferir combinações de cores no modo escuro
• Para cumprir padrões legais de acessibilidade (ADA, EAA, Section 508)

Preciso, instantâneo e gratuito

Esta ferramenta calcula a razão de contraste WCAG 2.1 usando a fórmula padrão de luminância relativa. Os resultados são calculados instantaneamente no seu navegador — nenhum dado é enviado para qualquer servidor.

Precisa encontrar ou converter uma cor primeiro? Use o Seletor de cores para extrair cores de uma imagem, ou o Conversor de cores para alternar entre HEX, RGB e HSL.

Perguntas frequentes

Qual é uma boa razão de contraste para texto?

Para texto de tamanho normal, é necessária uma razão de contraste de pelo menos 4,5:1 para atender ao WCAG AA. Para texto grande (18pt ou 14pt em negrito e acima), o mínimo é 3:1. Para o nível mais alto de acessibilidade (WCAG AAA), o texto normal precisa de pelo menos 7:1.

Qual é a diferença entre WCAG AA e AAA?

AA é o nível de conformidade padrão que a maioria dos sites e aplicativos deveria atender. AAA é o nível aprimorado com requisitos de contraste mais rigorosos, recomendado para conteúdo onde a máxima legibilidade é crítica, como sites governamentais ou de saúde.

O que conta como texto grande na WCAG?

Texto grande é definido como 18 pontos (24px) ou maior em peso normal, ou 14 pontos (aproximadamente 18,66px) ou maior em negrito. Texto grande tem requisitos de contraste mais baixos porque seu tamanho o torna inerentemente mais fácil de ler.

Quais formatos de cor este verificador suporta?

Você pode inserir cores em HEX (ex.: #1E293B), RGB (ex.: rgb(30, 41, 59)) ou HSL (ex.: hsl(222, 33%, 17%)). A ferramenta detecta automaticamente o formato.

Como a razão de contraste é calculada?

A razão de contraste é calculada usando a fórmula WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 a da cor mais escura. O resultado varia de 1:1 (sem contraste) a 21:1 (contraste máximo, preto sobre branco).

Esta ferramenta funciona no celular?

Sim. O verificador de contraste funciona em qualquer dispositivo com um navegador moderno — computador, tablet ou celular.

Esta ferramenta é gratuita?

Sim. O ColourPicker.app é totalmente gratuito, sem necessidade de cadastro.

Posso verificar o contraste de componentes de interface, não apenas texto?

A WCAG 2.1 também exige uma razão de contraste mínima de 3:1 para componentes de interface significativos e objetos gráficos (Critério de sucesso 1.4.11). Você pode usar este verificador para conferir essas combinações também — o cálculo da razão é o mesmo.