Escolha uma cor, aplique uma harmonia e veja na hora se o texto vai ser legível em cima dela. A conta roda no seu navegador: nenhuma cor e nenhuma imagem sai do seu computador.
Mexa na roda, troque a harmonia e acompanhe o contraste mudando junto. Nada aqui é salvo, e o link no topo carrega a paleta inteira.
A ferramenta desenha cores enquanto você mexe, então ela precisa de JavaScript. A explicação de cada medida, logo abaixo, continua valendo sem ele.
Carregue uma para começar de algum lugar, e depois mexa à vontade.
A imagem fica só no seu navegador.
Cada coluna mostra a paleta inteira como aquele tipo a vê, com o contraste de cada cor sobre branco. Se duas cores que você usa para dizer coisas diferentes aparecem iguais aqui, elas precisam de outra diferença além da cor.
Um painel de exemplo, repintado com as suas cores. Serve para ver o que a paleta faz longe das amostras.
Texto corrido em cima de uma superfície pintada com a sua paleta, que é onde o contraste aparece de verdade.
Ação principalSecundáriaA paleta sai pronta para colar, já com a variante clara e a escura.
A roda de cores tradicional é HSL, e ela mente sobre brilho. Em HSL, um amarelo e um azul com a mesma lightness parecem ter luminosidades completamente diferentes para o olho humano. Quem monta uma paleta assim descobre o problema depois, quando o texto em cima de uma das cores fica ilegível.
Esta ferramenta trabalha em OKLCH, um espaço de cor perceptualmente uniforme. Mesma lightness quer dizer mesmo brilho aparente, em qualquer matiz. É por isso que a rampa monocromática aqui sobe de forma regular, e por isso que girar a matiz mantendo a lightness não estraga o contraste que você acabou de conferir.
A norma que a maioria dos contratos e das leis de acessibilidade cita. Vai de 1:1 a 21:1. Texto normal pede 4.5:1, texto grande pede 3:1, e o nível AAA pede 7:1. É uma conta sobre luminância relativa, e ela ignora o tamanho e o peso da letra.
O cálculo que deve substituir o de cima na WCAG 3.0. Em vez de uma razão, devolve um Lc, e leva em conta que texto claro sobre fundo escuro e texto escuro sobre fundo claro não se comportam igual. Um Lc de 75 sustenta texto corrido; 60 sustenta texto fluente; 45 sustenta texto grande.
Protanopia, deuteranopia e tritanopia são a ausência de um dos três cones da retina; acromatopsia é a ausência de cor. Cerca de um homem em doze tem alguma delas. A ferramenta repinta a paleta inteira como cada uma veria, para você descobrir se duas cores que está usando para dizer coisas diferentes viram a mesma cor.
sRGB é o que qualquer tela mostra. Display P3 é mais largo e existe em telas recentes. Uma cor fora do gamut da tela é recortada para a borda mais próxima, o que quer dizer que ela não vai aparecer como você escolheu. Os selos avisam antes de você descobrir no aparelho de outra pessoa.
Quanto duas cores diferem para o olho, e não para o computador. Abaixo de 1 a diferença é imperceptível; acima de 5 são claramente duas cores. Serve para saber se a sua paleta tem duas cores que ninguém vai conseguir distinguir.
A paleta sai em sete formatos prontos para colar: CSS custom properties, Tailwind v3 e v4, Figma Tokens no padrão DTCG, Style Dictionary, SwiftUI e XML do Android. Cada um já vem com a variante clara e a escura.
Se a sua dúvida não estiver aqui, o código está aberto e responde melhor do que qualquer texto.
Não. Toda a conta acontece dentro do seu navegador, inclusive a extração de cores de uma imagem. A imagem que você solta aqui nunca sai do seu computador, e nada é salvo: fechou a aba, acabou. A única coisa que viaja é o endereço, se você clicar em compartilhar, porque a paleta inteira cabe no próprio link.
O APCA ainda é um rascunho da WCAG 3.0, e esta implementação segue a fórmula publicada sem ser a versão certificada pelo autor. Os valores ficam a poucos pontos dos de referência e a leitura prática é a mesma, mas para uma auditoria formal use a ferramenta oficial. Uma diferença que vale saber: o sinal do Lc aqui é invertido em relação à convenção publicada, então compare o módulo do número, não o sinal.
Pode. Uma cor não tem dono e a ferramenta não reivindica nada do que você monta com ela. O código por trás é MIT, então você também pode usar o motor de cálculo dentro do seu próprio produto, inclusive comercial, desde que mantenha o aviso de licença.
Funciona. A roda de cor responde ao toque e a paleta se empilha em uma coluna. Duas coisas dependem do navegador: o conta-gotas, que hoje só existe no Chrome e derivados; e reordenar as amostras arrastando, que é mais confortável no computador.
Ficava, e esta é a substituta. A versão anterior trabalhava em HSL e conferia só o contraste da WCAG 2.1. Esta trabalha em OKLCH, confere WCAG 2.1 e APCA, simula daltonismo, avisa sobre gamut e exporta tokens. O endereço antigo leva para cá.
Porque contraste mal resolvido é um problema que a gente encontra em quase todo projeto que chega, e é mais barato explicar com uma ferramenta na mão do que com um relatório. Se depois disso você quiser que a gente cuide do produto inteiro, a conversa fica mais fácil por já termos concordado sobre o que é legível.
O motor de cor é escrito em Rust, com uma porta em TypeScript que é a que roda nesta página. Licença MIT, e as correções são bem-vindas.