FERRAMENTA GRATUITA
Boas combinações também precisam ser fáceis de ler.
Compare as cores do texto e do fundo, veja o resultado na prática e encontre ajustes para melhorar a leitura.
Use códigos HEX com três ou seis caracteres, como #000 ou #FFFFFF.
A razão compara a luminosidade das duas cores. Quanto maior, maior a diferença entre texto e fundo.
A avaliação abaixo segue os critérios de contraste da WCAG 2.2. A combinação é calculada com cores opacas no espaço sRGB.
Texto grande: a partir de 24 px com peso normal ou de 18,67 px em negrito. Os demais tamanhos entram em texto comum.
Ícones, gráficos e componentes essenciais · AA
Texto comum · 16 px
Texto grande · 24 px
Texto grande em negrito · 19 px
A ferramenta procura uma variação mais escura ou mais clara de uma das cores. Você decide se quer aplicar.
Leve os códigos das cores, a razão e a avaliação dos critérios.
Copie as cores do texto e do fundo da sua página, apresentação ou peça. Transparências e imagens precisam de uma análise específica.
Parágrafos e legendas costumam exigir mais contraste do que títulos grandes. Confira o critério adequado antes de escolher a combinação.
Observe a leitura na aplicação final, inclusive botões, links e estados de foco. Um par aprovado não avalia toda a experiência.
O que é calculado. A relação de contraste usa a luminância relativa das cores sRGB e varia de 1:1 a 21:1. A ferramenta aceita HEX com três ou seis caracteres, com ou sem #, e considera cores totalmente opacas. Inverter texto e fundo mantém a mesma razão, mas muda a apresentação visual.
AA e AAA. Nos critérios de contraste de texto da WCAG 2.2, AA exige 4,5:1 para texto comum e 3:1 para texto grande. AAA exige, respectivamente, 7:1 e 4,5:1. “Atende” vale somente para o contraste deste par de cores e para o critério indicado; não certifica a acessibilidade de uma página ou de um site.
Quando o texto é grande. A referência é pelo menos 18 pontos com peso normal ou 14 pontos em negrito, equivalentes a 24 px e aproximadamente 18,67 px CSS. As prévias usam 16 px, 24 px e 19 px em negrito. Tamanho, desenho da fonte e espessura também afetam a percepção da leitura.
Ícones e elementos de interface. O critério não textual AA exige 3:1 para informação visual necessária à identificação de componentes, estados e partes essenciais de gráficos, em relação às cores adjacentes. A ferramenta compara apenas duas cores: não examina todos os fundos, bordas, estados ou exceções do componente real.
Precisão do resultado. A razão na tela mostra até quatro casas decimais sem arredondar para cima. A classificação usa o valor completo: um resultado abaixo de 4,5:1 não atende ao mínimo de 4,5:1, mesmo que esteja muito próximo. Cores iguais têm razão 1:1.
Como funcionam as sugestões. As variações misturam uma das cores em direção ao preto ou ao branco até alcançar a meta escolhida. Elas mantêm a outra cor e são recalculadas antes de aparecer. Não representam a única solução nem garantem a menor mudança visual possível. Revise a identidade visual antes de aplicar.
Alcance e privacidade. A ferramenta não acessa sites nem analisa imagens, gradientes, transparências, daltonismo ou todos os requisitos de acessibilidade. As cores e os resultados ficam na memória do navegador; recarregar restaura o exemplo. Não há API, IA, envio de dados ou histórico salvo pela ferramenta.
Referências: contraste mínimo, contraste aprimorado e contraste não textual, do W3C.
