Verificar contraste
O Verificador de contraste mede uma cor de texto contra o fundo dela e informa a razão WCAG 2.2, em quais níveis ela passa, e o contraste de luminosidade APCA ao lado. Ele compõe um primeiro plano translúcido antes de medir — a razão pela qual a maioria dos verificadores discorda do navegador — e, quando um par falha, encontra a cor aprovada mais próxima movendo a luminosidade em OKLCh, para que o resultado mantenha o matiz de onde você partiu.
Taxa5.13:1
Este é um exemplo de texto normal. O parágrafo usa o tamanho considerado normal pelas WCAG.
E este é um texto grande.
Texto corrido: menos de 18pt (24 px CSS) com espessura normal, ou menos de 14pt (cerca de 18,67 px CSS) em negrito. WCAG 1.4.3.
Nível avançado para os mesmos tamanhos. WCAG 1.4.6.
Pelo menos 18pt (24 px CSS) com espessura normal, ou 14pt (cerca de 18,67 px CSS) em negrito. WCAG 1.4.3.
Ícones, indicadores de foco, bordas de campos e legendas de gráficos. WCAG 1.4.11.
Texto corrido a partir de 18 px com espessura normal. A APCA é um modelo proposto para a WCAG 3 e não tem aprovação ou reprovação. O número orienta o tamanho e a espessura do texto.
5.13:1#6d6d74#ffffffComo funciona o Verificar contraste?
O contraste é uma razão entre duas luminâncias relativas. Cada canal sai da sua codificação sRGB — a função de transferência por partes da IEC 61966-2-1, e não um gama simples de 2.2 — e recebe os pesos 0.2126 para vermelho, 0.7152 para verde e 0.0722 para azul, que é aproximadamente quanto cada um contribui para o que o olho lê como brilho. As duas luminâncias entram em (lighter + 0.05) / (darker + 0.05), e o 0.05 é uma folga para ofuscamento que representa a luz que a sua tela reflete do ambiente.
Por que uma cor translúcida precisa ser composta antes
Uma cor com 50% de alfa não tem razão de contraste própria. O que a pessoa leitora vê é a mesclagem dela com o que estiver atrás, então a mesclagem é o que é medido. Verificadores que pulam esta etapa informam a razão da cor sem mesclar, que é sempre melhor que a verdade — e esse é o motivo mais comum de uma ferramenta discordar do inspetor do próprio navegador.
Onde o WCAG 2.x é sabidamente falho
A fórmula do 2.x nunca foi derivada de pesquisa sobre legibilidade; é uma razão simples de luminância, e falha nos dois sentidos. Aprova alguns cinzas claros sobre branco que ninguém consegue ler e reprova pares escuros perfeitamente legíveis. Também trata preto sobre branco e branco sobre preto como idênticos a 21:1, quando texto claro sobre fundo escuro é mensuravelmente mais difícil de ler na mesma razão.
O APCA é o modelo por trás do rascunho do WCAG 3. Ele é sensível à polaridade — o sinal do número diz de que lado está o par — e retorna um valor de contraste de luminosidade, Lc, em vez de uma razão. Ele é informado aqui ao lado da razão do 2.x e nunca no lugar dela, porque a conformidade ainda é medida contra o 2.x, e uma ferramenta que trocasse a métrica silenciosamente diria às pessoas que passaram por uma auditoria que não passaram.
Como a sugestão é encontrada
Quando um par falha, a cor aprovada mais próxima é encontrada percorrendo a luminosidade em OKLCh e mantendo matiz e croma. Percorrer os canais sRGB em vez disso arrasta o matiz conforme a cor escurece, então a sugestão volta como uma cor diferente daquela da sua paleta. A busca se afasta do fundo primeiro — mais escura em uma página clara, mais clara em uma escura — para que uma cor de marca escura continue escura em vez de virar quase branca.
As duas cores
foreground #6d6d74 background #ffffff
O que é informado
ratio 5.13 : 1 normal AA pass (needs 4.5) normal AAA fail (needs 7) large AA pass (needs 3) APCA Lc 75.4
Quais opções e casos-limite o Verificar contraste suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| 4.5:1 | AA | 1.4.3 | Texto normal: menos de 18pt (24 px CSS) com espessura normal, ou menos de 14pt (cerca de 18,67 px CSS) em negrito. O nível AA exige pelo menos 4,5:1. |
| 3:1 | AA | 1.4.3 | Texto grande: pelo menos 18pt (24 px CSS) com espessura normal, ou 14pt (cerca de 18,67 px CSS) em negrito. Use o tamanho e a espessura calculados da fonte, em vez da declaração de um elemento pai. |
| 7:1 | AAA | 1.4.6 | Contraste aprimorado para texto normal. Raramente exigido fora de licitações do setor público e difícil de atingir com uma paleta de marca. |
| 3:1 | AA | 1.4.11 | Não-texto: ícones, indicadores de foco, bordas de entrada, séries de gráficos, a borda de um botão. Adicionado na WCAG 2.1 e ainda é a regra mais esquecida. |
| Lc 60 | APCA | rascunho | Aproximadamente onde 16px em negrito ou 24px normal se torna confortável. APCA não tem aprovação ou reprovação — o número mapeia para um tamanho e peso. |
| Lc 90 | APCA | rascunho | Suficiente para qualquer tamanho e peso, incluindo fontes finas e corpo de texto longo. |
| Alfa | 0–1 | 1 | Um primeiro plano translúcido é composto sobre o fundo antes da medição, porque é isso que o leitor vê. |
| Texto desativado | — | isento | A WCAG isenta completamente os controles inativos de 1.4.3. É deixar ilegível e ainda vale a pena corrigir. |
Perguntas frequentes
Qual razão de contraste preciso para passar no WCAG?
O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande. Grande significa pelo menos 18pt (24 px CSS) com espessura normal, ou 14pt (cerca de 18,67 px CSS) em negrito. O nível AAA eleva esses valores para 7:1 e 4,5:1. Separadamente, WCAG 1.4.11 exige 3:1 para as informações visuais necessárias à identificação dos componentes da interface e seus estados, e para as partes significativas de gráficos, sujeito às exceções previstas.
Por que aqui aparece uma razão diferente da de outro verificador?
Quase sempre é o alfa. Um primeiro plano abaixo de 100% de opacidade não tem razão própria: o que a pessoa leitora vê é essa cor mesclada com o fundo, então a mesclagem é o que é medido. Esta ferramenta compõe primeiro; vários verificadores populares não o fazem e informam uma razão melhor do que a página realmente tem. Se as duas cores são opacas e os números ainda diferem, uma das duas está aplicando um gama simples de 2.2 em vez da função de transferência por partes do sRGB.
4.5:1 é o suficiente para uma fonte de 14px?
É o que o AA exige, e é pouco. 4.5:1 foi definido como mínimo, não como meta, e a 14px em um peso leve, em um celular à luz do dia, é genuinamente difícil. Se o texto importa, mire acima de 7:1 ou aumente o tamanho. O APCA é mais útil aqui do que a razão do 2.x, porque amarra o número a um tamanho e a um peso, em vez de tratar todo texto igual.
Devo usar APCA ou WCAG 2.x?
Os dois, para propósitos diferentes. WCAG 2.x é o que mede a conformidade hoje, então é o que você reporta. O APCA é o melhor guia para saber se algo é realmente legível, e é a direção para onde a norma vai. Onde eles divergem — geralmente cinzas claros sobre branco, ou tons médios sobre escuro — o APCA é em quem confiar com os seus olhos.
O contraste se aplica a botões desabilitados e a texto de placeholder?
Controles desabilitados são isentos do WCAG 1.4.3 sem discussão. Texto de placeholder não é: é texto, carrega informação e precisa de 4.5:1 como qualquer outro corpo de texto. O padrão comum de placeholder cinza em torno de 2.5:1 reprova, e reprova exatamente nas pessoas que mais precisam da dica.
Funciona com uma cor com transparência?
Sim. Informe um hex de 8 dígitos ou um valor rgba e o primeiro plano é composto sobre o fundo antes de a razão ser calculada, que é o que o navegador pinta. A cor composta é exibida para você ver o valor a que a razão realmente se refere.