Verificador de contraste de cores — razão WCAG AA/AAA e APCA
Confira cores de texto e de fundo segundo a WCAG 2.x AA e AAA, veja o valor Lc da APCA e encontre a cor mais próxima que passa.
Texto grande, 24px (18pt) regular
Texto grande em negrito, 18,67px (14pt) bold
Texto normal do corpo em 16px. Um pequeno jabuti xereta viu dez cegonhas felizes. Parágrafos longos precisam de mais contraste que títulos, porque traços finos em tamanhos pequenos se misturam.
Letra miúda em 13px, o tamanho de legendas e rodapés.
Cores aprovadas mais próximas
Só a luminosidade muda (em OKLCH), então o matiz continua o mesmo. Aplique uma ou copie.
#7676764.54:1#0606064.52:1#5959597.00:1Calculado no seu navegador. Nada do que você digita é enviado para nós ou armazenado. Ver todas as ferramentas grátis.
Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.
Este verificador de contraste de cores grátis diz se um texto é legível sobre o fundo segundo a WCAG 2.x, o padrão por trás da ADA, do European Accessibility Act e da maioria das auditorias de acessibilidade. Informe uma cor de texto e uma cor de fundo, pelo seletor, pelo código HEX ou pelo conta-gotas de tela, e ele mostra a razão de contraste com aprovação ou reprovação para AA e AAA em texto normal e grande e para componentes de interface, como bordas de botões e ícones.
Quando uma combinação é reprovada, o verificador sugere a cor de texto ou de fundo mais próxima que passa, ajustando só a luminosidade em OKLCH para que o matiz da sua marca continue o mesmo. Ele também mostra o valor Lc da APCA, o método mais recente do rascunho de trabalho da WCAG 3, que modela como o contraste é de fato percebido e avalia melhor o modo escuro e fontes finas. A WCAG 3 ainda não é um padrão, então, para conformidade, o número que vale é a razão da WCAG 2.x, e a página explica onde as duas discordam.
Como usar
- Informe a cor do texto e a cor de fundo: use os seletores, digite códigos HEX (#777 ou #777777) ou clique no ícone de olho para capturar qualquer pixel da tela (Chrome e Edge).
- Leia a razão de contraste e os cinco resultados. Texto corrido precisa de AA normal (4,5:1); títulos de 24px, ou 18,66px em negrito, precisam de AA grande (3:1).
- Confira na prévia como a combinação fica de verdade em tamanhos de texto corrido, grande e legenda.
- Se uma verificação falhar, aplique uma cor sugerida em Cores aprovadas mais próximas, que muda só a luminosidade.
- Use Inverter cores para testar o contrário (por exemplo, uma versão para modo escuro) e depois copie o resultado ou o CSS.
Perguntas frequentes
Que razão de contraste a WCAG exige?
A WCAG 2.1 e 2.2 no nível AA exigem pelo menos 4,5:1 para texto normal e 3:1 para texto grande (critério de sucesso 1.4.3), e 3:1 para componentes de interface e gráficos com significado, como bordas de campos, anéis de foco e ícones (1.4.11). O nível AAA eleva o texto para 7:1 no normal e 4,5:1 no grande (1.4.6). Logotipos e elementos puramente decorativos ou desativados estão isentos.
O que conta como texto grande na WCAG?
Pelo menos 18 pontos em peso normal ou 14 pontos em negrito. Em pixels CSS, isso dá 24px normal ou cerca de 18,66px em negrito, porque um ponto equivale a 1,333 pixel. Um título de 16px em negrito não é texto grande, e 20px normal também não. Fontes finas ou decorativas podem ficar aquém na prática mesmo nesses tamanhos, e esse é um dos problemas que a APCA pretende resolver.
#777777 sobre branco é acessível?
Não para texto corrido. #777777 sobre #ffffff tem razão de contraste de 4,48:1, logo abaixo do limite AA de 4,5:1, então é reprovado no AA para texto normal e só passa para texto grande e componentes de interface. A WCAG não permite arredondar para cima, então 4,48 é reprovado. O cinza mais claro que passa no AA sobre branco é #767676 (4,54:1); no AAA, #595959 (7,00:1).
O que é a APCA e devo usá-la no lugar da WCAG 2?
A APCA (Accessible Perceptual Contrast Algorithm) é o método de contraste proposto para a WCAG 3. Em vez de uma razão, ela dá um valor de contraste de luminosidade, o Lc, de cerca de -108 a 106, em que o sinal indica a polaridade (negativo significa texto claro sobre fundo escuro). Ela leva em conta que a mesma razão é lida de forma diferente dependendo da polaridade e de quão escuras são as cores, e é por isso que a WCAG 2 superestima combinações escuro sobre escuro e subestima algumas de branco sobre cor. Use-a para tomar decisões de design melhores, mas informe a WCAG 2.x para conformidade: a WCAG 3 é um rascunho de trabalho e o método de contraste dela ainda pode mudar.
Como a razão de contraste é calculada?
A luminância relativa de cada cor é calculada convertendo os canais sRGB para luz linear e ponderando-os com 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul, a sensibilidade do olho a cada um. A razão é (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara. Ela vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). O termo 0,05 representa a luz ambiente refletida na tela.
Como corrijo uma cor reprovada no contraste?
Mude a luminosidade, não o matiz. Escureça o texto ou clareie o fundo (ou o contrário no modo escuro) até a razão passar. As sugestões desta página fazem exatamente isso no espaço de cor OKLCH, então um azul de marca reprovado vira um azul mais escuro, e não outra cor. Se nenhuma das direções alcançar a meta, o que acontece quando a outra cor é um tom médio, mude a outra cor: fundos cinza médio não chegam a 7:1 com nenhuma cor de texto.
Requisitos de contraste da WCAG 2.x num relance
• Texto normal, AA (1.4.3): 4,5:1. Vale para texto corrido, rótulos, links, texto de placeholder que transmite informação e texto em imagens.
• Texto grande, AA (1.4.3): 3:1. Texto de pelo menos 24px normal ou 18,66px em negrito.
• Componentes de interface e gráficos, AA (1.4.11): 3:1 em relação às cores adjacentes. Bordas de campos, contornos de caixas de seleção, indicadores de foco, ícones com significado, linhas de gráficos.
• Texto normal, AAA (1.4.6): 7:1. Texto grande, AAA: 4,5:1. Poucos sites atingem AAA em tudo; vale a pena buscá-lo em textos longos e para públicos mais velhos.
• Isentos: logotipos e nomes de marca, controles desativados, elementos puramente decorativos e texto incidental (parte de uma foto, por exemplo).
Dois erros aparecem em quase toda auditoria. O texto de placeholder em campos de formulário costuma ser cinza-claro e não atinge 4,5:1, e como muitas vezes é o único rótulo, ele conta. E botões na cor da marca com texto branco frequentemente ficam entre 3 e 4,5, passando só para texto grande, enquanto o rótulo do botão tem 14 ou 16px.
Onde a WCAG 2 e a APCA discordam
A fórmula da WCAG 2 trata o contraste como simétrico e linear em luminância, e não é assim que a visão funciona. Duas consequências aparecem o tempo todo na prática.
Modo escuro: texto cinza-claro sobre fundo quase preto muitas vezes passa com folga na WCAG 2, mas parece agressivo ou borrado, enquanto algumas combinações médio-escuras passam e são difíceis de ler. A APCA trata claro sobre escuro separadamente (um Lc negativo) e é mais rigorosa na faixa escura.
Cores saturadas: texto branco sobre laranja (#ff7a00) fica em cerca de 2,6:1 pela WCAG 2 e é reprovado, e texto preto sobre o mesmo laranja passa, mas muitos leitores acham a versão branca igualmente legível. A APCA pontua esses casos mais perto da percepção.
Níveis da APCA como regra prática: Lc 90 é o preferido para texto corrido, Lc 75 é o mínimo para texto corrido, Lc 60 para outros textos de conteúdo, Lc 45 para títulos grandes, Lc 30 para texto de placeholder e desativado e Lc 15 para elementos que não são texto, como divisórias. A orientação completa também depende do peso e do tamanho da fonte. Trate-a como uma ajuda de design junto com a WCAG 2, e não como substituta de uma verificação de conformidade.
Ferramentas grátis relacionadas
- Gerador de paleta de cores — Pressione a barra de espaço para uma nova paleta, trave as cores de que gostar, escolha uma harmonia ou extraia a paleta de uma foto. Exporte para CSS, Tailwind, SCSS, JSON ou PNG.
- Seletor e conversor de cores — Capture qualquer cor de qualquer lugar da tela ou converta na hora entre HEX, RGB e HSL.
- Gerador de gradiente CSS — Crie gradientes lineares, radiais e cônicos com pontos de cor arrastáveis, um seletor de ângulo e predefinições. Copie o CSS ou uma classe do Tailwind.
- Gerador de box-shadow — Crie efeitos de box-shadow e text-shadow em camadas com prévia ao vivo e predefinições de elevação, neumorfismo e brilho, e copie o CSS.