Clew

InícioFerramentasVerificador de contraste

Verificador de contraste de cores WCAG 2.2 e APCA

Informe a cor do texto e do fundo em HEX, RGB ou HSL. Você recebe a razão de contraste da WCAG 2.2 com o resultado para AA, AAA, texto grande e componentes de interface, o contraste de luminosidade APCA do rascunho da WCAG 3, uma prévia de texto, botões e tooltip e a cor mais próxima que passa, caso a sua não passe.

● Grátis, sem cadastroAtualizado:

HEX (#777, #767676), rgb(118 118 118), hsl(0 0% 46%) ou oklch(56% 0 0). Texto semitransparente é misturado ao fundo.
O que ajustar

Cor mais próxima que passa

—

 

Contraste WCAG— 
APCA Lc— 
Luminância— 

Título grande, 24 px

Texto corrido de 16 px. Leia no celular, ao ar livre, com o braço esticado: se for difícil para você, também será para seus usuários.

Botão principalSecundárioLink de texto
Borda do campo
Tooltip: clique em “Novo projeto” para começar.

Letra miúda, 13 px: legendas e dicas são onde o contraste mais falha.

Resultados

    Fórmula. Contraste = (Lclara + 0,05) / (Lescura + 0,05), onde L = 0,2126·R + 0,7152·G + 0,0722·B do sRGB linearizado. O valor nunca é arredondado para cima: 4,48:1 não atinge 4,5:1.

    Tudo é calculado no seu navegador — nada do que você digita é enviado para lugar nenhum.

    Como usar

    1. Informe duas coresDigite ou cole as cores do texto e do fundo em qualquer formato CSS, ou escolha no seletor. Inverta as cores para testar texto claro sobre fundo escuro.
    2. Leia os resultadosA razão de contraste é comparada a todos os limites da WCAG 2.2: texto normal e grande em AA e AAA, e 3:1 para componentes de interface. O APCA Lc aparece ao lado como segunda opinião.
    3. Confira a préviaTexto, botão, link, borda de campo e tooltip são desenhados com suas cores — as combinações que mais falham em interfaces reais.
    4. Use a cor mais próximaEscolha a meta e se quer mudar o texto ou o fundo. A ferramenta mantém o tom e move a luminosidade até a combinação passar; depois é só aplicar ou copiar o HEX.

    Como a razão de contraste da WCAG é calculada

    A WCAG 2.x compara a luminância relativa de duas cores — o quanto cada uma parece clara ao olho, numa escala de 0 (preto) a 1 (branco). Cada canal sRGB é convertido do valor 0–255 para luz linear, e os canais são ponderados pela sensibilidade do olho: o verde pesa mais, o azul pesa menos.

    c = canal / 255 c_lin = c / 12,92 se c ≤ 0,04045 c_lin = ((c + 0,055) / 1,055) ^ 2,4 caso contrário L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin contraste = (L_clara + 0,05) / (L_escura + 0,05)

    O resultado vai de 1:1 (cores idênticas) a 21:1 (preto no branco). O termo 0,05 representa a luz ambiente refletida na tela, então pares muito escuros nunca chegam a um contraste infinito.

    Exemplo. Cinza #777777 no branco: 119 / 255 = 0,4667, que linearizado dá 0,1845, logo L = 0,1845. O branco tem L = 1. Contraste = 1,05 / 0,2345 = 4,48:1. Não passa AA para texto normal, porque 4,48 é menor que 4,5 e a WCAG não permite arredondar. O cinza mais claro que passa no branco é #767676, com 4,54:1.

    Limites da WCAG 2.2

    • 1.4.3 Contraste (mínimo), nível AA: 4,5:1 para texto normal e 3:1 para texto grande.
    • 1.4.6 Contraste (melhorado), nível AAA: 7:1 para texto normal e 4,5:1 para texto grande.
    • 1.4.11 Contraste não textual, nível AA: 3:1 para as partes visuais necessárias para identificar componentes de interface e seus estados — bordas de campos, indicadores de foco, contornos de caixas de seleção, ícones com significado, linhas de gráficos.

    Texto grande significa pelo menos 18 pontos (24 pixels CSS) em peso normal ou 14 pontos (cerca de 18,66 px) em negrito. Logotipos, texto puramente decorativo e controles desabilitados estão isentos. Os limites não mudaram entre a WCAG 2.0, 2.1 e 2.2; no Brasil, o eMAG (Modelo de Acessibilidade em Governo Eletrônico) também se baseia na WCAG.

    APCA: o método de contraste proposto para a WCAG 3

    A fórmula da WCAG 2 é simples, mas tem pontos fracos conhecidos: considera um par igualmente legível qualquer que seja a cor do texto, superestima o contraste de combinações escuras e ignora o tamanho e o peso da fonte. O Accessible Perceptual Contrast Algorithm (APCA), criado por Andrew Somers para o grupo de trabalho do W3C, modela melhor a percepção de luminosidade e retorna um valor de contraste de luminosidade, Lc, de cerca de −108 a +106.

    Y = 0,2126729 · (R/255)^2,4 + 0,7151522 · (G/255)^2,4 + 0,0721750 · (B/255)^2,4 texto escuro no claro: Lc = ((Y_fundo^0,56 − Y_texto^0,57) · 1,14 − 0,027) · 100 texto claro no escuro: Lc = ((Y_fundo^0,65 − Y_texto^0,62) · 1,14 + 0,027) · 100 (Y abaixo de 0,022 é ajustado suavemente; |resultado| menor que 0,1 conta como zero)

    O sinal indica a polaridade: positivo para texto escuro em fundo claro, negativo para texto claro em fundo escuro. O mesmo cinza #888 dá Lc 63,1 como texto no branco, mas Lc −68,5 como rótulo branco sobre #888: pelo APCA, o rótulo branco é mais legível. A WCAG 2 não consegue expressar isso, porque dá 3,54:1 nos dois casos.

    Guia aproximado dos níveis Lc no modo simplificado “Bronze”: 90 recomendado para texto corrido, 75 mínimo para texto corrido, 60 para outros textos de conteúdo, 45 para títulos grandes, 30 para placeholders e elementos não textuais, 15 só para divisores.

    Importante: o APCA faz parte do rascunho de trabalho da WCAG 3, que não é um padrão finalizado, e os limites podem mudar. Exigências legais e de contratação hoje se referem à WCAG 2.x. Use a razão da WCAG 2.2 para decidir se passa ou não, e o APCA para escolher entre duas opções que já passam ou para pegar pares do modo escuro que a WCAG 2 deixa passar.

    Como corrigir contraste baixo sem perder a cor da marca

    Em geral basta mudar a luminosidade, não o tom. As sugestões acima trabalham no espaço de cor OKLCH: mantêm o tom e o croma, movem a luminosidade perceptual passo a passo, trazem a cor de volta ao gamut sRGB e confirmam que o HEX arredondado ainda passa. A opção mais próxima da luminosidade original aparece como a mais próxima.

    • Guarde a cor da marca para áreas grandes e botões e use um tom mais escuro da mesma cor para textos e links. Um vermelho de marca com 3,9:1 no branco ainda pode ser o fundo de um botão com texto branco em negrito, se esse par atingir o limite de texto grande — mas confira.
    • Verifique todos os estados: hover, foco, desabilitado, visitado e erro. Placeholders e textos de ajuda são as falhas mais comuns em formulários.
    • Verifique os dois temas. Uma paleta que passa no modo claro muitas vezes falha no modo escuro, onde o APCA é especialmente útil.
    • Texto sobre imagens e gradientes precisa passar no ponto mais claro. Coloque um fundo sólido ou semitransparente atrás do texto em vez de confiar numa sombra.
    • Tooltips e dicas de onboarding costumam usar um tom claro da marca com texto cinza. São lidos rápido e no meio de uma tarefa, então mire em 4,5:1 ou mais mesmo em textos curtos.

    Para montar uma escala completa de tons com contraste conhecido em cada passo, use o gerador de paletas acessíveis.

    Fontes

    1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — critérios 1.4.3, 1.4.6 e 1.4.11; definições de luminância relativa e razão de contraste.
    2. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — justificativa de 4,5:1 e 3:1, definição de texto grande.
    3. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 versão 0.0.98G-4g, Myndex Research — constantes e valores de referência usados pela ferramenta.
    4. W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — situação do método de contraste visual.
    5. Governo Federal. eMAG — Modelo de Acessibilidade em Governo Eletrônico, versão 3.1.
    6. Ottosson B. A perceptual color space for image processing, 2020 — OKLab, usado para ajustar a luminosidade.

    Perguntas frequentes

    Qual razão de contraste a WCAG exige?

    Para o nível AA, a WCAG 2.2 exige pelo menos 4,5:1 entre texto normal e fundo, 3:1 para texto grande (24 px, ou cerca de 18,66 px em negrito) e 3:1 para componentes de interface e gráficos com significado. O nível AAA eleva as exigências de texto para 7:1 e 4,5:1.

    Contraste de 4,48:1 é suficiente para 4,5:1?

    Não. Os limites da WCAG são exatos e a razão não pode ser arredondada para cima. #777777 no branco dá 4,48:1 e não passa AA para texto normal; #767676 dá 4,54:1 e passa.

    O que é APCA e devo usá-lo no lugar da WCAG 2?

    APCA é o método de contraste perceptual do rascunho da WCAG 3. Ele considera a polaridade do texto e dá um valor Lc cujas exigências dependem do tamanho e do peso da fonte. Ainda não é padrão, então a conformidade continua sendo medida pela razão da WCAG 2.2; o APCA é uma segunda verificação útil, principalmente em temas escuros.

    Contraste importa para ícones, bordas e indicadores de foco?

    Sim. O critério 1.4.11 exige 3:1 em relação às cores adjacentes para as partes de um componente necessárias para identificá-lo ou entender seu estado: bordas de campos, contornos de caixas de seleção, ícones com significado e indicadores de foco. Elementos decorativos e controles desabilitados estão isentos.

    Como calcular o contraste de texto semitransparente?

    Primeiro a cor do texto é misturada ao fundo de acordo com a opacidade; depois compara-se a cor sólida resultante. Este verificador faz isso automaticamente e mostra o HEX resultante.

    Botões desabilitados e placeholders precisam atender ao contraste?

    Componentes desabilitados estão isentos na WCAG 2.2. Placeholders, não: se transmitem informação, precisam de 4,5:1. Muitos formulários falham aqui, então é mais seguro colocar a dica num rótulo visível ou num texto abaixo do campo.

    Como encontrar uma cor que passe sem mudar a marca?

    Mantenha o tom e mude só a luminosidade. As sugestões desta ferramenta fazem exatamente isso no espaço OKLCH e mostram a opção mais escura e a mais clara para o texto ou o fundo, com o contraste resultante.

    Mais em Design de produto

    Leia também

    Gerador de paletas acessíveisGerador de escala tipográficaVerificador de textos de tooltipsTodas as ferramentas

    Tours, tooltips e checklists com efeito visível nas métricas.

    Teste o Clew grátisComo funcionaPlano gratuito para sempre · sem cartão de crédito

    Tours de produto, pop-ups e onboarding na era da IA

    7 padrões com número de passos, regras de texto e métricas, o que a IA muda e um checklist antes de publicar. PDF, 2 páginas. O que tem no guia →

    O guia está em inglês.