Color
Contrast

Verifique instantaneamente o contraste de cores segundo os padrões WCAG AA e AAA — para textos, botões e componentes UI.

Padrão WCAG 2.14 critérios verificadosPré-visualização em tempo real

① Insira a cor de primeiro plano ② Insira a cor de fundo ③ Verifique o contraste WCAG

Primeiro plano (texto)

Fundo

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

O que é o contraste de cores WCAG e por que importa?

As WCAG (Web Content Accessibility Guidelines) definem rácios mínimos de contraste entre texto e fundo para garantir legibilidade a utilizadores com deficiências visuais, incluindo daltonismo e baixa visão. O nível WCAG 2.1 AA requer pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA requer 7:1 e 4,5:1. O rácio é calculado com luminância relativa — medida perceptual derivada da linearização RGB (0,2126R + 0,7152G + 0,0722B). Verificar o contraste cedo garante a acessibilidade legal (ADA, EN 301 549, AODA).

Perguntas frequentes

O contraste de cores WCAG é uma norma que define o rácio mínimo de contraste entre texto e fundo para garantir legibilidade a utilizadores com deficiências visuais. É publicado pelo W3C como parte das WCAG 2.1.

Calcula-se usando valores de luminância relativa derivados das componentes RGB de cada cor. A fórmula é (L1 + 0,05) / (L2 + 0,05) onde L1 é a cor mais clara e L2 a mais escura.

WCAG AA é o nível padrão exigido legalmente: 4,5:1 para texto normal e 3:1 para texto grande. WCAG AAA é o nível avançado: 7:1 para texto normal e 4,5:1 para texto grande.

Texto grande é pelo menos 18 pontos (aprox. 24px) normal ou 14 pontos (aprox. 18,67px) a negrito. Nestas dimensões, rácios ligeiramente inferiores são aceites.

Não necessariamente. O contraste diz respeito à legibilidade, mas o design acessível também inclui tamanho de fonte, legibilidade tipográfica, espaçamento e contexto.

Cole os códigos HEX das suas cores de marca ou UI em ambos os campos. Procure pelo menos o nível AA para todo o texto do corpo. Use o botão de troca para testar combinações invertidas rapidamente.

O critério WCAG 2.1 1.4.11 (Contraste não-textual) exige pelo menos 3:1 para componentes UI em relação a cores adjacentes. O texto no botão segue a regra padrão de 4,5:1.

O que é o contraste de cores WCAG e por que importa?

Perguntas frequentes

Explore a nossa rede