Verificador de Contraste de Cores

Verifique a proporção de contraste WCAG AA e AAA entre cores de primeiro plano e fundo

Experimente um exemplo

Cor do primeiro plano (texto)

Cor de fundo

Amostra de Texto Grande (18px negrito)

Amostra de texto normal — é assim que o seu texto de corpo aparecerá sobre a cor de fundo escolhida.

Proporção de contraste

14.63:1

Conformidade WCAG

Aprovado

Normal AA

Aprovado

Normal AAA

Aprovado

Grande AA

Aprovado

Grande AAA

WCAG AATexto normal: 4.5:1, Texto grande (18px+ ou 14px negrito): 3:1

WCAG AAATexto normal: 7:1, Texto grande (18px+ ou 14px negrito): 4.5:1

O que é a Verificação de Contraste de Cores?

A verificação de contraste de cores mede a diferença de luminância entre uma cor de primeiro plano (geralmente texto) e uma cor de fundo, expressando o resultado como uma proporção. Uma proporção de 1:1 significa que as cores são idênticas; 21:1 é o máximo, representando preto sobre branco ou vice-versa. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG), publicadas pelo W3C, definem proporções mínimas de contraste que o texto deve atingir para que pessoas com baixa visão ou deficiências de cor consigam lê-lo.

