Depois confira duas cores com WCAG AA e AAA e veja o texto na tela. Converta uma cor entre HEX, RGB, HSL, HSV e OKLCH e teste se o texto é fácil de ler sobre o fundo. É grátis e roda no seu navegador.
Como converter uma cor
- Use Escolher para escolher uma cor ou digite ou cole um valor em Qualquer cor.
- Leia a mesma cor em HEX, RGB, HSL, HSV, OKLCH e o nome CSS dela, quando houver.
- Toque em Copiar ao lado do formato que você quer ou em Copiar HEX.
Como conferir o contraste
- Escolha uma Cor do texto e uma Cor de fundo ou use Usar a cor principal como texto ou Usar como fundo.
- Leia a taxa de contraste e se ela passa em AA e AAA para texto normal, Texto grande a 24px, Texto em negrito a 19px e um Contorno de botão.
- Se o par falhar, use a cor próxima sugerida que passa.
Qual formato usar
HEX e RGB descrevem a luz vermelha, verde e azul de uma cor e funcionam em todo lugar. HSL e HSV descrevem matiz, saturação e luminosidade ou brilho, o que facilita ajustar uma cor à mão. OKLCH é o formato CSS mais novo: a luminosidade dele corresponde a como as cores parecem claras para as pessoas, então duas cores com o mesmo L realmente parecem igualmente claras, o que é ótimo para paletas e temas. Todos os navegadores modernos aceitam oklch() em CSS.
Como a taxa de contraste funciona
A taxa compara a luminância relativa das duas cores, de 1:1 para cores idênticas a 21:1 para preto sobre branco. Os resultados nunca são arredondados para cima, então 4,49:1 reprova no AA. Se a cor do texto é transparente, ela é misturada antes com o fundo. Quando um par falha, é sugerida uma cor próxima que passa para qualquer um dos lados.
O WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande. O AAA pede 7:1 para texto normal e 4,5:1 para texto grande. Atender a isso ajuda pessoas com baixa visão e qualquer pessoa que lê em uma tela muito clara.
O que esta ferramenta entende
HEX de três, quatro, seis e oito dígitos com ou sem #, rgb() e rgba() com vírgulas ou espaços, hsl() com deg, turn ou rad, hsv(), oklch() e oklab(), os 148 nomes de cores CSS e números simples como 59, 130, 246. O alfa depois de uma barra ou como quarto valor é mantido.
Quem usa
Web designers e desenvolvedores que criam um tema, donos de pequenas empresas que conferem se as cores da marca são legíveis, estudantes que fazem slides e qualquer pessoa que tem uma cor em um formato e precisa de outro. Para encontrar uma cor de uma foto, use o seletor de cores de imagem.
Perguntas
Qual é uma boa taxa de contraste?
Busque pelo menos 4,5:1 para texto normal. Quanto maior, melhor, e 7:1 atende ao nível AAA.
Por que os mesmos valores de cor parecem um pouco diferentes em telas diferentes?
As telas variam em brilho e cor. Os números são os mesmos, mas a tela muda a aparência deles.
Algo é enviado?
Não. A conversão acontece no seu navegador.