Contraste

Boas-vindas à aula sobre contraste. Esta aula pode ser lida gratuitamente, sem conta, então ela também é o melhor jeito de ver como todas as aulas do curso são construídas: um ou mais critérios de uma diretriz da WCAG e, dentro de cada um, as mesmas cinco partes, terminando em como testá-lo.

Contraste é o critério de acessibilidade de que todo mundo já ouviu falar, e a falha mais comum da web: ano após ano, grandes estudos automatizados das páginas iniciais mais populares encontram texto com pouco contraste na grande maioria delas. Ele também é Nível AA, não Nível A, o que surpreende quase todo mundo na primeira vez.

Esta aula cobre os dois critérios de contraste da diretriz 1.4 Discernível: um para texto, e outro para todo o resto que você precisa enxergar.

1.4.3 Contraste (Mínimo)

O que ele exige

Textos, e imagens de texto, têm uma razão de contraste de pelo menos 4,5:1 contra o fundo. Texto grande precisa de pelo menos 3:1.

A razão de contraste é um número de 1:1 (a mesma cor duas vezes) a 21:1 (preto no branco), calculado a partir da luminância relativa das duas cores. Você nunca calcula isso à mão: um verificador de contraste faz por você.

"Texto grande" tem um significado preciso: pelo menos 18 pontos (cerca de 24 pixels CSS), ou pelo menos 14 pontos em negrito (cerca de 18,66 pixels CSS em negrito).

📖 Understanding 1.4.3 Contrast (Minimum) (em inglês)

Quem ele ajuda

• Pessoas com baixa visão, para quem um texto claro se mistura ao fundo
• Pessoas com daltonismo, que podem enxergar menos diferença entre duas cores do que a pessoa que desenhou a tela
• Pessoas idosas, já que a sensibilidade ao contraste diminui com a idade
• Todo mundo lendo o celular na rua, sob sol forte, ou em uma tela barata ou com o brilho baixo

Antes 🚫 / Depois ✅

Texto do corpo. Texto cinza no branco é a falha clássica.

<!-- Antes 🚫: #999999 no branco dá 2,85:1 -->
<p style="color: #999999; background: #ffffff;">
  Devolução grátis em até 30 dias.
</p>

<!-- Depois ✅: #595959 no branco dá 7,0:1 -->
<p style="color: #595959; background: #ffffff;">
  Devolução grátis em até 30 dias.
</p>

O limite não é arredondado. #777777 no branco dá 4,48:1, e falha: 4,48 é menor que 4,5, por mais perto que pareça. #767676, um tom mais escuro, dá 4,54:1 e passa. Quando um verificador mostra "4,5" com uma casa decimal, olhe a segunda.

Texto de placeholder. Texto de placeholder é texto, então, se ele traz informação ("ex.: nome@exemplo.com"), precisa de 4,5:1. Muitos cinzas padrão de placeholder não chegam lá.

