Como designer gráfico, designer de documentos ou web designer, entender as diretrizes de acessibilidade de cores e contrastes das WCAG ajudará a tornar seus designs mais inclusivos e acessíveis para pessoas que enxergam com ou sem deficiência visual.

Neste episódio de Design Domination, vou dividir as diretrizes de cor e contraste em linguagem simples.

Se você já leu as Diretrizes de Acessibilidade de Conteúdo da Web , que chamamos de “WCAG” (wih-cag) para abreviar, pode ter se sentido sobrecarregado. Existem muitas orientações e explicações que podem facilmente deixar seus olhos vidrados. Alguns deles são confusos ou ambíguos. Alguns fazem você se perguntar: “OK, mas o que diabos eu faço com essa informação?”, Deixando você com mais perguntas do que respostas.

Por isso, quero ajudá-lo a entender o que eles significam e algumas coisas a que se aplicam, para que você possa tornar seus designs mais acessíveis a todos, o que significa que seu trabalho também terá melhores resultados.

Compreendendo as Diretrizes de Cor e Contraste

Se você está apenas entrando no assunto de acessibilidade ou procurando tornar seus designs visualmente acessíveis, você precisa entender e seguir as diretrizes de acessibilidade específicas relacionadas à cor e ao contraste.

Existem várias diretrizes WCAG sobre cor e contraste.

Felizmente, os que se aplicam à cor e ao contraste são muito claros e fáceis de entender. Embora sejam chamadas de Diretrizes de Acessibilidade de Conteúdo da Web , você pode aplicá-las se estiver projetando um site, documento, infográficos ou outros gráficos de dados ou um aplicativo que precise tornar acessível.

Nível de Conformidade

Primeiro, você precisa descobrir qual nível de conformidade seu cliente ou local de trabalho precisa aderir. Ou seja, se tiverem a obrigatoriedade legal de produzir conteúdo acessível.

Isso porque existem 3 níveis de conformidade que você pode cumprir — A, AA e AAA. A é o nível mais baixo e AAA é o mais alto.

O nível típico de conformidade a ser cumprido para cumprir as leis de acessibilidade é AA. Esse também é o padrão se eles não tiverem um requisito legal.

Às vezes, um cliente pode ter um requisito federal e estadual para cumprir as leis de acessibilidade. Mas, às vezes, uma empresa pode ter preferências específicas de acessibilidade interna, e elas podem ir além das diretrizes. Tudo bem. É por isso que sempre precisamos perguntar quais são seus requisitos.

Uso de cores

WCAG 1.4.1 Uso de cores

Vamos falar sobre o uso da cor.

Como você usa a cor é uma diretriz que as WCAG cobrem. Ele se enquadra em 1.4.1 Uso de cor e nível A. Isso significa que é um requisito muito básico e muito importante.

Quer você tenha que cumprir com A, AA ou AAA, você precisará atender a esse requisito.

Essas diretrizes dizem que você não pode usar a cor como o único meio visual de:

• transmitir informações,
• indicando uma ação,
• solicitando uma resposta ou
• distinguir um elemento visual.

O raciocínio por trás disso é que indivíduos com baixa visão, daltonismo ou outra deficiência visual ainda possam entender o que algo diz ou saber o que fazer.

Por exemplo, pense em um gráfico de pizza com uma legenda. Alguns indivíduos podem não ser capazes de discernir as peças umas das outras ou ler o texto em cima das peças da torta.

Outro exemplo: pense em um texto que diga para clicar em um botão vermelho. Esse botão não aparecerá vermelho para todos. Pode parecer verde ou marrom para pessoas com daltonismo.

Diretrizes de contraste

As WCAG também têm diretrizes relacionadas ao contraste entre o texto e a cor de fundo em que aparece.

WCAG 1.4.3 Contraste Mínimo

A primeira diretriz é WCAG 1.4.3 Contraste Mínimo.

Esta é uma diretriz de nível AA. Ele diz que o texto e as imagens de texto em tamanho normal precisam ter uma taxa de contraste mínima de 4,5 para 1 com o fundo.

O texto que eles chamam de tamanho “normal” é qualquer texto abaixo de 14 pontos (ou cerca de 18,66 pixels) e em negrito, ou abaixo de 18 pontos (ou 24 pixels) de qualquer peso.

Mas se o texto for grande, então há um requisito menor, ou seja, 3 para 1 em vez de 4,5 para 1.

Texto grande é um texto com pelo menos 14 pontos ou 18,66 px e negrito, ou pelo menos 18 pontos ou 24 pixels de qualquer peso.

