94 · Produtividade

Conversor de cores e verificador de contraste

Insira uma cor em qualquer formato comum para obter as outras e verifique se ela é legível na cor de fundo.

Executa no seu navegador

Seus dados: Esta ferramenta processa sua entrada neste navegador. CapyHelp não carrega essa entrada para gerar seu resultado. Detalhes de privacidade

Como usar o conversor de cores e verificador de contraste

Digite uma cor como HEX (#4f46e5), rgb() ou hsl()ou use o seletor.
Insira uma cor de fundo para verificar o contraste.
Veja a taxa de contraste e se ela passa nas WCAG AA e AAA para texto normal e grande.

Compreendendo as taxas de contraste

As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) comparam o brilho relativo de duas cores em uma escala de 1:1 (idêntica) a 21:1 (preto sobre branco).

AA precisa de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (cerca de 24px ou 19px em negrito).
AAA precisa de 7:1 para texto normal e 4,5:1 para texto grande.

Um bom contraste ajuda todos a ler sob luz forte ou em telas de baixa qualidade, não apenas as pessoas com baixa visão.

Exemplos

#4F46E5 texto em branco

Contraste 6.29:1 · passa AA, falha AAA para texto normal

hsl(243, 75%, 59%)

#5048E5 · rgb(80, 72, 229)

Perguntas

Por que HSL para HEX não faz exatamente a viagem de ida e volta?

Os valores HSL são arredondados para números inteiros, portanto, a conversão de volta pode mudar um canal em uma etapa. A diferença não é visível.

Suporta transparência?

Os valores alfa em rgba() e hsla() são aceitos, mas ignorados, porque o contraste depende do que está por trás de uma cor transparente.

HEX de 3 dígitos é compatível?

Sim. #f80 é lido como #ff8800.

Tradução automática. Revise resultados importantes.