Português
Verifique o contraste WCAG e ajuste combinações reprovadas com um clique.
Última atualização
Título grande — 24px negrito
Texto de corpo. A rápida raposa marrom pula sobre o cão preguiçoso. Leia um parágrafo ou dois para ver se o contraste está confortável em sessões longas.
Legenda pequena — 12px regular. WCAG só protege 14pt e acima nesse tamanho, então textos minúsculos precisam do contraste mais rigoroso.
Um *verificador de contraste* é o que designers e devs usam antes de publicar uma tela. Ele calcula a **relação de contraste** entre duas cores — seu texto e o fundo atrás dele — usando a fórmula das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Quanto maior o número, mais fácil de ler.
O WCAG define três limites. **3:1** é o mínimo para títulos grandes (24px+ regular ou 18,66px+ negrito) e para a borda visível de componentes interativos como botões, campos e ícones. **4,5:1** é o mínimo AA para texto corrido — a meta que a maioria dos times persegue. **7:1** é AAA, o nível mais alto, ótimo para pessoas com baixa visão.
Contraste **não** é o mesmo que vivacidade. Duas cores de marca podem parecer fortes e ainda ser difíceis de ler se a *luminância* delas for próxima. Esta ferramenta aplica a fórmula WCAG canal a canal, mostra o número exato e classifica cada contexto, então você não precisa chutar.
Digite ou cole um HEX, ou use o seletor de cor. A cor da frente é o seu texto ou ícone; o fundo é o que está atrás.
O número grande à esquerda é a relação WCAG. Abaixo de 3:1 é arriscado para qualquer UI; abaixo de 4,5:1 reprova para texto corrido.
Três linhas mostram aprovação/reprovação para texto normal (4,5/7), texto grande (3/4,5) e componentes de UI (3:1). Mire o check verde em cada linha relevante.
Quando AA falha, a ferramenta empurra a luminosidade da cor da frente — mantendo o matiz — até o par passar. Clique de novo para chegar em AAA.
Quando as duas cores passarem nos contextos que importam, copie o snippet CSS (color: + background:) e cole no seu CSS ou nos seus design tokens.
Cruze o que você está estilizando com o nível que precisa. Fonte: WCAG 2.2 Understanding 1.4.3 e 1.4.11.
| Alvo | Mínimo AA | Mínimo AAA | Notas |
|---|---|---|---|
| Texto corrido (< 18pt regular) | 4.5 : 1 | 7 : 1 | Regra padrão para parágrafos, labels e legendas |
| Texto grande (≥ 18pt regular ou ≥ 14pt negrito) | 3 : 1 | 4.5 : 1 | Títulos, copy de hero, citações grandes |
| Componentes de UI e objetos gráficos | 3 : 1 | — | Bordas de botões, campos, ícones, focus rings |
| Logo ou decoração pura | Isento | Isento | Logotipos e texto incidental são isentos — mas usabilidade ainda importa |
| Estado desabilitado | Isento | Isento | Controles inativos são isentos, mas não use isso de desculpa para defaults ruins |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Slate escuro clássico sobre quase-branco. Passa AAA para corpo (≥ 7:1) com folga. A maioria das UIs de produto deveria mirar essa região por padrão.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Azuis vivos sobre branco frequentemente ficam por 4:1 — legíveis para títulos grandes (passa 3:1 AA Large) mas falham nos 4,5:1 para corpo. Use em botões e CTAs a partir de 18px, não em parágrafos.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Amarelo brilhante contra branco é a armadilha famosa: parece forte mas a luminância está perto demais. Reserve esse par para fundos escuros (#facc15 sobre #1f2937 dá ≈ 12:1).
