Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Verifica um par de texto e fundo tanto pela WCAG 2.2 quanto pelo APCA, simula as três dicromacias e consegue pontuar uma paleta inteira como uma matriz. Mostra os dois padrões porque eles discordam em pares reais, e essa discordância é a parte útil.
Um pequeno jabuti xereta viu dez cegonhas felizes.
WCAG 2.2
4,54:1
- PASSAAA — 1.4.3 Contraste (mínimo), texto normalprecisa de 4,5:1
- FALHAAAA — 1.4.6 Contraste (aprimorado), texto normalprecisa de 7:1
- PASSA1.4.11 Não textual — ícones, bordas, anéis de focoprecisa de 3:1
Conta como texto normal. O grande começa em 24px, ou em 18,66px no peso 700. É o padrão que a legislação de acessibilidade referencia hoje: tanto a EN 301 549 quanto a Section 508 apontam para o WCAG, então é este o número que uma auditoria vai usar.
APCA
Lc 71,6
Texto escuro sobre fundo claro. O sinal é a polaridade: ao contrário do WCAG, trocar as duas cores muda a resposta.
Alcança Lc 60 — texto legível. Legível em corpo grande, mas não para leitura longa a 16px.
16px no peso 400 não basta neste Lc.
| Nível | no peso 400 | no peso 700 |
|---|---|---|
| Lc 90 | 14px | 12px |
| Lc 75 | 18px | 14px |
| Lc 60 | 24px | 18px |
| Lc 45 | 36px | 24px |
| Lc 30 | 48px | 36px |
Os dois padrões discordam, e isso é de propósito
A razão do WCAG 2 é uma fórmula de 2008: um quociente de luminâncias relativas com um termo de véu fixo, simétrico nos seus dois argumentos. O APCA modela a resposta perceptual — depende da polaridade, porque com a mesma diferença de luminância o texto escuro sobre claro se lê mesmo melhor do que o contrário, e toma o tamanho e o peso da fonte como parte da pergunta, e não como uma regra separada pregada depois.
Por isso eles discordam em pares reais, e a discordância não é um bug de nenhum dos dois. O WCAG 2 aprova combinações de cinza médio sobre branco que são realmente difíceis de ler, e reprova algumas de escuro sobre escuro que estão bem. O WCAG 2.2 é o que a legislação de acessibilidade referencia hoje, então é ele que uma auditoria vai rodar. O APCA é o melhor modelo do que quem lê experimenta. Use o WCAG para passar e o APCA para decidir qual das opções aprovadas escolher.
Este par é um deles: o WCAG AA diz que passa e o APCA diz não adequado a 16px/400.
Visão de cores
Simulado com as projeções de Viénot–Brettel–Mollon, aplicadas em luz linear. Aplicá-las a bytes codificados com gama — o atalho comum — faz um par parecer mais distinguível do que é, que é justamente a direção errada para uma verificação de acessibilidade errar.
Texto de exemplo
Protanopia (sem cones vermelhos, ~1% dos homens) · 4,54:1
Texto de exemplo
Deuteranopia (sem cones verdes, ~1% dos homens) · 4,54:1
Texto de exemplo
Tritanopia (sem cones azuis, ~0,01%) · 4,54:1
Texto de exemplo
Acromatopsia (sem cor, ~0,003%) · 4,54:1
Como usar
Informe as duas cores
Cor do texto e fundo, em qualquer notação. O parágrafo de amostra acima dos vereditos é desenhado nelas, no tamanho e no peso que você definir.
Defina o tamanho e o peso reais
A WCAG muda o seu limiar em 24px, ou 18,66px com peso 700. O APCA toma tamanho e peso como parte da pergunta, e não como uma regra separada. Nenhuma das respostas significa muito no tamanho errado.
Leia os dois vereditos
WCAG para passar em uma auditoria, APCA para decidir entre as opções que passam. Quando eles discordam, a página diz isso explicitamente.
Verifique a paleta inteira de uma vez
Cole as suas cores, uma por linha, e receba uma matriz N×N. É N×N em vez de um triângulo porque o APCA não é simétrico — as mesmas duas cores pontuam diferente dependendo de qual é o texto.
Perguntas frequentes
Qual padrão devo seguir?
WCAG 2.2, porque é o que a lei referencia — a EN 301 549 e a Section 508 apontam ambas para ela, então é o número que uma auditoria vai rodar. O APCA é o melhor modelo do que um leitor experimenta, então use-o para escolher entre os pares que já passam.
Por que WCAG e APCA discordam?
A razão da WCAG 2 é uma fórmula de 2008: luminâncias relativas com um termo fixo de reflexo, simétrica nos seus argumentos. O APCA modela a percepção, depende da polaridade — escuro sobre claro de fato se lê melhor do que o contrário — e leva em conta tamanho e peso. Então a WCAG aprova certos cinzas médios sobre branco que são difíceis de ler, e reprova certos escuros sobre escuro que estão bem.
Por que a simulação de visão de cores é diferente da de outras ferramentas?
Porque é aplicada em luz linear. O atalho comum é rodar a projeção sobre bytes codificados em gama, o que faz os pares parecerem mais distinguíveis do que são — a direção errada para uma verificação de acessibilidade errar.
Passar no contraste significa que o texto é legível?
Significa que ele supera uma barra mensurável. Comprimento da linha, altura da linha, espaçamento entre letras, a própria fonte e se o texto está sobre uma fotografia importam, todos, e nenhum deles está em nenhum dos dois números. Um 4,5:1 aprovado em uma fonte fina de 12px continua sendo trabalho duro.
Pode receber de
Extrair paleta de cores
Palette Extractor
Extrai uma paleta de N cores de uma imagem e exporta como hex, variáveis CSS ou amostra ASE.
Cor média e dominante
Average & Dominant Colour
Devolve uma cor representativa da imagem — média, mediana ou mais frequente — como um recurso de cor.
Simulador de daltonismo
Colour Blindness Simulator
Renderiza a imagem como a veria alguém com protanopia, deuteranopia, tritanopia ou visão em tons de cinza.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Simulador de daltonismo
Colour Blindness Simulator
Renderiza a imagem como a veria alguém com protanopia, deuteranopia, tritanopia ou visão em tons de cinza.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Paleta para modo escuro
Dark Mode Palette
Monta uma rampa 50–950 a partir de uma cor e a espelha numa versão escura, para que cada par de tokens mantenha o contraste.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.