Contraste de cor nas redes sociais: as regras WCAG na prática

O texto de uma publicação nas redes sociais precisa de um rácio de contraste de pelo menos 4,5:1 em relação ao fundo, ou de 3:1 se o texto for grande. Estes são os valores da WCAG 1.4.3, e a W3C indica-os como 4,5:1 para texto normal e 3:1 para texto de 18 pontos ou mais, ou de 14 pontos a negrito. A WCAG foi escrita para conteúdo web, por isso aplicá-la ao texto dos seus gráficos do Instagram ou do LinkedIn é uma recomendação nossa, não uma regra das plataformas.

A seguir: a fórmula, o que cada nível da WCAG exige e rácios medidos em renderizações reais da nossa marca de demonstração AURORA. Para o sistema mais amplo, veja o nosso guia de diretrizes de marca para equipas pequenas.

A WCAG aplica-se às imagens das redes sociais?

Não diretamente. A WCAG abrange conteúdo web, e uma publicação no feed é uma imagem dentro da aplicação de outra entidade. Ainda assim, dois critérios fazem dela uma referência sensata. O 1.4.3 trata explicitamente as "imagens de texto" como texto, pelo que um título incorporado num PNG fica sujeito aos mesmos rácios que o texto real. E o 1.4.5 Images of Text (nível AA) prefere texto verdadeiro a imagens de texto, exceto quando a apresentação é essencial ou a imagem é personalizável, sendo os logótipos o exemplo clássico.

Na nossa experiência, as redes sociais raramente deixam publicar texto real sobre uma imagem, pelo que o 1.4.5 é a ressalva honesta: um gráfico com texto é sempre um compromisso. A nossa recomendação é manter o texto curto, repetir a mensagem principal na legenda, escrever texto alternativo e, mesmo assim, fazer com que os píxeis cumpram o 1.4.3.

Que rácio de contraste é preciso, por nível?

Critério	Nível	Texto normal	Texto grande	Aplica-se a
1.4.3 Contrast (Minimum)	AA	4,5:1	3:1	Texto e imagens de texto
1.4.6 Contrast (Enhanced)	AAA	7:1	4,5:1	Texto e imagens de texto
1.4.11 Non-text Contrast	AA	3:1	3:1	Componentes de interface e gráficos necessários para compreender o conteúdo

Na prática, três pormenores contam:

• Sem arredondamentos. A W3C diz que os valores calculados não se arredondam, pelo que 4,499:1 não cumpre 4,5:1.
• Isenções. Logótipos, texto puramente decorativo, controlos inativos e texto acidental em fotografias com outro conteúdo visual estão isentos.
• Gráficos. Um ícone, uma linha de gráfico ou o contorno de um botão que transmita significado precisa de 3:1 em relação ao que o rodeia, segundo o 1.4.11, enquanto o texto dentro do gráfico é avaliado pelo 1.4.3.

O texto grande define-se em pontos, que um PNG não tem. O nosso pressuposto de trabalho para um gráfico de 1080 px: considere grande um título claramente grande no ecrã de um telemóvel e trate tudo o resto, sobretudo as pequenas etiquetas e os rodapés, como texto normal que precisa de 4,5:1.

Como se calcula o rácio de contraste?

A fórmula vem das definições da WCAG. Converta cada canal de 8 bits para o intervalo de 0 a 1, linearize-o (divida por 12.92 quando o valor for no máximo 0.04045, caso contrário eleve (valor + 0.055) / 1.055 à potência 2.4) e depois pondere: luminância relativa L = 0.2126 R + 0.7152 G + 0.0722 B. O rácio é (L1 + 0.05) / (L2 + 0.05), sendo L1 a cor mais clara. Branco puro sobre preto puro dá 21:1, o máximo.

O verde tem a maior parte do peso, e é por isso que o verde vivo e o amarelo parecem claros e que um verde saturado pode ter força e, ainda assim, falhar sobre branco. A WebAIM diz o mesmo: o contraste tem a ver com a diferença de luminância, não com a diferença de tom.

O que medem as renderizações que passam?

Renderizámos quatro modelos da marca de demonstração AURORA em tamanho nativo e calculámos os rácios com a fórmula acima, a partir dos valores da paleta da marca e de píxeis amostrados nos PNG.

Quase preto #0A0A0A sobre branco-sujo #FAFAF7 mede 18,93:1. A pequena etiqueta cinzenta do rodapé usa #6F6F6F, e os seus píxeis amostrados mediram 4,81:1 em relação ao fundo. Cumpre os 4,5:1 por uma margem estreita e é texto minúsculo, por isso é o único elemento desta publicação que continuaríamos a vigiar.

