← Voltar para todos os desafios

Dia 25: O analista de qualidade IA

Design bom é design para todos. Aprenda a usar plugins de IA para auditar e corrigir problemas de acessibilidade no seu projeto.

O que é acessibilidade?

Acessibilidade digital é a prática de criar produtos e sites que possam ser usados por todas as pessoas, independentemente de suas habilidades físicas, cognitivas ou situacionais. Isso inclui pessoas com deficiência visual, auditiva, motora e muito mais. Projetar com acessibilidade em mente não é apenas uma boa prática, é um sinal de empatia e profissionalismo.

O ponto de partida: contraste de cores

Um dos pilares mais fáceis de verificar e corrigir em acessibilidade é o contraste de cores. As diretrizes globais (WCAG) definem níveis mínimos de contraste entre o texto e seu fundo para garantir a legibilidade. O nível "AA" é o padrão de mercado para a maioria dos projetos.

Felizmente, não precisamos adivinhar. Existem plugins incríveis no Figma que usam IA para escanear seus designs e apontar exatamente quais textos não possuem contraste suficiente.

Plugins para ser seu analista de qualidade

Instale um desses plugins no seu Figma para automatizar a verificação de acessibilidade e receber sugestões de correção em segundos:

  • Stark: A ferramenta mais famosa e completa do mercado. Além de contraste, verifica tipografia, pontos de toque e muito mais.
  • Color Contrast Checker: Um plugin super simples e focado: você seleciona dois elementos e ele te diz se o contraste passa ou não.
  • Contrast: Outra ótima opção, que permite verificar o contraste de uma página inteira de uma vez e até simular como pessoas com diferentes tipos de daltonismo veriam seu design.

Seu desafio de hoje: a auditoria de acessibilidade

Sua missão é assumir o papel de um analista de qualidade e usar um plugin de IA para encontrar e corrigir problemas de acessibilidade no seu projeto de landing page.

Checklist do desafio:

  1. Instale um dos plugins de acessibilidade sugeridos (Stark é uma ótima escolha para começar).
  2. Execute o plugin na sua página de landing page completa (a que você montou no Dia 21).
  3. Identifique pelo menos dois problemas de contraste de cor que a ferramenta apontar.
  4. Corrija esses problemas, ajustando as cores do seu texto ou do fundo para que atinjam, no mínimo, o nível de conformidade AA.
  5. (Bônus) Use a função de simulação de daltonismo do plugin para ver como seu design é percebido por diferentes pessoas.

Concluiu? Mostre seu compromisso com a inclusão!

Projetar para acessibilidade é uma das habilidades mais importantes de um designer moderno. Compartilhe seu processo.