Verificador de Contraste de Cor
Informe uma cor de texto (frente) e uma de fundo — com o seletor de cores ou digitando um código hex de 3 ou 6 dígitos — e a ferramenta calcula a razão de contraste WCAG 2 e a avalia contra os quatro limiares usuais de uma vez: AA e AAA, para texto normal e grande. Por dentro, ela converte cada cor do sRGB com codificação gama para luz linear, pondera os canais para obter a luminância relativa (os coeficientes WCAG: 0.2126 R, 0.7152 G, 0.0722 B) e calcula (L1 + 0.05) ÷ (L2 + 0.05). As razões vão de 1:1 (cores idênticas) a 21:1 (preto sobre branco). Os limiares vêm direto dos critérios de sucesso 1.4.3 e 1.4.6 do WCAG 2.1: texto normal precisa de 4.5:1 para AA e 7:1 para AAA; texto grande (≥ 24px, ou ≥ 18.66px em negrito) precisa de 3:1 e 4.5:1. Uma pré-visualização ao vivo mostra sua combinação em tamanho de corpo e de título, porque um par que passa matematicamente ainda merece um segundo olhar. Tudo roda localmente no seu navegador.
Um pequeno jabuti xereta viu dez cegonhas felizes
Um pequeno jabuti xereta viu dez cegonhas felizes
Como usar
- Defina a cor de frente (texto) com o seletor ou digitando um código hex — as formas #RGB e #RRGGBB são aceitas.
- Defina a cor de fundo do mesmo jeito.
- Leia a razão de contraste e os quatro selos AA/AAA — verde significa aprovado, vermelho reprovado.
- Confira a pré-visualização em tamanho de corpo e de título; se um par passa por pouco, considere escurecer ou clarear uma das cores para mais conforto.
Perguntas frequentes
- Quais razões AA e AAA exigem?
- O critério de sucesso 1.4.3 do WCAG 2.1 (AA) exige 4.5:1 para texto normal e 3:1 para texto grande; o 1.4.6 (AAA) eleva para 7:1 e 4.5:1. AA é o nível citado pela maioria das leis e normas de compras públicas; AAA é uma meta mais rígida para máxima legibilidade.
- O que conta como texto grande?
- Texto de pelo menos 18pt (24px), ou pelo menos 14pt (18.66px) se em negrito. O WCAG define os limites em pontos; os equivalentes em pixels assumem a relação CSS padrão de 96 dpi, então um título normal de 24px ou um rótulo em negrito de 19px se qualificam.
- Essas razões valem para ícones e componentes de interface?
- O WCAG 2.1 acrescenta o critério 1.4.11 (contraste não textual): componentes de interface, indicadores de foco e gráficos significativos precisam de pelo menos 3:1 contra as cores adjacentes. É o mesmo limiar do selo AA de texto grande, então você pode usá-lo como referência rápida para ícones e bordas.
- Suporta transparência?
- Não — a razão é definida para cores sólidas. Se seu texto ou sobreposição usa alfa, componha primeiro com o fundo real (preto a 60% sobre branco é na prática #666666) e teste o resultado achatado.
- A fórmula do WCAG 2 é a palavra final sobre legibilidade?
- É o padrão normativo — citado em casos da ADA, na EN 301 549 e na Section 508 — mas não é perfeita: tende a superestimar pares claro-sobre-escuro (modo escuro). O modelo APCA proposto no rascunho do WCAG 3 corrige isso; até ele chegar, atenda às razões do WCAG 2 e confie nos seus olhos na pré-visualização.
Guias sobre este tema
Ferramentas relacionadas
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Comparador de Brilho de Cor (HSL vs Lab L* vs WCAG vs HSP)
Compare sete métricas de brilho diferentes — Luminosidade HSL, Valor HSV, Luminância Relativa WCAG (LRV), L* CIE Lab (claridade perceptual), Luma Rec. 709, Brilho Percebido HSP e média ingênua (R+G+B)/3 — para uma ou duas cores lado a lado, com deltas mostrando por que uma cor 'mais clara' pode parecer mais escura.
Playground de Filtros CSS
Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.
Gerador de Paleta de Cores
Escolha uma cor base, obtenha harmonias clássicas de roda de cores — complementar, split-complementar, triádica, tetrádica, quadrado, análoga, monocromática.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.