Contraste de cor e WCAG 2.2 AA: guia prático para quem cria cursos

O contraste de cor é a falha de acessibilidade mais comum na web — ano após ano, pesquisas automatizadas das principais páginas iniciais encontram texto de baixo contraste em mais de quatro em cada cinco delas — e também é uma das questões mais fáceis de corrigir. Para instrutores, acertar o contraste significa que alunos com baixa visão, pessoas com deficiências de visão de cor (cerca de 1 em cada 12 homens) e qualquer pessoa lendo em uma tela de telefone brilhante sob luz solar intensa podem realmente ler seu conteúdo. Este guia explica os requisitos de contraste WCAG 2.2 AA em linguagem simples — as proporções 4.5:1 e 3:1, o que conta como texto "grande" e as regras frequentemente esquecidas para botões, ícones e gráficos — e depois mostra exatamente como medir o contraste e corrigir falhas sem comprometer sua marca.

O que a proporção de contraste realmente mede

Uma proporção de contraste é um número que descreve a diferença na luminância relativa (brilho percebido) entre duas cores — tipicamente texto e o fundo atrás dele. Vai de 1:1 (idêntico, invisível) a 21:1 (preto puro sobre branco puro). Não se trata de matiz: duas cores podem parecer muito diferentes e ainda ter baixo contraste se forem igualmente brilhantes (pense em texto azul médio sobre fundo verde médio).

É por isso que você não pode confiar apenas no olho. Uma cor que parece boa para você em um monitor calibrado em um escritório escuro pode ser ilegível para um aluno com baixa visão em um telefone barato ao ar livre. O WCAG transforma o julgamento em um limiar mensurável para que seja testável e objetivo.

As proporções de contraste que você realmente precisa

Para o Nível AA, estes são os limiares a atingir:

• 4.5:1 — mínimo para texto normal (WCAG 1.4.3).
• 3:1 — mínimo para texto grande, definido como 18.66px em negrito ou 24px regular e acima (cerca de 14pt em negrito / 18pt regular).
• 3:1 — mínimo para contraste não textual (WCAG 1.4.11): as partes significativas de componentes da interface do usuário, como bordas de entrada, estados de alternância e as formas essenciais de ícones, além de gráficos necessários para entender o conteúdo.

O Nível AAA eleva o texto do corpo para 7:1, o que vale a pena almejar em leituras longas e é confortavelmente alcançável com texto quase preto sobre branco. Mas o AA é a base legal, e atingi-lo consistentemente em todo um curso é o objetivo realista. Note que logotipos e elementos puramente decorativos estão isentos — as regras visam o conteúdo que os alunos precisam ler ou operar.

Os erros de contraste que os instrutores mais cometem

Quase todas as falhas se concentram em um punhado de padrões, e uma vez que você os conhece, você os verá em todos os lugares:

• Texto cinza claro sobre branco — elegante em um mockup, ilegível para muitos. Legendas cinza sobre cinza e metadados fracos são infratores frequentes.
• Botões de cor da marca com texto branco, onde a cor da marca é muito clara para atingir 4.5:1 — extremamente comum com paletas de marca pastel ou neon.
• Texto sobre imagens ou vídeos sem scrim ou overlay, de modo que o contraste muda a cada quadro e falha em algum lugar.
• Texto de espaço reservado usado como rótulos — geralmente muito fraco, e desaparece uma vez que o campo é preenchido.
• Significado apenas de cor — "clique no botão verde" ou vermelho/verde passar/falhar sem ícone ou texto, o que também falha no WCAG 1.4.1 (uso de cor).
• Gráficos de baixo contraste onde segmentos adjacentes são indistinguíveis, especialmente para espectadores daltônicos — adicione rótulos ou padrões.

Como medir o contraste

Você nunca precisa adivinhar. Use qualquer uma dessas ferramentas gratuitas:

• DevTools do navegador — Chrome e Firefox mostram a proporção de contraste diretamente no seletor de cores e no inspetor de acessibilidade, incluindo uma linha de aprovação/reprovação.
• WebAIM Contrast Checker — cole dois valores hexadecimais e obtenha a proporção exata, além de aprovação/reprovação para AA e AAA, texto normal e grande.
• axe-core / Lighthouse — varreduras automatizadas sinalizam todas as falhas de contraste em uma página inteira de uma vez, o que é ideal para auditar um curso existente.
• Simuladores de daltonismo — visualize sua paleta sob deuteranopia, protanopia e tritanopia para detectar gráficos e cores de status que colapsam.

Faça do contraste uma etapa rotineira em sua auditoria de curso em vez de uma surpresa de último dia — é muito mais barato corrigir um token do que recolorir 40 aulas.

Como corrigir o contraste sem arruinar sua marca

