1. O Que E WCAG e Por Que Importa

WCAG (Web Content Accessibility Guidelines) e o conjunto de diretrizes criado pelo W3C para tornar o conteudo web acessivel a pessoas com deficiencias visuais, auditivas, motoras e cognitivas. A versao 2.1 foi publicada em 2018 e e a referencia adotada pela maioria dos projetos e legislacoes de acessibilidade ao redor do mundo.

O contraste adequado de cores e um dos requisitos mais impactantes da WCAG: afeta diretamente pessoas com baixa visao, daltonismo, ou que usam dispositivos em ambientes com muita luz. Estima-se que cerca de 300 milhoes de pessoas no mundo tem algum grau de deficiencia visual cromatica.

2. Como a Relacao de Contraste E Calculada

A relacao de contraste segue a formula oficial da WCAG:

Contraste = (L1 + 0.05) / (L2 + 0.05)

Onde L1 e a luminancia relativa da cor mais clara e L2 da cor mais escura. A luminancia relativa e calculada a partir dos componentes RGB de cada cor usando a formula de linearizacao gamma da WCAG, que e justamente o que nossa ferramenta calcula.

3. Niveis AA e AAA na Pratica

A WCAG define tres niveis de conformidade (A, AA, AAA). Para contraste de cores, os niveis relevantes sao:

• AA: e o padrao minimo exigido pela maioria das leis de acessibilidade, incluindo a lei brasileira de acessibilidade digital (Lei 13.146/2015).
• AAA: e o nivel mais rigoroso, recomendado para textos criticos. Nem todos os textos precisam atingi-lo.

"Projete sempre buscando AA. Reserve AAA para elementos criticos como botoes de acao principal, mensagens de erro e instrucoes essenciais."

4. Texto Normal vs. Texto Grande

A WCAG trata texto grande com requisitos mais brandos porque e naturalmente mais facil de ler. Texto grande e definido como:

• 18pt (24px) ou maior em peso normal
• 14pt (aproximadamente 18.67px) ou maior em negrito (font-weight: 700+)

5. Integrando Verificacao no Fluxo de Design

As melhores praticas para garantir acessibilidade de contraste no desenvolvimento:

• Defina um sistema de cores com variantes de contraste verificadas desde o inicio do projeto
• Integre verificacao de contraste no design system, tokens de cor ja devem ser acessiveis por padrao
• Automatize a verificacao com ferramentas de lint como axe-core em pipelines de CI/CD
• Teste em diferentes monitores e condicoes de iluminacao, nao apenas em telas calibradas

6. Perguntas Frequentes

Contraste se aplica a icones e graficos?

Sim. O criterio 1.4.11 da WCAG 2.1 (Nivel AA) exige relacao de contraste minima de 3:1 para componentes de interface e graficos informativos, como icones e bordas de campos de formulario.

Texto sobre imagens precisa atender WCAG?

Sim. O contraste e verificado em relacao ao fundo imediato do texto. Para texto sobre imagens ou gradientes, a cor de fundo mais critica (a que gera menor contraste) deve ser usada como referencia.

Texto decorativo precisa de contraste?

Nao. Texto puramente decorativo, sem nenhuma funcao informativa, e excluido dos requisitos de contraste da WCAG. O mesmo vale para logotipos e textos em imagens inativas.