Grade de Contraste

Um sistema de design não é só uma lista de cores, é uma lista de combinações — e a dúvida real é qual cor combina com qual. Verificar uma combinação por vez demanda n² verificações. Para uma paleta com oito cores são sessenta e quatro checagens, por isso ninguém faz isso, e por que sistemas de design incluem combinações que nunca foram testadas. Aqui você encontra um verificador que faz todas as combinações ao mesmo tempo — uma matriz de cores WCAG para a paleta inteira. Cole sua paleta e cada cor é testada como texto sobre cada cor como fundo, mostrando a razão de contraste e o nível WCAG na célula. Verde significa que passou no nível escolhido, amarelo passa no nível menor para texto grande, vermelho é reprovação. Cole no formato que tiver: hex, rgb(), hsl() ou nomes CSS, separados por quebras, vírgulas ou espaços, com ou sem sintaxe de variáveis CSS — ele reconhece tudo e aponta possíveis erros. A grade é o que você deve salvar. Feita para capturar tela direto para um documento de design ou um pull request, porque a checagem é feita uma vez e a imagem vale por muito tempo. Tudo roda no seu navegador.