WCAG 1.4.6 Contraste (Aprimorado)

Há outra diretriz relacionada ao contraste do texto, que é WCAG 1.4.6 Contraste (Aprimorado).

Portanto, o que acabei de mencionar foi Contrast Minimum, e este é Contrast ( Enhanced ).

Esta é uma diretriz AAA. A necessidade de aderir às WCAG AAA não é muito comum. Mas se você precisar, então esta diretriz se aplica.

WCAG 1.4.6 Contraste (Aprimorado) aumenta a taxa de contraste para texto normal de um mínimo de 4,5 para 1 para pelo menos 7 para 1 e texto grande de um mínimo de 3 para 1 para pelo menos 4,5 para 1.

Lembra quando mencionei que alguns clientes podem ter algumas preferências internas de acessibilidade?

Bem, na verdade, recentemente tive um cliente que precisava atender à conformidade AA, mas solicitou que todo o texto atendesse ao requisito AAA para contraste. Isso significava que o texto de qualquer tamanho precisava atender à taxa de contraste de 7 para 1 - até mesmo textos grandes. Portanto, isso foi ainda mais rigoroso do que o exigido pela AAA.

WCAG 1.4.11 Contraste não textual

Agora, texto e imagens de texto não são as únicas coisas às quais as diretrizes de contraste se aplicam.

Isso porque às vezes temos elementos que não são textos que transmitem significado, o que significa que usuários videntes, independente da deficiência visual, precisam ser capazes de vê-los para entender o conteúdo.

É aqui que entra o WCAG 1.4.11 Non-text Contrast.

Esta diretriz é AA e se aplica a objetos gráficos e componentes de interface do usuário, que precisam ter pelo menos uma proporção de 3 para 1 de contraste em relação às cores adjacentes.

Vamos quebrar isso.

Primeiro, o que diabos são “objetos gráficos e componentes de interface do usuário”?

Vamos começar com objetos gráficos.

Muitas vezes usamos gráficos no lugar de texto para transmitir informações, certo?

Podemos criar infográficos e usar ícones e símbolos no lugar do texto.

Podemos criar um gráfico de linhas. Em um gráfico de linha, usamos linhas para transmitir dados. Todos os usuários com visão precisariam ser capazes de ver as linhas, mas também distingui-las umas das outras. Caso contrário, eles não seriam capazes de entender o gráfico.

Podemos criar um gráfico de pizza onde temos texto em cima das partes da pizza e onde estamos usando cores para distinguir cada parte da outra na legenda.

Se alguém não conseguir diferenciar cada pedaço da torta do outro, não conseguirá entender a informação que está sendo transmitida.

Eles podem fazer suposições ou interpretar mal os dados.

Agora, e os componentes da interface do usuário?

Um exemplo disso seria o que usamos para mostrar que um texto ou outro elemento é um hiperlink. Por exemplo, se usarmos um sublinhado para hiperlinks. Um sublinhado não é um texto, mas diz: "ei, este é um hiperlink".

Os componentes da interface do usuário também podem ser limites de campo de formulário, para que alguém saiba onde digitar as informações. Alguém com deficiência visual pode ter dificuldade em ver em que campo está.

Sem requisitos de contraste

Você pode se surpreender ao saber que existem muitos elementos que não possuem nenhum requisito de contraste.

Por enquanto, não há requisitos de contraste para:

• logotipos, embora seja melhor que todos os usuários com visão possam ver um logotipo e ler qualquer texto que faça parte dele;
• elementos decorativos que não transmitem significado, como bordas ou divisórias decorativas ou alguns ícones;
• componentes inativos da interface do usuário, como um botão que está desabilitado e não se torna ativo até que os campos obrigatórios de um formulário sejam preenchidos;
• qualquer texto que faça parte de uma imagem que não pretende substituir o texto, como uma placa de rua ou texto na página de um livro;
• mapas de calor; e
• capturas de tela.

Agora que você tem uma melhor compreensão das diretrizes de cor e contraste, certifique-se de baixar meu guia gratuito, Essential InDesign and PDF Accessibility Tools , onde menciono vários verificadores de contraste de cores diferentes. Isso ajudará você a medir a taxa de contraste de elementos textuais e não textuais e informará se eles são aprovados ou reprovados com base no que são e em qual nível de conformidade você precisa atender. Você também descobrirá algumas das minhas outras ferramentas favoritas para InDesign e acessibilidade de PDF.

Originalmente publicado como um podcast e a transcrição está disponível emhttps://creative-boost.com/color-and-contrast-accessibility