A fórmula da proporção de contraste vem do WCAG 2.x e se baseia na luminância relativa, uma medida do brilho aparente de uma cor ao olho humano. A luminância relativa é calculada linearizando cada canal sRGB (removendo a gama) e ponderando os canais de acordo com os coeficientes ITU-R BT.709: 0,2126 para vermelho, 0,7152 para verde e 0,0722 para azul. O verde contribui mais porque os olhos humanos são mais sensíveis à luz verde. A proporção é então (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância da cor mais clara.

O WCAG define dois níveis de conformidade. O nível AA exige uma proporção de contraste mínima de 4,5:1 para texto de tamanho normal e 3:1 para texto grande (18px ou acima, ou 14px em negrito). O nível AAA eleva a exigência para 7:1 e 4,5:1, respectivamente. O WCAG 2.1 também introduziu o Critério de Sucesso 1.4.11, que exige uma proporção de 3:1 para componentes de interface não textuais como bordas, ícones e indicadores de foco.

Por que usar este Verificador de Contraste?

Verificar o contraste a olho nu é impreciso. Cores que parecem distintas no seu monitor calibrado podem se confundir em uma tela de laptop de baixa qualidade, sob luz solar direta, ou para alguém com deuteranopia. Uma proporção numérica elimina suposições e fornece um veredicto de aprovado/reprovado em relação ao padrão WCAG.

Cálculo de Proporção Instantâneo
Escolha ou digite duas cores e veja a proporção de contraste atualizar em tempo real. Sem formulário para enviar, sem recarga de página.
🔒
Processamento com Privacidade
O cálculo de luminância é executado inteiramente no seu navegador. Nenhum valor de cor sai da sua máquina, e nenhum cookie ou análise rastreia suas escolhas.
🎯
Veredictos AA e AAA
Os resultados mostram o status de aprovado/reprovado para WCAG AA e AAA, tanto para texto normal quanto para texto grande, para que você saiba exatamente quais limites são atingidos.
📋
Sem Cadastro Necessário
Abra a página e comece a testar. Sem cadastro, sem limites de taxa. A ferramenta funciona offline após o carregamento da página.

Casos de Uso do Verificador de Contraste

Desenvolvimento Frontend
Antes de entregar uma alteração de interface, cole a cor do texto e o fundo do seu CSS no verificador para confirmar que o par atende ao WCAG AA. Isso detecta falhas de contraste antes que cheguem à revisão de código ou a auditorias automatizadas.
Entrega de Design
Designers podem verificar que cada par de cores em um arquivo do Figma atende ao nível WCAG exigido antes de entregar as especificações aos engenheiros. Corrigir o contraste na fase de design é muito mais barato do que corrigir após a implementação.
Auditoria de Acessibilidade
Engenheiros de QA realizando uma auditoria WCAG podem verificar combinações de cores específicas sinalizadas por ferramentas automatizadas como Lighthouse ou axe. O verificador confirma a proporção exata e quais níveis são aprovados ou reprovados.
Tokens de Design System
Ao definir tokens de cor para um design system, teste cada par de primeiro plano e fundo para garantir que a paleta de tokens atenda ao AA no mínimo. Documente as proporções ao lado dos tokens para que as equipes que os utilizam confiem nas escolhas.
Testes de Modelos de E-mail
Clientes de e-mail removem recursos CSS como opacidade e modos de mistura, de modo que as cores reais renderizadas podem diferir do código-fonte. Teste os valores finais de primeiro plano e fundo que chegam à caixa de entrada para verificar a legibilidade.
Estudo de Padrões de Acessibilidade
Estudantes aprendendo WCAG podem experimentar diferentes pares de cores e ver imediatamente como a proporção muda. Ajustar um canal por vez constrói uma compreensão prática de como a luminância se relaciona com o contraste percebido.

Requisitos de Proporção de Contraste WCAG

A tabela abaixo resume as proporções mínimas de contraste exigidas pelo WCAG 2.1 para diferentes tipos de conteúdo e níveis de conformidade. Texto grande é definido como 18px (24 pixels CSS) ou acima em peso normal, ou 14px (18,66 pixels CSS) ou acima em peso negrito.

NívelProporção mínimaAplica-se aNota
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminância, AA e AAA Explicados

O cálculo da proporção de contraste tem três etapas: calcular a luminância de cada cor, derivar a proporção e compará-la com os limites do WCAG.

Luminância Relativa
Um único número de 0 (preto) a 1 (branco) que representa o brilho aparente de uma cor. Leva em conta a curva gama não linear do sRGB e a sensibilidade desigual do olho humano ao vermelho, verde e azul. O verde puro (#00FF00) tem luminância de 0,7152, enquanto o azul puro (#0000FF) tem apenas 0,0722.
WCAG AA
O nível de acessibilidade de base exigido pela maioria dos padrões legais, incluindo o Ato Europeu de Acessibilidade (EAA) e a Seção 508 nos Estados Unidos. O AA exige uma proporção de 4,5:1 para texto normal e 3:1 para texto grande. A maioria dos design systems tem o AA como mínimo para todos os elementos de texto.
WCAG AAA
O nível aprimorado destinado a conteúdos que devem ser legíveis pelo maior público possível, incluindo usuários com deficiência visual significativa. O AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Poucos sites inteiros atingem AAA em todas as páginas, mas conteúdos críticos como avisos legais e informações médicas costumam ter esse objetivo.

Exemplos de Código

Calcule proporções de contraste WCAG de forma programática. Cada exemplo implementa a fórmula de luminância relativa do WCAG 2.x e o cálculo da proporção de contraste. Os mesmos pares preto-sobre-branco e índigo-sobre-branco são testados para comparação.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Perguntas Frequentes

Qual é uma boa proporção de contraste para texto?
Para texto de corpo na web, busque pelo menos 4,5:1 (WCAG AA). Proporções acima de 7:1 atendem ao WCAG AAA e são mais confortáveis para leitura prolongada. Preto sobre branco fornece a proporção máxima de 21:1, mas um cinza muito escuro (#1e293b) sobre branco ainda fornece cerca de 12,6:1, bem acima do AAA.
O que conta como texto grande no WCAG?
O WCAG define texto grande como 18px (24 pixels CSS) em peso normal, ou 14px (18,66 pixels CSS) em peso negrito. Texto grande recebe um limite de contraste mais baixo porque letras maiores são mais fáceis de perceber. Em CSS, 1px equivale a 0,75pt, portanto 18pt equivale a 24px.
O WCAG AA é legalmente obrigatório?
Em muitas jurisdições, sim. O Ato Europeu de Acessibilidade (EAA), que entra em vigor em junho de 2025, faz referência ao WCAG 2.1 AA. A Seção 508 da Lei de Reabilitação dos EUA exige que agências federais atendam ao WCAG 2.0 AA. O ADA (Americans with Disabilities Act) foi interpretado por tribunais americanos como exigindo sites acessíveis, com o WCAG AA como padrão. Canadá, Austrália e Reino Unido têm exigências semelhantes.
Como a luminância relativa é calculada?
Cada valor de canal sRGB (0-255) é dividido por 255 e depois linearizado: valores até 0,04045 são divididos por 12,92, e valores acima são transformados por ((c + 0,055) / 1,055) ^ 2,4. Os três canais linearizados são ponderados pelos coeficientes ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) e somados. O resultado é um número entre 0 e 1.
Por que o WCAG usa um deslocamento de 0,05 na fórmula de contraste?
O deslocamento de 0,05 evita a divisão por zero quando uma das cores é preto puro (luminância = 0). Ele também considera a luz ambiente e reflexos da tela que aumentam ligeiramente a luminância percebida até dos pixels mais escuros. Sem esse deslocamento, preto sobre qualquer cor escura produziria uma proporção infinita ou enganosamente alta.
Duas cores podem passar no AA e ainda assim ser difíceis de ler?
Sim. As proporções de contraste do WCAG medem a diferença de luminância, não a diferença de matiz. Um vermelho saturado sobre verde saturado pode tecnicamente passar no limite da proporção e ainda ser desconfortável para alguns leitores, especialmente para quem tem deficiência de visão de cores vermelho-verde. Combinar cores que diferem tanto em luminância quanto em matiz tende a produzir resultados mais confortáveis.
Qual é a diferença entre o contraste WCAG 2.x e o APCA?
O WCAG 2.x usa uma proporção de luminância simples que trata primeiro plano e fundo de forma simétrica. O APCA (Advanced Perceptual Contrast Algorithm), proposto para o WCAG 3.0, usa um modelo de claridade perceptual que considera a polaridade: texto escuro sobre fundo claro tem contraste percebido diferente de texto claro sobre fundo escuro com a mesma diferença de luminância. O APCA ainda é um rascunho de trabalho e não substituiu o método WCAG 2.x em nenhuma regulamentação.