Seletor de cores e verificador de contraste

Como usar a Seletor de cores e verificador de contraste

O que calcula e quando usar

Escolhe e converte cores entre HEX, RGB, HSL, HSV e CMYK, sugere tons claros, tons escuros e cores combinando, e verifica o contraste do texto segundo as diretrizes de acessibilidade WCAG.

Como usar, passo a passo

1. Escolha uma cor com o seletor ou digite-a em HEX, RGB, HSL ou pelo nome.
2. Escolha uma cor de fundo para verificar o contraste.
3. Copie qualquer formato com um clique.
4. Use os tons claros, tons escuros e cores combinando para montar uma paleta.

O que significa cada campo

• Cor – Começa em #2443C8, o azul da SmartCalcy.
• Fundo – Começa em branco.

Como ler os resultados

• Taxa de contraste – De 1:1 a 21:1, com resultados AA e AAA para texto normal e grande.
• Formatos – HEX, RGB, HSL, HSV e CMYK.
• Tons claros e escuros – Versões mais claras e mais escuras.
• Cores combinando – Complementar, análogas e tríade.

A fórmula

Taxa de contraste = (L1 + 0,05) ÷ (L2 + 0,05), em que L1 e L2 são as luminâncias relativas da cor mais clara e da mais escura. O nível AA das WCAG exige 4,5:1 para texto normal e 3:1 para texto grande; o AAA exige 7:1 e 4,5:1.

Um exemplo prático

Com as cores iniciais, #2443C8 sobre branco tem taxa de contraste de 7,74:1, que passa no AAA para todos os tamanhos de texto.

Premissas e limites

• Os valores CMYK são uma conversão simples, não um perfil de impressão com gerenciamento de cores.
• Os resultados de contraste seguem a fórmula das WCAG 2.

Erros comuns

• Verificar o contraste só em texto grande e usar a cor em texto pequeno.
• Depender só da cor para transmitir significado.

Perguntas frequentes

Ferramentas relacionadas