Cor de texto acessível

Este sugeridor de cor de texto acessível recebe uma cor hex de fundo, uma hex de texto inicial e uma taxa de contraste WCAG alvo, e devolve uma cor de texto sugerida que atinge essa taxa deslocando apenas a luminosidade HSL. Matiz e saturação permanecem fixos, assim um azul de marca continua azul enquanto escurece ou clareia o suficiente para passar AA ou AAA na superfície informada. Se a cor inicial já atinge o alvo, ela volta inalterada e marcada como não ajustada. Designers, autores de tokens de design e jobs de CI usam isso quando um verificador de contraste não basta: precisam de uma hex de substituição determinística, não só de um sinal de passou ou falhou. Não há chamadas de rede, sementes aleatórias nem leitura de relógio.

Como uma busca de luminosidade atinge um alvo de contraste WCAG

Contraste na web não é questão de gosto. As Diretrizes de Acessibilidade para Conteúdo Web definem uma única taxa de contraste a partir da luminância relativa, para que o texto de corpo, botões e rótulos permaneçam legíveis para pessoas com baixa visão. Este sugeridor parte da sua hex de fundo e de uma hex de texto inicial e altera só a luminosidade dessa cor de texto em HSL até a taxa WCAG 2.x contra o fundo atingir o alvo que você pediu.

Matiz e saturação ficam no lugar, assim um navy de marca continua navy e um vermelho de marca continua vermelho; só muda o quão clara ou escura é a tinta. O motor lineariza cada canal sRGB com a curva oficial por partes, monta a luminância com os pesos 0.2126, 0.7152 e 0.0722 e calcula a luminância mais clara mais 0.05 dividida pela mais escura mais 0.05.

Em seguida percorre a luminosidade HSL em décimos de por cento determinísticos rumo ao preto e rumo ao branco, converte cada passo de volta a RGB de 8 bits e guarda a primeira hex quantizada em cada sentido que atinge o alvo sem arredondar. Vence o candidato com a menor mudança de luminosidade; um empate prefere escurecer, o ajuste usual para tipo cinza sobre um cartão claro. Se a cor inicial já atinge o alvo, ela volta inalterada para que tokens não sejam reescritos sem motivo.

Não há jitter aleatório, consulta de rede nem atalho que dependa da data: as mesmas três entradas sempre produzem a mesma hex sugerida e as mesmas flags de validação.

Onde um sugeridor de cor de texto acessível justifica o espaço

Equipes de produto chegam a esta página quando um cinza de marca parece elegante num slide de marketing mas falha como texto de corpo sobre um cartão branco, quando um tema de modo escuro é gerado a partir de tokens claros, ou quando as partes jurídicas pedem uma hex de substituição em vez de uma opinião de captura de tela.

Designers colam uma superfície e uma tinta inicial do Figma ou de um arquivo de tokens e levam a hex sugerida de volta à paleta, em vez de empurrar a olho um controle de luminosidade. Especialistas de QA e acessibilidade anexam a taxa original, a taxa sugerida e a hex sugerida aos tickets para que os desenvolvedores corrijam o par exato. Equipes de conteúdo e marketing verificam se as cores de campanha ainda têm um companheiro de texto legal ao colocá-las sobre fundos claros ou escuros do site.

Se você só precisa medir um par que já escolheu, use uma landing de verificador de contraste; esta página é dona da intenção de sugerir uma cor de texto que passe.