Você criou um post com texto sobre fundo rosa claro e achou elegante. Para 300 milhões de pessoas no mundo com algum grau de deficiência visual, aquele texto é ilegível. Você inseriu uma infografia com informações importantes representadas apenas por cores. Para 8% dos homens com daltonismo, metade da informação sumiu. Você não adicionou texto alternativo às imagens. Para usuários de leitor de tela, a imagem não existe. Acessibilidade não é nicho — é o critério que determina se o seu conteúdo chega às pessoas que mais precisam dele, ou fica invisível para elas.
Acessibilidade Não É Sobre Bondade — É Sobre Alcance
Existe uma forma errada e uma forma certa de enquadrar acessibilidade em design.
Forma errada: acessibilidade como obrigação moral ou conformidade legal — algo que você faz porque precisa, não porque quer.
Forma certa: acessibilidade como expansão de alcance — cada barreira de acessibilidade que você remove é um grupo de pessoas que consegue consumir seu conteúdo que antes não conseguia.
Deficiência visual afeta 2,2 bilhões de pessoas globalmente, incluindo baixa visão. Daltonismo afeta 8% dos homens e 0,5% das mulheres. Surdez e deficiência auditiva afetam 1,5 bilhão de pessoas. Deficiências motoras que afetam uso de mouse afetam centenas de milhões.
Esses números não são casos extremos — são parcelas significativas de qualquer audiência. Quando seu design é inacessível, você está literalmente excluindo pessoas da sua comunicação.
Para contextos profissionais — empresas, saúde, educação, serviços públicos — acessibilidade é também requisito legal crescente. A Lei Brasileira de Inclusão (Lei 13.146/2015) estabelece obrigações de acessibilidade que se estendem a comunicação digital.
Contraste de Cor: A Barreira Mais Comum e Mais Ignorada
Contraste é a diferença de luminosidade entre o texto e o fundo. Sem contraste suficiente, texto em telas luminosas (celulares ao sol, monitores baratos), em projetores de baixa qualidade, ou para pessoas com baixa visão ou daltonismo se torna ilegível.
O Padrão WCAG
O Web Content Accessibility Guidelines (WCAG) define dois níveis de contraste:
- AA (mínimo): razão de contraste 4,5:1 para texto normal, 3:1 para texto grande (acima de 18pt regular ou 14pt bold)
- AAA (ideal): razão de contraste 7:1 para texto normal, 4,5:1 para texto grande
Esses valores parecem abstratos — na prática, o que importa é verificar se o seu par texto/fundo passa ou não passa.
Como Verificar Contraste Sem Sair do Canva
O Canva não tem verificador de contraste nativo — mas você verifica em 30 segundos com ferramentas externas:
WebAIM Contrast Checker (webaim.org/resources/contrastchecker):
- Anote o HEX da cor do texto e do fundo no Canva
- Cole os dois valores no checker
- O resultado mostra Pass ou Fail para AA e AAA
Coolors Contrast Checker (coolors.co/contrast-checker): Interface mais visual que o WebAIM. Mostra o texto sobre o fundo em tempo real enquanto você ajusta.
Pares de Cor Com Contraste Problemático (Muito Comuns no Canva)
Combinações que parecem visualmente agradáveis mas falham no contraste:
- Texto cinza claro sobre fundo branco: parece elegante e minimalista, frequentemente falha AA
- Texto amarelo sobre fundo branco: falha AA em praticamente todos os tons de amarelo
- Texto rosa claro sobre fundo claro: paleta “aesthetic” muito popular no Canva, frequentemente inacessível
- Texto verde sobre fundo vermelho (ou vice-versa): par pior para daltonismo — as cores parecem iguais para quem tem deuteranopia (daltonismo mais comum)
- Texto laranja sobre fundo branco: muitos tons falham AA
Como Ajustar Contraste no Canva
Se o contraste falha, você tem três opções:
- Escurecer o texto: o texto mais escuro tem mais contraste sobre qualquer fundo claro
- Clarear ou escurecer o fundo: mover o fundo para o extremo mais próximo (branco puro ou preto puro) aumenta o contraste com texto intermediário
- Adicionar caixa atrás do texto: texto colorido sobre imagem frequentemente falha contraste — adicionar uma caixa sólida semitransparente ou sólida entre o texto e a imagem garante contraste suficiente
Daltonismo: Quando Cor É a Única Forma de Comunicar Informação
Usar cor como único meio de comunicar informação exclui pessoas com daltonismo — e frequentemente também exclui qualquer pessoa que vai imprimir em preto e branco ou visualizar em tela de baixa qualidade.
Exemplos comuns de problemas:
- Gráfico de pizza com fatias vermelha, verde e laranja sem legenda textual — para quem tem deuteranopia (confusão verde/vermelho), as três fatias têm a mesma cor
- Semáforo de status (“verde = aprovado, vermelho = reprovado”) sem ícone ou texto adicional
- Mapa de calor sem escala ou referência numérica
A regra: nunca use cor como único canal de informação. Sempre combine cor com:
- Legenda textual (além da cor, o nome ou valor)
- Ícone (além da cor vermelha, um X; além da verde, um ✓)
- Padrão ou textura (além da cor, um hachado diferente para cada categoria)
Teste de daltonismo: o site Coblis (color-blindness.com/coblis-color-blindness-simulator) simula como sua imagem aparece para diferentes tipos de daltonismo. Basta fazer upload do PNG exportado do Canva.
Tamanho de Fonte: O Mínimo Não É o Suficiente
O “mínimo legível” depende do contexto — dispositivo, distância, luminosidade, acuidade visual do leitor. O que é legível num monitor Full HD de 27 polegadas a 50cm pode ser ilegível num celular a 40cm de distância.
Referências práticas:
| Contexto | Tamanho Mínimo Recomendado |
|---|---|
| Post de Instagram (corpo) | 16pt (equivalente a ~48px em 1080×1080) |
| Post de Instagram (título) | 24pt+ |
| Apresentação (sala de reunião) | 20pt (corpo), 36pt (título) |
| Apresentação (auditório) | 28pt (corpo), 48pt (título) |
| Material impresso (leitura próxima) | 11pt (corpo), 18pt (título) |
| Certificado (informações secundárias) | 9pt mínimo absoluto |
Para idosos e pessoas com baixa visão: adicione 20-30% aos valores acima. Conteúdo voltado para público 60+ deve ter texto generosamente maior.
Alt Text: A Acessibilidade Que Não Aparece Para Quem Vê
Alt text (texto alternativo) é a descrição de uma imagem que leitores de tela leem para pessoas com deficiência visual. Sem alt text, a imagem não existe para essas pessoas — o leitor de tela diz algo como “imagem sem descrição” e segue.
Como Adicionar Alt Text no Canva
Para imagens individuais no Canva:
- Selecione a imagem
- Clique com botão direito →
Alt text - Escreva a descrição
Para PDFs exportados do Canva: o alt text adicionado no Canva é preservado na exportação PDF — verificável abrindo o PDF no Acrobat e usando Ferramentas > Acessibilidade.
Para imagens em redes sociais: o Instagram, Facebook e LinkedIn têm campos de alt text ao publicar. Adicione mesmo quando a plataforma torna opcional.
Como Escrever Alt Text Eficaz
Alt text não é legenda — é descrição funcional para quem não pode ver a imagem.
Ruim: “foto” Ruim: “foto de mulher sorrindo” Bom: “Mulher de aproximadamente 35 anos sorrindo, sentada numa mesa de trabalho com laptop, em ambiente de escritório com luz natural”
Para imagens decorativas (que não adicionam informação): use alt text vazio (alt="") — isso indica ao leitor de tela que a imagem é decorativa e deve ser ignorada, em vez de perder tempo descrevendo.
Para infográficos com dados: o alt text deve conter a informação principal do infográfico em forma de texto: “Gráfico de barras mostrando vendas trimestrais: Q1: R$120k, Q2: R$145k, Q3: R$98k, Q4: R$167k. Maior crescimento no Q4.”
Hierarquia Visual Como Acessibilidade
Hierarquia clara não é apenas estética — é acessibilidade cognitiva. Para pessoas com dislexia, TDAH, ou processamento visual diferente, a estrutura visual do documento determina se o conteúdo é compreensível ou incompreensível.
O que hierarquia acessível faz:
- Permite escanear o conteúdo antes de ler (saber onde estão as informações importantes)
- Cria pausas visuais que facilitam o processamento sequencial
- Reduz a carga cognitiva de “descobrir” a estrutura da informação
No Canva: use os níveis de texto (Título, Subtítulo, Corpo) de forma consistente e com diferença de tamanho clara entre os níveis. Nunca use apenas variação de cor para criar hierarquia — combine com variação de tamanho ou peso.
Checklist: Design Acessível no Canva
CONTRASTE
[ ] Par texto/fundo verificado no WebAIM Contrast Checker?
[ ] Texto normal passa AA (4,5:1) e texto grande passa AA (3:1)?
[ ] Texto sobre imagem tem caixa de suporte ou contraste verificado?
[ ] Evitou pares problemáticos (cinza sobre branco, amarelo sobre branco)?
DALTONISMO
[ ] Informação nunca comunicada apenas por cor?
[ ] Gráficos têm legenda textual além das cores?
[ ] Status/semáforos têm ícone ou texto além da cor?
[ ] Testou no simulador de daltonismo (Coblis)?
TIPOGRAFIA
[ ] Tamanho de fonte adequado para o contexto de visualização?
[ ] Hierarquia clara com diferença visível entre título, subtítulo e corpo?
[ ] Contraste de peso (bold vs regular) usado junto com contraste de tamanho?
ALT TEXT
[ ] Alt text adicionado em todas as imagens informativas no Canva?
[ ] Alt text é descrição funcional (não apenas "foto")?
[ ] Imagens decorativas marcadas com alt text vazio?
[ ] Alt text adicionado nas redes sociais ao publicar?
TL;DR
Acessibilidade é alcance — cada barreira que você remove é um grupo de pessoas que consegue consumir seu conteúdo.
Contraste: verifique o par texto/fundo no WebAIM Contrast Checker. Mínimo 4,5:1 para texto normal (AA). Pares problemáticos comuns: cinza sobre branco, amarelo sobre branco, rosa sobre bege. Solução: escurecer o texto, ajustar o fundo, ou adicionar caixa sólida atrás do texto sobre imagem.
Daltonismo: nunca use cor como único canal de informação. Combine cor com legenda textual, ícone ou padrão. Teste com simulador Coblis.
Tamanho de fonte: para posts de Instagram, mínimo 16pt no corpo. Para apresentação em sala, 20pt. Para auditório, 28pt. Para público 60+, adicione 20-30%.
Alt text: descrição funcional (não “foto”) de cada imagem informativa. Imagens decorativas com alt text vazio. Infográficos com dados incluem os dados no alt text.
Hierarquia visual: acessibilidade cognitiva — hierarquia clara com diferença visível de tamanho entre níveis, nunca apenas por variação de cor.