O primeiro bug de acessibilidade que enviei foi um carimbo de data/hora cinza claro em um cartão branco. Parecia elegante no figma, parecia bem no meu monitor calibrado e era completamente invisível para um cliente lendo e-mail em seu telefone em um carro estacionado. Ele não foi deficiente visual. Era apenas luz solar. Esse único bilhete de suporte me ensinou algo que o modelo de design nunca poderia: o contraste não é uma questão de gosto, é uma propriedade mensurável e, se você não medir, está enviando suposições.
Desde então, construí o Verificador de contraste de cores no Toolz.dev, regras de contraste com fio nos tokens de design para WP Adminify, e auditado mais componentes React do que EU me importo de contar Este guia é a versão dessa experiência Eu gostaria que alguém tivesse me entregue no início Ele explica o que a taxa de contraste realmente é, como o número é calculado, o que o WCAG limiares significam e como corrigir um par de cores com falha sem jogar fora a paleta da sua marca.
tl;dr: O contraste WCAG é uma proporção de 1:1 a 21:1 com base na luminância relativa de duas cores. Para um corpo normal, você precisa de pelo menos 4,5:1 para passar AA e 7:1 para passar AAA. O texto grande (cerca de 24 px ou 18,66 px em negrito) cai para 3:1 para AA e 4,5:1 para AAA. não -Ui de texto como ícones e bordas de entrada precisa de 3:1. Meça todos os pares de texto com fundo, trate AA como a barra de passagem e deixe a ferramenta sugerir uma cor que passa ao longo do caminho.
Por que o contraste de cores é tão importante?
O contraste é a falha de acessibilidade mais comum na web. Ano após ano, as auditorias automatizadas das primeiras páginas iniciais constatam que o texto de baixo contraste é a violação mais frequente do WCAG por uma ampla margem. É também o que afeta a maioria das pessoas, porque não se refere apenas aos usuários que estão registrados. Trata-se de qualquer pessoa com visão reduzida da idade, qualquer pessoa com uma condição comum como catarata, qualquer pessoa que use uma tela barata, qualquer um em uma sala luminosa e cada um de nós quando o sol bater na tela.
Também existe um ângulo de negócios, e não vou fingir o contrário. A lei de acessibilidade agora faz referência ao WCAG diretamente em muitas regiões, o que significa que uma interface inacessível é uma exposição legal, não apenas um problema de cortesia. Mas a razão pela qual eu me importo e a razão pela qual construí uma ferramenta dedicada é mais simples. O texto que as pessoas não conseguem ler é um texto que falhou em seu único trabalho. Uma interface linda que ninguém pode usar não é uma conquista de design.
A armadilha é que nossos olhos não são narradores confiáveis. Nós nos adaptamos às nossas próprias telas, sabemos o que o texto deve dizer para que nosso cérebro o preencha e olhamos para os designs em condições ideais. A taxa de contraste remove tudo isso. Dá-lhe um número que não se importa com o seu monitor ou com as suas expectativas.
O que exatamente é uma relação de contraste?
A taxa de contraste é uma comparação da luminância relativa de duas cores: o primeiro plano (geralmente texto) e o plano de fundo. A luminância relativa é uma medida de quanta luz uma cor emite ou reflete, ponderada pela forma como o olho humano realmente percebe vermelho, verde e azul. O verde contribui mais para o brilho percebido, o menos o azul, e é por isso que o texto azul puro no preto é muito mais difícil de ler do que o verde puro.
A razão em si é definida pelo WCAG como:
(L1 + 0.05) / (L2 + 0.05)
onde L1 é a luminância relativa da cor mais clara e L2 é o do mais escuro. o 0.05 Os termos modelam a luz ambiente refletindo na tela, e é por isso que a escala nunca atinge o infinito. Cores idênticas produzem uma proporção de exatamente 1:1. O texto preto puro em branco puro dá o máximo de 21:1. Tudo o que vive real vive entre esses dois extremos.
O importante a internalizar é que a relação não é linear com a forma como o & quot; different" duas cores parecem no sentido de matiz Duas cores podem ser descontroladamente diferentes em matiz - digamos um vermelho saturado e um verde saturado - e ainda ter quase a mesma luminância, o que as torna um pesadelo para a legibilidade, mesmo que elas colidam violentamente O contraste é sobre a diferença de leveza, não a diferença de cor É exatamente por isso que você não pode olhar para ele, e por que o Verificador de contraste de cores Converte ambas as cores em luminância antes de fazer qualquer comparação.
Como o número é realmente calculado?
Se você quiser entender a ferramenta em vez de apenas confiar nela, aqui está o pipeline completo, que segue exatamente as definições do WCAG 2.2.
Primeiro, cada canal de cor é normalizado da faixa de 0 a 255 a 0 a 1. Em seguida, cada canal é linearizado para desfazer a curva gama sRGB. A fórmula aplica um pequeno segmento linear para valores muito escuros e uma curva de potência para o restante:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Em seguida, os três canais linearizados são combinados com os coeficientes de luminância que refletem a percepção humana:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Esses pesos não são arbitrários. Eles vêm da maneira como as células do cone dos olhos respondem a diferentes comprimentos de onda, e são por isso que o verde domina. Finalmente, os dois valores de luminância são conectados à fórmula de relação acima, com a mais leve no topo.
Há uma sutileza que faz tropeçar nas pessoas, e é transparência. Uma taxa de contraste só é significativa entre duas cores opacas, porque a aparência real de uma cor semitransparente depende de tudo o que está por trás dela. Se a cor do seu texto tiver um valor alfa, você não poderá medi-lo diretamente. A abordagem correta, e a que a ferramenta adota, é compor o primeiro plano translúcido sobre o fundo primeiro usando a mistura padrão de origem e, em seguida, medir a proporção em relação ao resultado achatado. Isso corresponde ao que um usuário realmente vê, em vez da cor que você definiu nominalmente.
Quais são os limites do WCAG que preciso atingir?
O WCAG define os requisitos de contraste em dois níveis de conformidade e para três tipos de conteúdo amplo. Aqui está a imagem inteira em um só lugar.
| Tipo de conteúdo | mínimo aa | AAA MÍNIMO |
|---|---|---|
| Texto normal (abaixo de ~ 24 px) | 4.5:1 | 7:1 |
| Texto grande (~24px ou ~18,66px em negrito) | 3:1 | 4.5:1 |
| Componentes e gráficos da interface do usuário | 3:1 | 3:1 (sem AAA separados) |
| Logotipos e texto incidental | isento | isento |
Algumas notas de ter aplicado esta tabela muitas vezes. "O texto grande" é definido pelo tamanho renderizado, não pela importância do texto. O limite é de 18 pontos para peso regular e 14 pontos em negrito, o que se traduz em aproximadamente 24 px e 18,66 px. Qualquer coisa acima ou acima de tudo isso obtém a barra 3:1 relaxada para AA, porque as formas maiores permanecem legíveis em um contraste mais baixo.
A regra UI-components é Critério de Sucesso 1.4.11, e é a que as equipes esquecem com mais frequência Diz o limite visual de um componente interativo - a borda de uma entrada de texto, o contorno de um botão, a forma de um ícone que transmite significado - precisa de 3:1 contra o seu entorno Uma forma cheia de texto de rótulo de passagem AA com bordas de entrada invisíveis ainda falha, e EU vi exatamente isso em produção mais de uma vez.
Finalmente, o texto decorativo, os controles desativados e os logotipos estão isentos. Essa isenção é estreita. Um rótulo de botão acinzentado é bom; um parágrafo de baixo contraste que você chamou de "secundária" não é.
Como usar o verificador de contraste de cores?
O fluxo de trabalho que uso diariamente demora cerca de dez segundos por par. abra o Verificador de contraste de cores e insira a cor do seu texto no primeiro campo Você pode colar qualquer formato - um hexadecimal de seis dígitos como #4b5563, um hexágono de oito dígitos com alfa, um rgb() ou rgba() corda, um hsl() valor ou uma palavra-chave CSS simples como navy. A ferramenta normaliza tudo o que você fornece, para que você possa misturar os formatos livremente entre os dois campos.
Insira sua cor de fundo no segundo campo. No momento em que ambos são válidos, a proporção exata aparece ao lado de uma amostra ao vivo de texto de legenda grande, normal e renderizado em seu plano de fundo real. Essa prévia é importante. O número informa se ele passa, mas ver palavras reais na cor real informa se é confortável, o que é uma barra mais alta do que apenas legal.
Abaixo da proporção você obtém uma grade de emblemas de aprovação e reprovação: AA e AAA para texto normal e grande, além da verificação de componente de UI de 3:1. Se uma combinação falhar, a ferramenta oferece uma correção de um clique Ele anda com a cor do texto mais clara ou mais escura no espaço HSL - preservando a tonalidade e a saturação que você escolheu - até limpar a proporção alvo, então entrega a você um valor de passagem que você pode copiar diretamente em sua folha de estilo Essa última parte é a diferença entre um verificador que repreende você e um que realmente ajuda: mantém a tonalidade da sua marca intacta e só move a luminosidade pelo mínimo necessário.
Tudo é executado localmente no seu navegador. Nenhuma cor, paleta ou valor inédito de marca deixa seu dispositivo, o que importa quando você está auditando o sistema de design de pré-lançamento de um cliente. É a mesma abordagem de privacidade que uso em todas as ferramentas do site, e escrevi sobre por que essa arquitetura é importante no Guia de privacidade de dados.
Casos de uso comuns de projetos reais
Auditando tokens de um sistema de design
Quando configuro tokens de cores para um novo projeto, verifico todos os pares semânticos antes de um único componente ser enviado: texto principal em segundo plano, texto silenciado em segundo plano, texto no primário, texto no cartão, texto em cada variante de alerta. Um token que falha quando falha em todos os lugares em que é usado, portanto, pegá-lo no nível do token é extremamente mais barato do que pegá-lo por componente. Eu mantenho uma lista simples e passo cada par pelo verificador, registrando a proporção ao lado do nome do token.
Resgatar uma cor de marca que "deve" ser usada
O marketing entrega a você uma marca azul e diz que os botões devem usá-la Você testa texto branco nela e obtém 3.1:1 - multa para texto grande, falhando por uma etiqueta de botão de tamanho normal Você tem três opções honestas: escurecer ligeiramente a marca azul para superfícies interativas, usar uma etiqueta maior ou mais ousada para que o limite 3:1 se aplique ou mudar a etiqueta para uma cor mais escura se o botão for claro O recurso de sugestão do tool' encontra a tonalidade de passagem mais próxima para que você possa mostrar ao marketing uma mudança concreta e mínima em vez de um plano & quot; não."
Verificando o espaço reservado e o texto auxiliar
O texto do espaço reservado é um reincidente porque os navegadores o rendem com opacidade reduzida por padrão e os designers escolhem um cinza já claro em cima disso. Lembre-se de testar o resultado composto, não a cor nominal. A composição alfa da damas faz isso para você: insira a cor do espaço reservado com sua opacidade real sobre o fundo de entrada e leia a relação verdadeira.
Verificando o ícone e a visibilidade da borda
Para a verificação da interface do usuário 1.4.11, testei o ícone ou a cor da borda em relação a tudo o que está imediatamente atrás dele. Uma divisória cinza em um cartão branco, uma divisa em um cabeçalho colorido, o anel de foco contra o campo - tudo isso precisa de 3:1. É uma verificação rápida que captura o " tudo está tecnicamente lá, mas posso & #39; t ver qualquer um deles & quot; classe de bug.
Como isso se compara a usar apenas uma verificação integrada da ferramenta de design?
As ferramentas de design adicionaram indicadores de contraste e as ferramentas de desenvolvimento do navegador mostram uma proporção no seletor de cores, portanto, uma pergunta justa é por que buscar uma ferramenta dedicada. Aqui está minha comparação honesta.
| aproximar-se | força | limitação |
|---|---|---|
| Verificador de contraste dedicado | Relação exacta, todos os limites, composição alfa, sugestões de cores passageiras, funcionam em qualquer cadeia de cor | Você cola cores manualmente |
| Plugin de ferramenta de design | Encare com sua prancheta | Freqüentemente se aproxima, pode ignorar alfa, vinculado a esse aplicativo |
| Ferramentas de desenvolvimento do navegador | Verifica a página renderizada ao vivo | Um par de cada vez, sem sugestões, exige que a página exista primeiro |
| olhando para ele | veloz | errado, constantemente |
A ferramenta dedicada ganha sempre que você estiver trabalhando a partir de valores em vez de uma página renderizada - revisando tokens, verificando uma especificação ou corrigindo um bug relatado - e sempre que precisar de uma alternativa passageira em vez de apenas um veredicto As ferramentas de desenvolvimento do navegador são melhores quando a página existe e você deseja verificar o que realmente enviei Eu uso ambos, em diferentes estágios.
Notas avançadas para equipes que se preocupam
Algumas coisas que aprendi que vão além do básico. Primeiro, o contraste é necessário, mas não suficiente. Passar 4,5:1 remove uma barreira; não torna uma interface acessível por conta própria. Você ainda precisa de estados de foco visíveis, você ainda deve evitar transmitir significado apenas com a cor e ainda precisa de testes reais com tecnologia de assistência real. Trate a proporção como um piso, não como uma linha de chegada.
Em segundo lugar, o modo escuro não é gratuito. Uma paleta que passa no modo claro pode falhar no modo escuro porque as relações de luminância se invertem. Verifique os dois temas. A alternância de visualização de fundo escuro do verificador existe precisamente porque eu continuei esquecendo.
Terceiro, tenha cuidado com o "Fechar o suficiente." Uma proporção de 4,48:1 é uma falha, não uma vitória de arredondamento. As telas variam, os usuários variam e o limite tem margem integrada por um motivo. Se você estiver limítrofe, passe por ele.
Se você estiver montando um kit de ferramentas mais amplo, o Guia do kit de ferramentas para desenvolvedores web Abrange como o contraste se encaixa ao lado de outras verificações que valem a pena ser automatizadas. E uma vez que suas cores passam, ferramentas como o gerador de gradiente e seletor de cores Ajudá-lo a construir o restante da paleta em uma base que você já verificou. Se você também estiver gerando metadados de página e visualizações sociais, o Gerador de meta tags Combina bem no mesmo passe de pré-lançamento.
FAQ
O que é uma boa relação de contraste de cores?
Para um corpo de texto normal, aponte para pelo menos 4,5:1 para atender a WCAG AA e 7:1 para atingir o nível AAA mais rígido. Texto grande, significando cerca de 24 px ou 18,66 px em negrito, só precisa de 3:1 para AA e 4,5:1 para AAA. Ícones e componentes interativos da interface do usuário precisam de pelo menos 3:1 em relação ao ambiente.
O que conta como texto grande em WCAG?
O texto grande é de pelo menos 18 pt, aproximadamente 24 px, para peso normal, ou pelo menos 14 pt, aproximadamente 18,66 px, quando em negrito. O texto igual ou superior a esse tamanho se qualifica para o limite AA relaxado de 3:1 porque as formas de letra maiores permanecem legíveis em um contraste mais baixo do que os pequenos.
Qual é a diferença entre WCAG AA e AAA?
AA é o nível que a maioria das leis e organizações visam e requer 4,5:1 para o texto normal. AAA é o nível aprimorado e requer 7:1, que se adequa a conteúdos voltados para usuários com baixa visão, mas é difícil de atingir em uma paleta inteira. A maioria das equipes trata o AA como a barra de passes e o AAA como uma aspiração por conteúdo de leitura crítica.
Como é calculado o índice de contraste?
Cada cor é convertida em sua luminância relativa WCAG, uma medida de brilho corrigida e perceptualmente ponderada. A razão é (L_Lighter + 0,05) dividida por (L_Darker + 0,05), produzindo um valor de 1:1 para cores idênticas a 21:1 para preto puro em branco puro.
A transparência afeta o resultado do contraste?
Sim. Uma cor de texto semitransparente permite que o fundo apareça, o que muda sua cor eficaz. O método correto é compor o primeiro plano translúcido sobre o fundo primeiro, depois medir a proporção, para que a pontuação reflita o que um usuário realmente vê em vez da cor nominal que você define.
Por que meu texto passa em tamanho grande, mas falha em tamanho normal?
Os limites diferem. O texto normal precisa de 4,5:1 para AA, enquanto o texto grande precisa apenas de 3:1, portanto, uma proporção entre 3 e 4,5 passagens para títulos, mas falha para cópia do corpo. Aumente o contraste para o corpo do texto ou certifique-se de que o emparelhamento só é usado em tamanhos grandes, onde o limite relaxado se aplica.
Uma taxa de contraste passageira é suficiente para acessibilidade?
não O contraste é necessário, mas não suficiente. Você também precisa de estados de foco visíveis, evite transmitir significados apenas pela cor e deve testar com conteúdo real e tecnologia assistiva. Passar a proporção remove uma barreira comum, mas não torna acessível uma interface.
O verificador de contraste de cores envia minhas cores para qualquer lugar?
não . Todas as análises e matemáticas executam localmente no seu navegador usando JavaScript. Nenhum valor de cor, paletas de marca ou capturas de tela são carregados ou armazenados, e a ferramenta continua a funcionar sem conexão de rede depois que a página for carregada.
