Conferir o contraste de cores

Escolha duas cores e veja a razão de contraste, se ela passa em AA e AAA, e como a combinação fica de verdade — inclusive com texto em japonês, que é mais denso e mais difícil de ler com pouco contraste.

Carregando a ferramenta…

Como funciona

  1. Escolha uma cor de texto e uma de fundo, ou cole os valores em hexadecimal.
  2. Leia a razão e os quatro resultados de aprovado/reprovado.
  3. Ajuste até o texto corrido passar de 4,5:1.

Por que nada é enviado

Tudo o que esta página faz é executado por código que roda dentro da aba do seu navegador, com o mesmo motor que desenha as páginas web. O arquivo é lido do disco para a memória da aba, transformado ali e escrito de volta como um download. Ele nunca é enviado a lugar nenhum — nem para nós, nem para terceiros.

Comprove você mesmo

  1. Abra as ferramentas de desenvolvedor do navegador (F12) e escolha a aba Rede.
  2. Carregue o seu arquivo e rode a ferramenta.
  3. As únicas requisições que você vai ver baixam o código da própria ferramenta — e, em algumas ferramentas pesadas, o motor de código aberto delas a partir de um CDN público — mais um pequeno aviso de visita para loreatec.jp (endereço e título da página, nada mais). Nenhuma delas leva o seu arquivo.

Comprove você mesmo →

Perguntas frequentes

Qual limite se aplica a mim?

4,5:1 para o texto corrido, 3:1 para texto de 24px para cima (19px se for negrito) e para partes da interface como bordas de campos e ícones, 7:1 para AAA. Se for para lembrar de um número só, lembre de 4,5.

O meu design passa, mas continua difícil de ler.

A razão de contraste não mede o peso da fonte, o tamanho nem o espaçamento das letras, e um tipo fino e claro a 4,5:1 é realmente desconfortável. O painel de prévia está aí para você julgar com os olhos, além do número — principalmente em japonês, onde kanji denso em tamanho pequeno pede mais contraste do que a fórmula exige.