<!-- Antes 🚫: um placeholder claro é a única dica do formato esperado -->
<style> input::placeholder { color: #aaaaaa; } </style>
<label for="email">E-mail</label>
<input id="email" placeholder="nome@exemplo.com">

<!-- Depois ✅: a dica é texto de verdade, com contraste suficiente, e continua visível -->
<label for="email">E-mail</label>
<p id="email-hint" style="color: #595959;">Por exemplo, nome@exemplo.com</p>
<input id="email" aria-describedby="email-hint">

Texto sobre uma imagem. Meça o contraste contra a parte mais clara da imagem atrás de um texto claro (ou a mais escura atrás de um texto escuro), não uma média. Uma camada escura semitransparente atrás do texto, ou um fundo sólido no bloco de texto, é a correção de costume.

Exceções

• Texto grande precisa de apenas 3:1. Confira primeiro o tamanho e o peso, depois escolha o limite
• Texto incidental: texto em um controle inativo (desabilitado), texto que é pura decoração, texto que ninguém vê e texto que faz parte de uma imagem com outro conteúdo visual significativo (uma placa de rua em uma foto) não têm requisito de contraste
• Logotipos: texto que faz parte de um logo ou de um nome de marca não tem requisito de contraste

👨🏻‍🏫 "Desabilitado" é a exceção em que os times mais se apoiam, e ela só cobre controles que de fato não podem ser usados naquele momento. Um botão com estilo cinza claro para parecer "secundário", mas totalmente clicável, não está desabilitado. Ele precisa de 4,5:1 como qualquer outro texto.

Como testar

1. Rode o seu scanner primeiro. Este é o critério em que o axe-core é melhor: ele mede o contraste de todos os textos em segundos. Corrija o que ele reportar
2. Depois procure o que ele não consegue medir, e confira cada caso com um verificador de contraste ou um conta-gotas:

- texto sobre imagens, gradientes e vídeos - texto em elementos sobrepostos a outros (cabeçalhos fixos, cards, modais) - texto que só aparece em um estado: hover, foco, selecionado, erro, placeholder e texto de tooltip - imagens de texto: banners, botões e infográficos com texto embutido na imagem

1. Para cada um, decida se o texto é grande (24 pixels CSS, ou 18,66 em negrito) para escolher entre 4,5:1 e 3:1
2. Confira se uma exceção realmente se aplica: aquele controle está mesmo desabilitado? Aquele texto faz mesmo parte de um logo?

Automatizável: em parte. A regra color-contrast do axe-core confere a maioria dos textos contra um fundo sólido, e marca texto sobre imagens, gradientes e elementos sobrepostos como "needs review" (precisa de revisão), o que significa que uma pessoa precisa conferir. Ela não confere imagens de texto, e só confere estados (hover, foco, erro) se o seu teste colocar a página nesse estado antes de escanear.

1.4.11 Contraste Não textual

O que ele exige

Dois tipos de coisas que não são texto precisam de uma razão de contraste de pelo menos 3:1 contra as cores ao lado delas:

1. Componentes de interface: a informação visual necessária para identificar um componente e os seus estados. A borda de um campo de texto quando é a borda que mostra onde digitar, a caixa de uma caixa de seleção e a sua marca, as posições ligado e desligado de um interruptor, o indicador de foco
2. Objetos gráficos: as partes de um gráfico necessárias para entender o conteúdo. As linhas e barras de um gráfico, as fatias de um gráfico de pizza, um ícone que carrega significado sozinho

📖 Understanding 1.4.11 Non-text Contrast (em inglês)

Quem ele ajuda

• Pessoas com baixa visão, que não encontram um campo de texto cuja borda clara some na página, nem distinguem uma caixa de seleção marcada de uma desmarcada
• Pessoas com daltonismo, lendo um gráfico cujas linhas têm brilho parecido
• Todo mundo em uma tela ruim, sob o sol, ou com o brilho baixo

Antes 🚫 / Depois ✅

Um campo de texto. Quando a borda é a única coisa que mostra onde o campo está, a borda precisa de 3:1.

<!-- Antes 🚫: #d1d5db no branco dá 1,47:1, então o campo quase desaparece -->
<style> input { border: 1px solid #d1d5db; background: #ffffff; } </style>
<label for="city">Cidade</label>
<input id="city">

<!-- Depois ✅: #8a8a8a no branco dá 3,45:1 -->
<style> input { border: 1px solid #8a8a8a; background: #ffffff; } </style>
<label for="city">Cidade</label>
<input id="city">

Um estado. Um interruptor que mostra "ligado" com uma trilha verde clara, #4caf50, contra a página branca (2,78:1), e "desligado" com uma trilha cinza clara. Escureça a cor de "ligado" (#2e7d32 dá 5,13:1 contra o branco) e acrescente uma segunda pista, como a posição do botão ou um rótulo "Ligado", para que o estado não dependa de um único tom (essa segunda pista também é o que o critério 1.4.1 Uso de Cores pede, no Nível A).

Um gráfico. Um gráfico de linhas cujas quatro linhas são tons pastel claros no branco. Cada linha que carrega dados precisa de 3:1 contra o fundo. Fatias vizinhas de um gráfico de pizza precisam de 3:1 entre si, ou de uma borda visível entre elas, a menos que cada fatia também traga o seu valor escrito.

Exceções

• Componentes inativos: um controle desabilitado não tem requisito, assim como o texto desabilitado no critério 1.4.3
• Aparência definida pelo navegador: uma caixa de seleção nativa ou um anel de foco padrão, sem modificação da pessoa autora, são responsabilidade do navegador. Quando a página muda o estilo deles, a responsabilidade passa a ser da página
• Apresentação essencial: quando as cores são a própria informação, como em um mapa de calor, uma fotografia, uma bandeira ou uma captura de tela da interface de outra pessoa
• Nem tudo precisa de 3:1. Um botão identificado pelo seu texto não precisa que o fundo contraste com a página, porque o texto (conferido pelo critério 1.4.3) já o identifica. E um gráfico que também mostra os seus dados em texto, como um gráfico com o valor escrito em cada barra, não depende do contraste das barras

👨🏻‍🏫 Indicadores de foco são o caso para lembrar. Um anel de foco personalizado em uma cor clara, que mal se diferencia do estado sem foco, falha aqui, no critério 1.4.11, mesmo o foco estando tecnicamente "visível". A aula sobre foco volta a isso com o critério 2.4.7.

Como testar

1. Liste o que você precisa ver para usar a página: bordas de campos, caixas de seleção, botões de opção, interruptores, controles deslizantes, indicadores de foco, ícones sem texto e as partes com significado de gráficos e diagramas
2. Para cada um, encontre as cores que o tornam identificável, e as cores ao lado delas (normalmente o fundo), e meça a razão com um conta-gotas
3. Confira cada estado também: marcado e desmarcado, ligado e desligado, selecionado ou não, com foco ou sem foco
4. Decida se uma exceção se aplica: está desabilitado? Sem modificação da página? Identificado por texto de qualquer jeito?

Automatizável: não. O axe-core não tem regra para contraste não textual. Bordas, ícones, estados, indicadores de foco e linhas de gráficos são todos conferidos no olho e com um conta-gotas.

Experimente você mesmo 🔍

1. Rode um scanner automatizado em um site que você usa com frequência e anote quantos problemas de contraste ele reporta. Depois encontre dois que ele marca para revisão, ou deixa passar, e meça você mesmo
2. Encontre um formulário com estilo "minimalista" e confira o contraste das bordas dos campos, das caixas de seleção e dos placeholders contra a página
3. Encontre um gráfico em um site de notícias ou em um dashboard. Você conseguiria distinguir cada linha ou fatia se tudo ficasse um pouco mais escuro ou mais claro? Meça a mais clara

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta aula, publique o seguinte no LinkedIn.

Estou fazendo o curso "WCAG 2.2 Nível AA" com @Bruno Pulis na @Talking About Testing School, onde aprendi que contraste é Nível AA, não Nível A: texto precisa de 4,5:1, ou 3:1 quando grande, e 4,48 falha (1.4.3 Contraste (Mínimo)), enquanto bordas de campos, caixas de seleção, indicadores de foco e linhas de gráficos precisam de 3:1 (1.4.11 Contraste Não textual). Um scanner confere a maioria dos textos, e nada do resto. #TalkingAboutTesting #TATSchool #WCAG22LevelAA #Accessibility #ColorContrast

👨🏻‍🏫 Lembre-se de me marcar na sua publicação. Aqui está meu perfil no LinkedIn.