Contraste e bom design não estão em conflito; você só precisa de um sistema em vez de ajustes pontuais:

• Escureça o texto, não toda a paleta. Um tom ligeiramente mais escuro da cor da sua marca, usado especificamente para texto, muitas vezes passa enquanto permanece reconhecivelmente na marca.
• Reserve tons claros da marca para fundos e acentos, nunca para texto do corpo ou ícones críticos.
• Adicione um scrim ou overlay atrás do texto em imagens para que a proporção seja estável, independentemente da foto.
• Combine cor com forma, ícone ou texto para que o significado nunca dependa apenas da cor.
• Defina tokens de cor acessíveis uma vez — um sistema de design verificado por contraste (cor do texto, cor do botão, cor do link, cor do foco) significa que cada nova aula começa em conformidade e nenhum instrutor precisa re-testar.
• Mantenha uma variante de modo escuro e alto contraste em mente, já que os mesmos tokens precisam passar em ambos os fundos.

Uma mudança de mentalidade torna tudo isso mais fácil: pare de pensar no contraste como uma decisão por elemento e comece a pensar nele como uma propriedade do seu sistema de design. Uma marca tem dezenas de combinações de cores possíveis, mas um curso só precisa de algumas — texto do corpo, títulos, links, botões, bordas, foco e alguns acentos. Defina-os uma vez, prove que cada um passa, e a pergunta "isso passa no contraste?" é respondida antes que qualquer aula seja escrita. Os instrutores que usam seus modelos nunca precisam pensar em proporções, que é exatamente como deve ser: acessibilidade que é invisível para as pessoas que produzem conteúdo porque está embutida nas ferramentas que elas começam a usar.

Contraste no modo escuro, em vídeo e em gráficos

Três contextos merecem atenção especial porque uma paleta que passa em um pode falhar em outro. Modo escuro inverte o problema: agora você precisa de texto claro em fundos escuros para atingir 4.5:1, e branco puro sobre preto puro pode ser desconfortavelmente agressivo — um branco ligeiramente suavizado é mais confortável e ainda está em conformidade. Se você oferecer temas claros e escuros, cada token precisa passar em ambos.

Texto sobre vídeo ou imagens é o caso mais difícil porque o fundo muda constantemente. Você não pode garantir contraste contra um quadro desconhecido, então adicione um scrim semi-opaco atrás do texto ou coloque o texto em um painel sólido. O texto das legendas especificamente deve estar em um fundo sólido ou semi-opaco para ser legível em qualquer cena.

Gráficos e visualização de dados falham de uma maneira diferente: segmentos adjacentes que são distintos em cor, mas semelhantes em brilho, tornam-se indistinguíveis para espectadores daltônicos, e uma legenda que depende apenas de cor falha no 1.4.1. Corrija isso adicionando rótulos diretos, padrões ou texturas, garantindo 3:1 entre áreas significativas adjacentes e testando o gráfico através de um simulador de daltonismo.

Construa um sistema de cores acessível em cinco etapas

A correção duradoura para o contraste é um pequeno sistema de cores testado em vez de ajustes por página. Aqui está uma sequência prática:

1. Escolha uma cor de texto que passe no seu fundo principal. Comece com quase preto sobre branco (ou quase branco sobre seu fundo escuro) e só clareie/escureça até que você esteja confortavelmente além de 4.5:1.
2. Derive uma tonalidade "texto da marca" acessível. Se a cor da sua marca for muito clara para texto, defina uma variante mais escura usada especificamente para links e ênfase que ainda seja percebida como sua marca.
3. Defina tokens de botão. Escolha um fundo de botão escuro o suficiente para que o texto do rótulo branco (ou escuro) alcance 4.5:1, e uma cor de foco claramente visível que atenda a 3:1 contra cores adjacentes.
4. Defina um token de UI/borda em 3:1. Bordas de entrada, alternadores e formas de ícones precisam de contraste não textual (1.4.11), então não os deixe desaparecer no fundo.
5. Teste todo o conjunto uma vez, depois reutilize-o. Passe cada par de tokens por um verificador de contraste, salve os valores e construa todas as aulas a partir deles. O novo conteúdo é então compatível por construção.

Almeje AA em todos os lugares e AAA (7:1) em texto longo onde puder — custa pouco com texto quase preto e melhora visivelmente a legibilidade para todos.

Um fluxo de trabalho eficiente para teste de contraste

Verificar o contraste cor por cor não escala para um curso com dezenas de aulas. Um fluxo de trabalho mais rápido testa o sistema uma vez e depois verifica o conteúdo pontualmente:

1. Audite os tokens de design, não cada página. Se suas cores de texto, link, botão, borda e foco passarem contra seus fundos, a vasta maioria do seu conteúdo passa automaticamente.
2. Execute uma varredura automatizada de página inteira com axe-core ou Lighthouse em uma aula representativa, um questionário e o painel — isso revela falhas de contraste em massa com os elementos exatos nomeados.
3. Verifique pontualmente os tipos de conteúdo arriscados manualmente: texto sobre imagens, gráficos, emblemas e pílulas de status, e quaisquer cores escolhidas pelo instrutor.
4. Simule daltonismo em qualquer coisa que use cor para transmitir significado.
5. Re-teste apenas o que muda. Como os tokens são fixos, você geralmente precisa verificar novas cores personalizadas, não toda a biblioteca novamente.

Incorpore isso em sua lista de verificação de publicação para que o contraste seja verificado antes de uma aula ser publicada, não depois que um aluno reclamar. O custo da prevenção é de alguns minutos; o custo da remediação é recolorir um curso inteiro.

Referência rápida: proporções, verificações e correções

Mantenha este resumo à mão sempre que escolher uma cor ou revisar uma aula:

• Texto normal: pelo menos 4.5:1 (AA). Almeje 7:1 (AAA) em leituras longas onde puder.
• Texto grande (24px regular / 18.66px em negrito): pelo menos 3:1.
• Componentes de UI e formas significativas de ícones/gráficos: pelo menos 3:1 (contraste não textual).
• Logotipos e elementos decorativos: isentos.
• Nunca dependa apenas da cor: combine-a com texto, um ícone ou um padrão.
• Meça, não adivinhe: WebAIM Contrast Checker, DevTools do navegador ou axe-core/Lighthouse para varreduras de página inteira.
• Corrija no nível do token: escureça tons de texto, reserve tons claros para fundos, adicione scrims atrás de texto em imagens e teste o sistema uma vez.

Quando o AAA vale o esforço extra? Em leituras densas e longas — documentação, transcrições, aulas extensas — onde a proporção mais alta de 7:1 reduz visivelmente a fadiga ocular para todos e é fácil de atingir com texto quase preto sobre branco. Para botões, rótulos e texto curto de UI, o AA sólido é o alvo pragmático. De qualquer forma, decidir uma vez no nível do sistema de design significa que cada criador herda cores acessíveis sem pensar nisso.

Como a Eduspera lida com o contraste para você

A Eduspera oferece temas verificados por contraste, então o texto padrão, botões e componentes já atendem ao WCAG 2.2 AA — e uma verificação de contraste de marca embutida avisa os proprietários da academia quando uma cor de marca escolhida falharia contra o branco, sugerindo uma alternativa acessível antes que chegue a um aluno. Os alunos também têm um modo de alto contraste dentro dos auxílios de leitura em toda a plataforma. O resultado: instrutores obtêm cursos na marca que permanecem legíveis, sem testar manualmente cada combinação de cores.

É tudo parte de uma plataforma com foco em acessibilidade testada contra WCAG 2.2 AA, com preço cerca de metade das grandes plataformas, com migração gratuita. Comece grátis ou leia o que torna um LMS genuinamente compatível.

Perguntas frequentes

Qual é o contraste mínimo de cor para WCAG 2.2 AA?

Para texto normal, o mínimo é 4.5:1. Para texto grande (18.66px em negrito ou 24px regular e acima) é 3:1. Componentes de UI e gráficos significativos também precisam de pelo menos 3:1 (contraste não textual, WCAG 1.4.11). O Nível AAA eleva o texto do corpo para 7:1.

O que conta como "texto grande" sob o WCAG?

Texto que tem pelo menos 24px (cerca de 18pt) regular, ou 18.66px (cerca de 14pt) em negrito. Texto grande só precisa de uma proporção de contraste de 3:1 em vez dos 4.5:1 exigidos para texto normal.

Como verifico a proporção de contraste de duas cores?

Use o WebAIM Contrast Checker, o seletor de cores do DevTools do seu navegador ou uma varredura automatizada com axe-core ou Lighthouse. Cole suas cores de primeiro plano e fundo para ver a proporção exata e se ela passa AA e AAA para texto normal e grande.

O contraste de cor se aplica a botões e ícones também?

Sim. O WCAG 1.4.11 exige pelo menos 3:1 de contraste para as partes significativas dos componentes da interface do usuário (como bordas de entrada e as formas essenciais dos ícones) e para gráficos necessários para entender o conteúdo — não apenas para texto. Logotipos e elementos puramente decorativos estão isentos.

A Eduspera verifica o contraste de cor automaticamente?

Sim. A Eduspera oferece temas verificados por contraste que atendem ao WCAG 2.2 AA por padrão e avisa os proprietários da academia se uma cor de marca escolhida falhar contra o branco, sugerindo uma alternativa acessível — além de um modo de leitura de alto contraste para alunos.