O que é a relação WCAG? Por que você deve implementá-lo em seus projetos

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) são diretrizes de acessibilidade para design digital e web. Seguir essas diretrizes garante que as cores sejam contrastadas o suficiente para ajudar as pessoas com deficiência visual a ver e ler seus designs corretamente. Isso também anda de mãos dadas com o tamanho tipográfico, para garantir sua legibilidade junto com as cores.

Em um mundo que deveria ser mais inclusivo, adicionar elementos acessíveis aos seus projetos apenas elevará seu trabalho e permitirá que você o compartilhe com mais pessoas.

O que é a relação WCAG?

WCAG significa Diretrizes de Acessibilidade de Conteúdo da Web. As WCAG ajudam qualquer pessoa que esteja projetando ou criando para a web ou internet a garantir que seus designs atinjam as metas de acessibilidade. Isso significa que seus designs podem ser apreciados e usados ​​por qualquer pessoa, sem excluir pessoas com deficiência visual ou outras deficiências, quando possível.

A proporção WCAG define as proporções mínimas para atingir a acessibilidade de destino. Isso inclui contraste de cores e tamanho do texto, os quais garantem que pessoas com deficiência visual tenham mais chances de ver, interagir e usar seus designs. Atingir a proporção WCAG não apenas ajuda as pessoas com deficiência visual, mas também aumenta a experiência do usuário para todos os usuários da web.

O World Wide Web Consortium desenvolve padrões para desenvolvimento web. Embora não haja regras definidas para acessibilidade na web, as WCAG estabelecem um padrão a ser seguido por qualquer web designer.

Ao testar as taxas de contraste, o WCAG sugere uma classificação de A a AAA. Uma classificação A mostra os níveis de contraste mais baixos. AA são níveis de contraste intermediários com uma proporção de 4,5:1—considerada a proporção mínima. Finalmente, AAA é o nível de contraste mais alto. Se estiver projetando para todos, seus níveis de contraste são melhores entre uma faixa AA e AAA.

Por que a proporção WCAG é importante em design gráfico e web?

O design gráfico e o web design não devem apenas tornar as informações bonitas. O design da informação informa as massas - isso significa tornar suas informações acessíveis a todos. A implementação das WCAG garante designs acessíveis para pessoas com deficiência visual, dislexia, neurodivergência ou qualquer coisa que afete a visão ou a capacidade de leitura de alguém.

Web e design digital - bem como programação - já estabeleceram recursos de acessibilidade. Por exemplo, O Windows fornece ferramentas úteis de acessibilidade para os usuários, e já é comum a maioria dos vídeos do YouTube oferecer legendas ou legendas. Mas sempre podemos melhorar a acessibilidade.

O design global cria um design melhor. Quanto mais pessoas puderem se envolver com seu design, mais bem-sucedido ele será e mais alcance terá. Além de ser bom para você, como designer, alcançar mais pessoas, é melhor para o mundo que menos pessoas sejam excluídas.

Projetar com a proporção WCAG e os recursos de acessibilidade em seus designs terá efeitos positivos nas paletas de cores, opções de tipografia e tamanhos de texto. Você não criaria propositalmente algo difícil de ler, então por que não incluiria mais maneiras de criar designs com melhor legibilidade para todas as pessoas?

Implementando a proporção WCAG em seus projetos

Existem lugares onde você pode verificar a proporção WCAG em seus designs, como este verificador de contraste local na rede Internet. Mas você deve praticar a implementação de recursos de design acessíveis em seu trabalho de qualquer maneira, sem depender do mínimo necessário.

Deve-se observar que as diretrizes de contraste não se aplicam ao design do logotipo. Isso ocorre porque os logotipos são apresentados em tamanhos variados e geralmente em fundos diferentes. No entanto, não faz mal considerar a proporção WCAG ao criar logotipos.

Cores de alto contraste

Usar cores de alto contraste é uma maneira fácil de adicionar inclusão aos seus designs. As cores que contrastam umas com as outras ajudarão as pessoas com deficiência visual e daltonismo a ver melhor seus designs. Não apenas isso, mas mesmo pessoas sem problemas de visão verão melhor - e se envolverão com - seus projetos.

Já tentou ler um texto rosa claro em um fundo verde claro? É quase impossível. Mas um texto azul escuro em um fundo amarelo claro é muito mais fácil de ver e ler.

Cores de alto contraste funcionam melhor ao colocar texto em um fundo colorido ou ao usar caminhos pequenos em suas ilustrações. Khroma é um gerador de paleta de cores AI que vem com um verificador de contraste embutido - um dos muitos grandes Ferramentas de IA para ajudar seu fluxo de trabalho de design gráfico.

Uma ótima maneira de verificar o contraste é transformar seu design em tons de cinza. Se você conseguir separar as cores e entender o design em preto e cinza, isso também deve se traduzir bem nas cores escolhidas.

Tamanho do texto

Juntamente com as cores do texto sendo contrastadas o suficiente com as cores de fundo, o texto em si deve ser grande o suficiente para ser lido facilmente. A proporção WCAG para tamanho de texto grande é 3:1.

O tamanho do texto não é igual em todas as tipografias, então não confie em um tamanho de 12 pontos – que normalmente é visto como o tamanho mínimo para legibilidade padrão – para todas as fontes. Teste-os você mesmo ou com testadores de usuários, exibindo ou imprimindo designs em tamanho real. Se suas cores não tiverem um contraste tão bom, um texto maior ajudará na legibilidade, como uma solução alternativa.

Legibilidade da fonte

Nem é preciso dizer, mas as fontes que você escolhe em seus designs precisam ser facilmente legíveis. Fontes decorativas, fontes cursivas ou fontes desenhadas à mão geralmente apresentam problemas de legibilidade. Bandas de heavy metal são famosas por usar tipos de letra inerentemente difíceis de ler para os logotipos de suas bandas, por exemplo.

Você também deve considerar o kerning e o tracking ao usar seu texto para designs pequenos. O espaçamento entre letras também pode afetar a legibilidade pretendida das palavras.

Fatores de Acessibilidade Inclusiva

Embora apenas o contraste de cores, o tamanho da fonte e a legibilidade do texto no design da web sejam considerados nas proporções WCAG, você deve criar todos os seus designs gráficos e da web com a inclusão em mente.

Se você é um web designer trabalhando com um programador ou codificador, certifique-se de usando técnicas de HTML que auxiliam na acessibilidade da web. Há também recursos de acessibilidade no Canva para expandir o alcance de seus projetos com seu público.

Você não deve parar apenas nos requisitos mínimos para as proporções WCAG; se você tiver controle sobre a adição de texto alternativo a imagens, legendas a arquivos de áudio ou vídeo ou até mesmo redação útil de texto para hiperlinks - que são lidos em voz alta por leitores de tela - você deve ir acima e além. A inclusão de recursos de acessibilidade não exclui nenhum público, apenas convida mais pessoas.

Projetar com a proporção WCAG melhora os designs para todos

Os padrões para web design vêm do World Wide Web Consortium, uma comunidade que auxilia nas melhores práticas em toda a web. O consórcio desenvolveu as Diretrizes de Acessibilidade de Conteúdo da Web, que os web designers devem seguir. Isso fornece um padrão de proporção para verificações de visibilidade ao projetar para a web.

Seguir essas diretrizes e padrões de proporção significa que seus designs da web podem ser acessados ​​por mais pessoas.