Cor aleatória com contraste AA garantido

Pares de cor acessíveis WCAG AA

As Web Content Accessibility Guidelines (WCAG) são o padrão internacional de fato para conteúdo web acessível, mantido pelo W3C através da Web Accessibility Initiative (WAI). A versão WCAG 2.1 (publicada em 2018) define três níveis de conformidade: A (mínimo, raramente suficiente sozinho), AA (o nível que a maioria das leis exige na prática) e AAA (padrão-ouro para conteúdo crítico). Este gerador sorteia um par texto/fundo aleatório que passa no critério de sucesso 1.4.3 Contraste (Mínimo) para AA — ou seja, é legível para a grande maioria das pessoas, incluindo quem tem baixa visão moderada ou olhos envelhecidos.

Razões de contraste exigidas

• AA texto normal (menor que 18pt ou 14pt em negrito): 4,5:1
• AA texto grande (18pt+ ou 14pt+ em negrito): 3:1
• AAA texto normal (critério 1.4.6): 7:1
• AAA texto grande: 4,5:1
• Componentes de UI e objetos gráficos (1.4.11 Contraste Não Textual): 3:1 para bordas, ícones e anéis de foco

Como a razão é calculada

Primeiro os canais sRGB são linearizados via uma curva gamma — aproximadamente pow((c+0.055)/1.055, 2.4) para valores acima de 0,03928. Em seguida, a luminância relativa é a soma ponderada L = 0,2126·R + 0,7152·G + 0,0722·B, com o verde dominando porque o olho humano é mais sensível a ele. A razão de contraste final é (L1 + 0,05) / (L2 + 0,05), onde L1 é o maior dos dois valores. As razões vão de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro).

Leis que exigem contraste acessível

• Brasil — Lei Brasileira de Inclusão (Lei 13.146/2015) torna a acessibilidade web obrigatória para serviços públicos e referencia o WCAG via eMAG.
• EUA — Section 508 do Rehabilitation Act obriga sites federais e fornecedores a cumprir WCAG 2.0 AA.
• União Europeia — European Accessibility Act (EAA) aplica-se a serviços digitais privados desde junho de 2025; e-commerce, bancos e streaming têm de cumprir EN 301 549 (que referencia o WCAG AA).
• Title III do ADA (EUA) tem sido usado em milhares de ações contra sites comerciais inacessíveis desde o julgamento da Domino's Pizza.

Ferramentas e o futuro: APCA

Checadores populares incluem o WebAIM Color Contrast Checker, o plugin Stark para Figma/Sketch, o Chrome DevTools (o color picker já mostra a razão inline) e o Color Oracle para simulação de daltonismo. A fórmula atual de luminância tem problemas conhecidos com dark mode e tons médios, então o W3C está avaliando o APCA (Advanced Perceptual Contrast Algorithm) para inclusão no WCAG 3.0. O APCA produz um Lc com polaridade (texto comum precisa de Lc 75+) e lida muito melhor com fundos escuros do que a razão 2.x.

Dicas práticas

• Nunca dependa apenas da cor para transmitir informação — combine com ícones ou texto (critério 1.4.1).
• No dark mode, não basta inverter os matizes; recalcule cada par contra o fundo escuro.
• Texto em gradiente raramente passa em contraste para cada pixel — caia para uma cor sólida na região de pior contraste.
• O text-gray-900 sobre bg-white do Tailwind dá 16:1 — confortavelmente AAA.

Perguntas frequentes

O nível AA já é suficiente? Sim para a maioria dos produtos de consumo — e para quase toda a conformidade legal pelo mundo.

Quando mirar AAA? Conteúdo médico, financeiro, governamental e educacional usado por público idoso ou com baixa visão deve buscar AAA sempre que possível.

O que conta como texto grande? 18pt ou maior, ou 14pt em negrito — para corpo de texto use o limiar de 4,5:1, não o de 3:1.

Por que minhas cores falham no dark mode? A fórmula clássica do WCAG subestima o contraste em fundos escuros — recheque com APCA ou prove visualmente em uma tela OLED real.