Slop Colors · grátis, no seu navegador

Verifique o contraste de cores pela WCAG

Texto cinza sobre branco fica elegante até ninguém conseguir ler. Digite as duas cores e o Slop Colors mostra a razão WCAG, quais níveis ela atinge e a cor de texto mais próxima que passa.

Verificar contraste

Como fazer

1. Role até Verificação de contraste (WCAG 2) e digite a cor do texto e a do fundo, em HEX, RGB, HSL ou OKLCH.
2. Leia a razão e os cinco resultados: AA e AAA para texto normal, AA e AAA para texto grande, e partes da interface e gráficos.
3. Veja a amostra: um texto grande e um parágrafo nas suas duas cores.
4. Se o AA do texto normal reprovar, clique em Corrigir a cor do texto: ela mantém o matiz e fica só um pouco mais clara ou escura, o suficiente para passar.
5. Clique em Trocar para verificar as cores invertidas.

Seus arquivos ficam neste dispositivo: o Slop Colors roda no seu navegador, sem envio, sem conta e sem marca d’água.

Perguntas

Quais razões a WCAG exige?

O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (24 px, ou 18,66 px em negrito) e para partes da interface e gráficos. O nível AAA exige 7:1 e 4,5:1.

Por que aparece 4,47 e não 4,48?

A razão é arredondada para baixo, como o verificador da WebAIM mostra, então um par com 4,499 nunca aparece como aprovado em 4,5.

Dá para verificar uma cor da minha tela?

No Chrome e no Edge, Escolher uma cor da tela pega qualquer pixel da sua tela. Depois use-a como cor do texto ou do fundo, pelo painel.

Algo é enviado?

Não. As cores são verificadas pela página no seu navegador; nada é enviado para lugar nenhum.

Mais com o Slop Colors

• Pegue cores de uma imagem
• Gere uma paleta de cores a partir de uma cor
• Converta HEX para RGB, HSL, OKLCH ou CMYK

Apps relacionados

• PhotoSlop
  No ar
  O Photoshop, refeito para o navegador.
• SlopVector
  No ar
  O Illustrator, refeito para o navegador.
• SlopIsolate
  Beta
  Remova fundos com IA que roda no seu dispositivo.