AA ou AAA: qual contraste buscar

A diferença é de exigência. No contraste AA, o texto comum precisa de pelo menos 4,5:1 contra o fundo. No AAA, precisa de pelo menos 7:1. Para texto grande, o AA pede 3:1 e o AAA pede 4,5:1. Na prática, o AA é a meta que a maioria dos sites assume, e o AAA é um reforço que você aplica onde der.

Esses números vêm da WCAG 2.1, o conjunto de diretrizes de acessibilidade do W3C. A WCAG 2.2 (outubro de 2023) é a versão atual e manteve os mesmos valores de contraste. Se você ainda não sabe como a razão de contraste é calculada, leia primeiro contraste WCAG: o que é e como medir.

O que significam A, AA e AAA

A WCAG organiza os critérios em três níveis de conformidade. O nível A é o mínimo. O AA inclui tudo do A e mais critérios. O AAA é o mais alto e inclui os dois anteriores.

O contraste aparece em dois critérios de texto:

• 1.4.3, Contraste (Mínimo), nível AA: 4,5:1 para texto comum e 3:1 para texto grande.
• 1.4.6, Contraste (Melhorado), nível AAA: 7:1 para texto comum e 4,5:1 para texto grande.

Existe ainda o critério 1.4.11, de nível AA, que exige 3:1 para ícones, bordas de campos e partes de gráficos. Ele é tratado em contraste em botões, ícones e campos.

De onde vêm o 4,5:1 e o 7:1

O W3C explica a lógica na página de apoio do critério AAA. O ponto de partida é um valor de 3:1, recomendado em um padrão americano de acessibilidade (ANSI). Quem tem visão em torno de 20/40 perde cerca de uma vez e meia a sensibilidade ao contraste. Multiplicando 3 por 1,5, chega-se a 4,5:1. O W3C explica que o mesmo raciocínio, aplicado a uma visão em torno de 20/80, leva a cerca de 7:1.

Ou seja, o AA foi pensado para quem tem perda moderada de visão, e o AAA vai um passo além. O W3C esclarece também que quem tem uma perda ainda maior costuma usar tecnologias assistivas, como ampliadores e filtros de contraste, e por isso o 7:1 atende principalmente quem tem baixa visão e não usa essas ferramentas.

Onde mirar o AAA e onde o AA basta

Meta realista para a maioria: AA em tudo, AAA no texto corrido sempre que a paleta permitir.

O motivo de não exigir o AAA em tudo está no próprio W3C. Na página sobre conformidade, a recomendação é que o nível AAA não seja exigido como política geral para sites inteiros, porque não é possível cumprir todos os critérios AAA em certos tipos de conteúdo. Isso vale para todos os critérios do nível, não só para cor. Mas cumprir o 7:1 num parágrafo é perfeitamente possível, e muitas vezes fácil.

Uma regra prática:

1. Cardápio, receita, bula, página de informação: texto longo, lido com atenção. Mire em 7:1.
2. Texto de apoio, legendas, rótulos curtos: garanta ao menos 4,5:1.
3. Títulos grandes: 3:1 é o piso do AA. Se a cor da marca permitir, suba para 4,5:1.
4. Ícones e bordas de campos: 3:1, que é a regra do AA.

Exemplo prático: escurecendo um cinza

Cinza costuma ser o ponto fraco. Veja como alguns tons se comportam sobre fundo branco #FFFFFF, com os valores calculados pela fórmula da WCAG:

Cor do texto	Contraste com branco	AA (texto comum)	AAA (texto comum)
#777777	cerca de 4,48:1	não passa	não passa
#767676	cerca de 4,54:1	passa	não passa
#6B7280	cerca de 4,83:1	passa	não passa
#595959	cerca de 7,00:1	passa	passa
#4B5563	cerca de 7,56:1	passa	passa

Imagine o site de uma floricultura de bairro. O texto de descrição dos buquês está em #6B7280, um cinza bonito e discreto. Ele passa no AA, mas não no AAA. Para chegar ao AAA, escureça o tom até o #4B5563, que dá cerca de 7,56:1 e continua parecendo cinza suave. Basta trocar a cor do texto corrido. Os títulos e os detalhes podem seguir com o tom anterior, se forem grandes ou se só precisarem do AA.

Como subir um cinza, passo a passo

1. Abra o verificador de contraste e digite o HEX do texto e o do fundo.
2. Veja a razão. Se estiver abaixo de 4,5:1, é falha de AA e precisa ser corrigida.
3. Se estiver entre 4,5:1 e 7:1, passou o AA. Decida se o texto é longo o bastante para valer o reforço.
4. Para subir, escureça a cor do texto aos poucos e meça de novo a cada ajuste. Em fundo escuro, o caminho é o contrário: clareie a cor do texto.
5. Registre o par aprovado. Assim ninguém troca o tom sem querer na próxima atualização.

Mal-entendidos sobre o selo AAA

Dizer que o site é AAA porque o texto passou. A conformidade AAA exige todos os critérios AAA da página, e não só o de contraste. O texto passar nos 7:1 é ótimo, mas não dá direito ao rótulo.

Achar que 4,5:1 é “quase 7:1”. Os dois níveis são calibrados para perdas de visão diferentes. O AA não é uma versão fraca do AAA, é outro patamar de exigência.

Arredondar. O W3C deixa claro que um valor como 4,499:1 não atinge o mínimo de 4,5:1. Meça com precisão e não arredonde para cima.

Usar o limite maior de texto grande sem checar o tamanho. O que conta como texto grande é definido por tamanho e peso da fonte. Veja contraste em texto grande e texto pequeno.

Quando a cor da marca é clara demais para texto

Acontece com laranjas, amarelos e verdes claros. Duas saídas, sem mexer na identidade:

• Use a cor da marca como fundo e coloque nela um texto escuro. O coral #E9724C com texto #2B1B17 dá cerca de 5,49:1.
• Mantenha a cor clara para áreas grandes e decorativas, e use uma versão mais escura dela para texto e links. Um vermelho-tijolo como #B8431F sobre branco dá cerca de 5,44:1, enquanto o coral sozinho sobre branco dá só 3,01:1.

Quando a escolha final estiver feita, simule o uso real da paleta. O artigo como testar uma paleta antes de usar traz um roteiro simples.