Contraste em botões, ícones e campos

Botões, ícones e campos precisam de pelo menos 3:1 de contraste contra as cores ao redor, segundo o critério 1.4.11 da WCAG 2.1. O texto dentro deles segue a regra do texto: 4,5:1 para texto comum. A parte visual que mostra “aqui tem um controle” segue a regra dos 3:1.

A WCAG é o conjunto de diretrizes de acessibilidade do W3C. O critério 1.4.11 chama-se “Contraste Não Textual” e é de nível AA, o mesmo nível que a maioria dos sites toma como meta. A WCAG 2.2 (outubro de 2023) é a versão atual e manteve esse valor de 3:1.

O que a regra cobre

O 1.4.11 exige 3:1 contra as cores adjacentes para duas coisas:

1. Componentes de interface. Segundo a página de apoio do W3C, é qualquer informação visual necessária para a pessoa identificar que um controle existe e saber como operá-lo. Também entram os estados do controle, como selecionado ou com foco.
2. Objetos gráficos. São as partes de um desenho ou gráfico que são necessárias para entender o conteúdo.

O foco do teclado também entra. Quem navega com a tecla Tab precisa enxergar qual elemento está ativo. O indicador de foco precisa ter contraste suficiente contra o fundo ao redor.

O que não precisa passar

• Componentes inativos. Um botão desativado (aquele “apagado”) está isento.
• Aparência definida pelo navegador. Se você não estilizou o controle e o visual vem do próprio navegador, a regra não cobra do autor.
• Texto. Ele tem a sua própria regra, a do critério 1.4.3. Texto dentro de um gráfico, por exemplo, continua precisando de 4,5:1 (ou 3:1 se for grande).
• Logotipos. Estão isentos, mas o W3C avisa que isso pode ser problema quando o logo funciona como controle, como um link ou botão.
• Efeito de passar o mouse. O W3C diz que tratamentos visuais extras de hover não são exigidos para identificar o estado de hover. Ele também não pode ser o único sinal de que o controle existe.

Se quiser entender como o número é calculado, veja contraste WCAG: o que é e como medir.

Botões: o que medir

Um botão tem duas partes, e a medição depende do desenho.

Botão com fundo preenchido. Meça o fundo do botão contra o fundo da página. Meça também o texto contra o fundo do botão.

Botão só com contorno (o “fantasma”). Aqui a borda é o que revela o botão, então ela precisa de 3:1 contra a página. O texto dentro continua pedindo 4,5:1.

Botão sem borda e sem fundo, só texto. Se não há mais nenhum sinal de que é clicável, a pessoa pode não perceber. O W3C diz que o limite visual só é exigido quando não existe outro jeito visual de identificar o controle. Se o texto está sublinhado, tem um ícone ou fica numa posição que denuncia a função, o texto sozinho pode bastar.

Exemplo prático: botão de uma papelaria online

Uma papelaria online quer um botão “Finalizar compra”.

1. Fundo do botão #7A2E8E, sobre página branca #FFFFFF: cerca de 8,05:1. Passa nos 3:1.
2. Texto branco #FFFFFF sobre o botão #7A2E8E: os mesmos 8,05:1. Passa nos 4,5:1 do texto comum.
3. Foco do teclado: um anel de 2 px em #14213D ao redor do botão. Sobre a página branca, ele dá cerca de 15,97:1. Passa.

Agora a versão que falha. Um segundo botão, “Continuar comprando”, tem só um contorno em #D1D5DB sobre o branco. O contraste é de cerca de 1,47:1. Ninguém com visão reduzida perceberia que é um botão. O conserto é escurecer a borda para #767676, que dá cerca de 4,54:1, ou preencher o botão.

Campos de formulário

O campo de texto é o caso mais negligenciado. Uma caixa com borda cinza-clara sobre fundo branco parece elegante, mas a borda é o único sinal de onde se digita.

O próprio W3C dá o exemplo: uma borda de caixa de seleção em #9D9D9D sobre branco tem 2,7:1 e não passa. A explicação é que a borda é necessária para identificar a presença do campo, então precisa de 3:1.

Um campo com fundo cinza e sem borda também pode passar, desde que o fundo do campo tenha 3:1 contra a página. Uma boa saída é a borda de baixo, em #767676, mais grossa e visível.

Não esqueça do texto de exemplo (placeholder) dentro do campo. Ele é texto e entra na regra de 4,5:1 do critério 1.4.3. Um cinza muito claro ali é um erro frequente.

Ícones que carregam significado

Ícone que carrega significado precisa de 3:1. A página do W3C cita um caso claro: a seta de uma lista suspensa. Se a seta é o que mostra que ali existe um menu, ela é necessária para entender o componente e precisa passar.

Já o ícone puramente decorativo, ao lado de um texto que diz tudo, não é obrigatório. Mesmo assim, é uma boa prática manter um contraste decente.

Uma dica para botões só com ícone, como lixeira, lupa ou carrinho: além do contraste, ponha um rótulo de texto ou uma descrição acessível. A cor sozinha não carrega o significado. Veja não use só a cor para passar informação.

Descuidos frequentes em botões e formulários

Medir o texto e esquecer a borda. O texto passa, o botão desaparece.

Cinza claro em estados. Os estados, como selecionado e com foco, também entram na regra do W3C. Se o único sinal de “marcado” é um tom de cinza muito próximo do fundo, a pessoa não vê a mudança.

Remover o contorno de foco. Tirar o anel azul padrão do navegador por estética sem pôr outro no lugar deixa o usuário de teclado perdido.

Testar só no modo claro. Em fundo escuro, as mesmas bordas mudam de contraste. Veja modo escuro: cuidados com o contraste.

Medidas para conferir no seu formulário

1. Fundo ou borda do botão: 3:1 contra o fundo da página.
2. Texto do botão: 4,5:1 contra o fundo do botão.
3. Borda do campo: 3:1 contra o fundo.
4. Texto de exemplo do campo: 4,5:1.
5. Ícones com significado: 3:1.
6. Foco do teclado: visível e com 3:1.