Matriz de Contraste WCAG

Gratuito Imagens

Matriz de Contraste WCAG

Gere uma tabela completa de contraste WCAG para qualquer conjunto de cores. Identifique instantaneamente quais combinações passam nos níveis AA e AAA. Exporte como CSV ou PNG para documentação de design systems.

4.6k usuarios Atualizado em Mar 2026 4.8/5

Avalie esta ferramenta:

4.8 (763 votos) Obrigado!

Matriz de Contraste de Cores

Cor Base (gerar paleta)

Adicionar Cor

Cores (0)

≥7:1 AAA

≥4.5:1 AA

≥3:1 AA Grande

<3:1 Falha

Gere uma paleta para ver a matriz

Como Usar

Verifique contraste WCAG de toda a sua paleta de cores em segundos.

Escolha a cor base

Selecione a cor principal do seu design system e clique em Gerar Paleta.

Adicione cores extras

Inclua cores adicionais como brancos, pretos e neutros da sua paleta.

Analise a matriz

Clique em qualquer célula para ver detalhes do par fg/bg selecionado.

Exporte os resultados

Salve como CSV para planilhas ou PNG para documentação visual.

Sobre a Matriz de Contraste WCAG

Esta ferramenta calcula a razão de contraste entre cada par de cores usando a fórmula de luminância relativa definida pela WCAG 2.1. Todo processamento é feito localmente no navegador, sem envio de dados.

Níveis de conformidade WCAG:

AAA (≥7:1): nível máximo — recomendado para texto pequeno em contextos de alta acessibilidade.
AA (≥4.5:1): requisito mínimo para texto normal — obrigatório para conformidade WCAG 2.1 AA.
AA Grande (≥3:1): requisito para texto grande (≥18pt ou ≥14pt negrito) e elementos de UI.
Falha (<3:1): combinação não recomendada para nenhum tipo de conteúdo textual.

Artigo

Contraste de Cores WCAG: Guia Completo para Designers e Desenvolvedores

Por Equipe Chipak • Atualizado em Mar 2026 • 8 min de leitura

Neste artigo

O que é WCAG e por que importa
Como é calculado o contraste
Níveis AA e AAA na prática
Aplicando no design system

1. O Que É WCAG e Por Que Importa

WCAG (Web Content Accessibility Guidelines) é o padrão internacional de acessibilidade web publicado pelo W3C. Suas diretrizes estabelecem critérios técnicos para garantir que conteúdo digital seja acessível a pessoas com deficiências visuais, auditivas, motoras e cognitivas.

O critério de contraste (WCAG 1.4.3 e 1.4.6) é um dos mais verificáveis e impactantes: especifica razões mínimas de contraste entre texto e fundo. Em muitos países, conformidade WCAG é requisito legal para sites governamentais e serviços públicos — e está se tornando padrão para o setor privado.

2. Como É Calculado o Contraste

A razão de contraste é calculada a partir da luminância relativa de cada cor, definida pela fórmula:

Cada componente RGB é linearizado (gamma corrigido) e combinado com pesos que refletem a sensibilidade do olho humano: 21.26% para vermelho, 71.52% para verde e 7.22% para azul. A razão de contraste é então (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara e L2 da mais escura.

O resultado varia de 1:1 (sem contraste, mesma cor) a 21:1 (máximo, preto sobre branco).

"O olho humano é muito mais sensível ao verde do que ao vermelho ou azul — por isso o verde tem peso quase 3x maior que o vermelho no cálculo de luminância."

3. Níveis AA e AAA na Prática

Os dois níveis de conformidade têm diferentes requisitos dependendo do tipo de conteúdo:

WCAG AA — Texto normal: razão mínima de 4.5:1. Aplicável a texto com menos de 18pt (ou 14pt negrito).
WCAG AA — Texto grande: razão mínima de 3:1. Aplicável a texto com 18pt ou mais, ou 14pt negrito ou mais.
WCAG AA — Componentes de UI: razão mínima de 3:1 para bordas de inputs, ícones ativos e outros elementos de interface.
WCAG AAA — Texto normal: razão mínima de 7:1. Recomendado para conteúdo crítico ou alto nível de acessibilidade.

4. Aplicando no Design System

Para integrar verificação de contraste no fluxo de design, recomenda-se:

Definir pares de cores aprovados no design system com razões documentadas (ex: "primary/white: 5.2:1 AA").
Usar esta matriz para validar toda a paleta antes de publicar novas versões do sistema.
Automatizar verificações em CI/CD com ferramentas como axe-core ou Playwright Accessibility.
Exportar a matriz como CSV e incluí-la na documentação do design system para referência rápida da equipe.
Revisitar a matriz ao introduzir novas cores — mudanças em uma cor afetam múltiplos pares simultaneamente.