Gerador de paleta acessível WCAG
Gere uma paleta de cores aleatórias e filtre as que realmente atingem uma razão de contraste WCAG AA ou AAA com texto branco ou preto. O cálculo de luminância e de razão é feito diretamente no seu navegador.
Como funciona
Escolher uma paleta de marca apenas pela estética muitas vezes leva a cores que falham no teste de acessibilidade quando combinadas com texto. Esta ferramenta sorteia cores aleatórias, calcula a luminância relativa de cada uma pela fórmula WCAG e compara a razão de contraste obtida com texto branco e com texto preto, para manter (se você quiser) apenas as que atingem o nível AA ou AAA.
Como a razão de contraste é calculada?
O cálculo segue a fórmula oficial da WCAG: cada cor é convertida em luminância relativa (uma medida da claridade percebida que leva em conta a sensibilidade do olho humano a cada canal de vermelho, verde e azul), e a razão é obtida comparando a luminância da cor mais clara com a da mais escura. Uma razão de 21:1 corresponde ao contraste máximo possível (preto puro sobre branco puro).
Por que algumas cores mostram "texto branco" e outras "texto preto"?
A ferramenta calcula a razão nos dois sentidos e escolhe automaticamente a cor de texto (branco ou preto) que oferece o melhor contraste sobre o fundo gerado: é essa combinação que você deve usar se adotar essa cor como fundo na sua interface.
Todo o cálculo de luminância e de contraste é executado em JavaScript no seu navegador: nenhuma cor gerada é enviada a um servidor.