Matriz de Contraste de Paleta
Verifique todas as combinações de texto e fundo de uma paleta de uma vez, com razões de contraste e resultados WCAG AA e AAA. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.
Uma cor por linha, em qualquer formato. Até 10 cores; duplicatas são unificadas.
AAA: 7:1 ou mais. AA: 4.5:1 ou mais. AA grande: 3:1 ou mais, suficiente só para texto grande (24px, ou 18.7px em negrito) e componentes de interface.
O que é uma matriz de contraste?
Uma matriz de contraste compara cada cor de uma paleta com todas as outras, como texto e como fundo, para você ver de relance quais combinações são legíveis. Cada célula mostra uma amostra com aquela cor de texto sobre aquele fundo, sua razão de contraste WCAG 2.x e o nível que alcança: AAA a partir de 7:1, AA a partir de 4.5:1, e AA para texto grande e componentes de interface a partir de 3:1. Em vez de verificar pares um por um, você cola a paleta inteira e tem o panorama completo, que é como os design systems documentam quais cores podem ser combinadas.
Exemplos
Verificando todos os pares de uma paleta em código:
// every ordered pair, skipping a color on itself
for (const text of palette)
for (const bg of palette)
if (text !== bg) console.log(text, bg, contrast(text, bg));from itertools import permutations
for text, bg in permutations(palette, 2):
print(text, bg, round(contrast(text, bg), 2))/* a passing pair from the matrix, as tokens */
:root {
--text-on-surface: #111827;
--surface: #e5e7eb;
}Casos de uso
Documentar um design system
Publique quais cores de texto e fundo podem ser combinadas, assim ninguém precisa verificar o contraste de novo a cada tela nova.
Auditar uma paleta de marca
Cole as cores da marca e descubra na hora quais podem levar texto corrido e quais são só decorativas.
Escolher cores de botões e badges
Compare preenchimentos candidatos com texto branco e escuro em uma só visão para ficar com os que funcionam com os dois.
Gráficos e rótulos de dados
Verifique qual cor de rótulo continua legível sobre cada cor de série antes de colocar valores dentro de barras ou fatias.