Verifique a razão de contraste entre duas cores e veja se ela passa nos níveis AA e AAA da WCAG, ao vivo no seu navegador.
A razão de contraste é o número que a WCAG usa para decidir se um texto é legível. Ela compara a luminância relativa de duas cores numa escala de 1:1 (idênticas) a 21:1 (preto puro sobre branco puro). No nível AA, a WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande; o nível AAA sobe esses valores para 7:1 e 4,5:1. Componentes de interface — botões de ícone, bordas de campos, anéis de foco — precisam de 3:1 em relação ao que estiver ao lado deles.
A conta não é uma simples diferença de brilho. Cada canal sRGB é primeiro linearizado: dividido por 12,92 abaixo do limiar de 0,03928 e, caso contrário, normalizado e elevado à potência 2,4. Essa etapa existe porque os valores de tela são codificados em gama e não são proporcionais à luz emitida. Os canais lineares são então ponderados em 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul, refletindo o quanto cada primária contribui para o brilho percebido — o verde domina com folga. Por fim, as duas luminâncias entram em (L1 + 0,05) / (L2 + 0,05), em que o termo 0,05 modela a luz que uma tela real reflete mesmo exibindo preto. É essa constante que faz preto sobre branco dar exatamente 21:1 em vez de infinito.
Use antes de publicar, porque paletas de marca falham com mais frequência do que se imagina. Um cinza médio como #777777 sobre branco dá 4,48:1 — confortável num monitor claro, um centésimo abaixo do limiar AA e um problema real num celular sob o sol. O botão de sugestão mira exatamente esse caso: ele percorre a luminosidade HSL da cor do texto para cima e para baixo em passos de meio ponto percentual e para no primeiro valor que atinge 4,5:1, mantendo o matiz e a saturação que você escolheu. Um limite honesto: a razão mede só luminância, então não diz nada sobre confusão de matizes para quem tem daltonismo e nada sobre peso da fonte além da regra de texto grande. Tudo roda localmente no seu navegador.
Luminância relativa: para cada canal sRGB c normalizado de 0 a 1, use c / 12,92 quando c ≤ 0,03928 e ((c + 0,055) / 1,055)^2,4 caso contrário; depois L = 0,2126·R + 0,7152·G + 0,0722·B. Razão de contraste = (L1 + 0,05) / (L2 + 0,05), em que L1 é a mais clara das duas cores. Limiares: 4,5:1 texto normal AA, 7:1 texto normal AAA, 3:1 texto grande AA e componentes de interface, 4,5:1 texto grande AAA.
Texto de 18pt (24px) ou maior, ou de 14pt (cerca de 18,7px) ou maior quando em negrito. Texto grande só precisa de 3:1 no AA e 4,5:1 no AAA, porque letras maiores e mais grossas continuam legíveis com menos contraste.
Porque o limiar é um corte seco. #777777 sobre branco dá 4,48:1 e o AA exige 4,5:1, então falha por dois centésimos. Escurecer um passo para #767676 chega a 4,54:1 e passa — é exatamente isso que o botão de sugestão faz.
Sim. O critério de sucesso 1.4.11 da WCAG exige 3:1 entre um componente de interface (ou um gráfico com significado) e as cores adjacentes. Bordas de campos, estados de botões de alternância, indicadores de foco e botões só de ícone entram todos nessa regra.
Esta ferramenta implementa a razão da WCAG 2.x, que é o que leis de acessibilidade, auditorias e design systems usam como referência hoje. O APCA é o algoritmo perceptual proposto para a WCAG 3; ele produz números diferentes e ainda não é requisito de conformidade.
Não. A luminância e a razão são calculadas em JavaScript no seu dispositivo. Nada é enviado a nenhum servidor nem armazenado em lugar nenhum.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.