Calculadora de relação de contraste

O contraste de cores descreve a diferença de luminância relativa entre o primeiro plano e o fundo. Um contraste adequado ajuda pessoas com baixa visão, diferenças na percepção de cores, visão envelhecida, ofuscamento ou telas de baixa qualidade a ler e operar interfaces digitais. Esta calculadora converte duas cores HEX ou RGB nos valores de luminância relativa definidos pelas Diretrizes de Acessibilidade para Conteúdo Web e informa uma relação de 1:1, para luminâncias iguais, até 21:1, para preto sobre branco. O cálculo não compara apenas os valores brutos dos canais vermelho, verde e azul. Cada canal sRGB é normalizado e linearizado para considerar a gama da tela. Os valores lineares de vermelho, verde e azul recebem pesos de luminância de 0.2126, 0.7152 e 0.0722, pois a visão humana é mais sensível à luz verde. A relação final divide a luminância mais clara acrescida de 0.05 pela mais escura acrescida de 0.05. Esse método padrão produz resultados consistentes independentemente da ordem das cores. O critério de sucesso 1.4.3 da WCAG 2.x exige pelo menos 4.5:1 para texto normal no nível AA e 3:1 para texto grande. O nível AAA eleva esses limites para 7:1 e 4.5:1. Texto grande geralmente significa pelo menos 18 pontos em peso normal ou 14 pontos em negrito, aproximadamente 24 pixels CSS ou 18.66 pixels CSS nas condições comuns dos navegadores. Componentes de interface e objetos gráficos significativos têm requisitos separados, normalmente 3:1 em relação às cores adjacentes. Atender à relação é importante, mas não garante um design acessível. Fontes finas ou incomuns, gradientes, imagens, estados ao passar o ponteiro, transparência, suavização e fundos variáveis podem alterar a legibilidade real. Textos de placeholder e controles desabilitados também merecem revisão cuidadosa, mesmo quando um critério específico os trata de forma diferente. Não comunique estados apenas por cor: combine cores com rótulos, ícones, padrões ou outras pistas. Teste indicadores de foco e todos os estados interativos, não apenas a captura da tela padrão. Informe HEX de seis ou três dígitos, ou a notação RGB padrão separada por vírgulas. A calculadora valida canais de zero a 255 e avalia as cores exatas informadas. Se o resultado ficar pouco abaixo do limite, escureça o primeiro plano ou clareie o fundo e calcule novamente. A verificação automática deve ser seguida de testes de teclado, zoom e refluxo, análise com leitor de tela e feedback de pessoas com deficiência. Use a ferramenta durante o design e a implementação para detectar cedo problemas básicos de cor e depois confira a interface renderizada em condições reais.