Verificador de contraste de cores

O verificador de contraste de cores mede a taxa de contraste entre uma cor de primeiro plano (texto) e uma cor de fundo e informa se esse par atende às diretrizes de acessibilidade do conteúdo da web. Ele relata um único número entre 1:1 e 21:1 e o classifica em relação aos limites do WCAG 2.2 para AA e AAA em tamanhos de texto normais e grandes, além do limite separado de 3:1 para componentes e gráficos de interface do usuário.

O contraste é a diferença na luminância relativa entre duas cores, não apenas em quão diferentes elas parecem. Duas cores podem parecer distintas e ainda não são para leitores com baixa visão, deficiência de visão de cores ou qualquer pessoa que use um telefone sob luz solar intensa. A proporção é calculada com a fórmula exata de luminância relativa sRGB definida pelo WCAG, de modo que o resultado corresponde às ferramentas de auditoria e aos usuários de tela do leitor, em vez de uma visão visual aproximada.

Tudo é executado no seu navegador. Digite ou cole cores como hexadecimal, RGB, HSL ou uma palavra-chave CSS, assista a uma atualização de visualização de texto ao vivo e, se um par falhar, você pode aplicar uma cor sugerida que seja aprovada. Nada é carregado, não há inscrição e a ferramenta continua funcionando offline depois que a página é carregada.

A fórmula de contraste WCAG 2 é uma razão de luminância relativa, e seus limites são o que as auditorias de acessibilidade e a maioria dos requisitos legais são medidos contra, por isso é o número certo para projetar para. Também é conhecido por ser imperfeito: pode ser generoso para iluminar texto em fundos escuros e áspero em alguns pares de tons médios, razão pela qual o algoritmo sucessor, APCA, existe e está sendo testado para versões futuras O texto grande tem uma barra inferior, e grandes meios 18 pt, ou 14 pt quando negrito, que é em torno de 24 px e 18,66 px. Elementos não-texto são cobertos separadamente por 1.4.11 em 3:1, e essa é a regra mais frequentemente perdida: botões de ícone, bordas de entrada e anéis de foco todos precisam, e um design pode passar em cada parágrafo e ainda falhar em seus campos de forma.