Qual taxa de contraste atende à WCAG AA?

Textos comuns precisam de uma taxa de pelo menos 4,5:1. Textos grandes precisam de pelo menos 3:1.

Qual é a diferença entre HSL e HSV?

Os dois formatos representam brilho e intensidade de maneiras diferentes. Ambos são exibidos para facilitar a comparação com outros programas.

A transparência afeta o contraste?

Sim. O contraste real de um texto semitransparente depende do fundo abaixo dele. A prévia simplificada calcula principalmente cores opacas.

Conversor de cores e verificador de contraste

Converta cores entre HEX, RGB, HSL e HSV e verifique o contraste entre texto e fundo conforme os requisitos da WCAG.

Arquivos e conteúdos são processados localmente no seu navegador e não são enviados aos nossos servidores.

Sobre esta ferramenta

Insira uma cor em HEX, RGB, HSL ou HSV e veja os valores correspondentes nos outros formatos. Também é possível escolher as cores do texto e do fundo e verificar se o contraste atende aos requisitos AA ou AAA da WCAG para textos comuns e grandes.

Como usar

Conversão entre HEX, RGB, HSL e HSV
Prévia imediata da cor
Cálculo da taxa de contraste segundo a WCAG
Exibição dos resultados AA e AAA
Cópia de qualquer valor de cor
Insira uma cor: Digite um valor HEX, RGB, HSL ou HSV ou use o seletor de cores.
Copie um valor: Copie o formato necessário para CSS ou para um guia de cores.
Verifique o contraste: Escolha as cores do texto e do fundo e confira a legibilidade.

Exemplos

Verificar se uma paleta de marca atende à WCAG AA
Converter valores HEX do Figma em hsl() para variáveis CSS
Conferir cores de texto usadas no modo escuro
Registrar os níveis de cores utilizados em um sistema de design

Limitações

A prévia de contraste tem capacidade limitada para calcular cores transparentes
A precisão do seletor de cores depende da calibração da tela
Os valores de cor inseridos são processados diretamente no navegador e não são enviados aos nossos servidores.

Perguntas frequentes

Qual taxa de contraste atende à WCAG AA?: Textos comuns precisam de uma taxa de pelo menos 4,5:1. Textos grandes precisam de pelo menos 3:1.
Qual é a diferença entre HSL e HSV?: Os dois formatos representam brilho e intensidade de maneiras diferentes. Ambos são exibidos para facilitar a comparação com outros programas.
A transparência afeta o contraste?: Sim. O contraste real de um texto semitransparente depende do fundo abaixo dele. A prévia simplificada calcula principalmente cores opacas.