Esta combina quase preto com dois preenchimentos claros diferentes. O título, a pequena etiqueta PASS e o texto branco-sujo da pílula sobre preto medem todos 18,93:1 nos píxeis amostrados. O pequeno logótipo AURORA está sobre o bloco verde, e quase preto sobre verde #00D084 mede 9,76:1. O verde é um bom preenchimento para texto escuro e uma cor fraca para o próprio texto; o par inverso, verde sobre quase preto, dá os mesmos 9,76:1 por simetria da fórmula.

O texto sobre um gradiente não tem um único rácio, por isso meça o pior ponto. A WebAIM refere que a WCAG não dá método para gradientes e sugere testar a zona de menor contraste. O título está num cartão fosco; amostrando todos os píxeis de fundo por baixo dele, o rácio mais baixo que obtivemos ficou entre cerca de 15 e 17, e a pequena etiqueta por cima de uma mancha mais verde ficou perto do limite inferior desse intervalo.

A opacidade também reduz o contraste. Este modelo define o texto corrente com 75% de opacidade; a cor de texto resultante mediu mais de 7:1 sobre o fundo pêssego, ainda bem acima de 4,5:1.

Texto	Fundo	Rácio	4,5:1	3:1
Quase preto #0A0A0A	Branco-sujo #FAFAF7	18,93	Passa	Passa
Cinzento suave #6F6F6F	Branco-sujo #FAFAF7	4,81	Passa	Passa
Quase preto #0A0A0A	Verde #00D084	9,76	Passa	Passa
Verde #00D084	Quase preto #0A0A0A	9,76	Passa	Passa
Título e etiqueta sobre o cartão em gradiente (valor mais baixo amostrado)	Gradiente fosco	cerca de 15 a 17	Passa	Passa
Texto corrente com 75% de opacidade	Gradiente de pêssego a rosa	acima de 7	Passa	Passa

Que combinações da nossa paleta falham?

As quatro renderizações passam porque as cores dos modelos estão bloqueadas numa paleta que foi verificada uma vez, e não de cada vez que alguém escreve uma publicação. Não renderizámos uma publicação reprovada: o motor nunca deixa um membro escolher uma cor má, e é esse o objetivo. Mas a mesma paleta contém pares que falhariam se alguém os usasse, calculados com a mesma fórmula:

Texto	Fundo	Rácio	4,5:1	3:1
Branco #FFFFFF	Verde #00D084	2,03	Falha	Falha
Branco-sujo #FAFAF7	Verde #00D084	1,94	Falha	Falha
Verde #00D084	Branco-sujo #FAFAF7	1,94	Falha	Falha
Laranja #FF6B35	Branco-sujo #FAFAF7	2,71	Falha	Falha
Cinzento suave #6F6F6F	Rosa #FFB3D1	3,02	Falha	Passa

A linha do branco sobre verde é a armadilha habitual. O texto branco sobre um verde de marca vivo parece bem num bom monitor e falha por mais de metade. As cores de destaque vivas ficam melhor como preenchimento para texto escuro, como no bloco verde da renderização acima.

Como verificar o contraste nos seus próprios gráficos?

1. Anote cada par de texto e fundo do seu modelo, incluindo etiquetas, rodapés e texto de botões.
2. Calcule cada rácio com a fórmula acima ou com qualquer verificador de contraste WCAG, usando valores hexadecimais exatos, nunca capturas de ecrã de imagens comprimidas.
3. Exija 4,5:1 ao texto normal. Aceite 3:1 apenas para texto claramente grande num telemóvel.
4. Para texto sobre gradientes ou fotografias, meça o pior ponto por baixo do texto ou coloque por trás um painel sólido ou semitransparente.
5. Verifique a opacidade: uma cor de texto a 60% é uma cor diferente.
6. Não dependa apenas da cor para transmitir significado, como vermelho contra verde para mau e bom (WCAG 1.4.1 Use of Color).
7. Volte a verificar quando a paleta da marca mudar, e não quando se escreve uma publicação.

É a tipografia que decide que texto conta como grande, por isso leia a seguir o nosso guia de tipografia para publicações nas redes sociais e veja os nossos princípios de composição para gráficos de redes sociais para colocar texto sobre zonas carregadas. Se quiser a verificação integrada no fluxo de trabalho, o Chikaboom bloqueia as cores dos modelos para que os membros preencham o texto sem as alterar; pode experimentá-lo na demonstração ao vivo.