Cor e contraste

Você já tentou ler um texto em uma tela e achou difícil de ler devido ao esquema de cores ou teve dificuldade para ver a tela em um ambiente muito claro ou pouca luz? Ou talvez você tenha um problema de visão de cor mais permanente, como as estimativas de 300 milhões de pessoas com daltonismo ou as 253 milhões de pessoas com baixa visão?

Como designer ou desenvolvedor, você precisa entender como as pessoas percebem a cor e o contraste, seja de modo temporário, situacional ou permanente. Isso ajudará você a oferecer melhor suporte às necessidades visuais.

Este módulo vai apresentar alguns princípios básicos acessíveis sobre cores e contraste.

Perceber a cor

Você sabia que objetos não possuem cor, mas refletem comprimentos de onda da luz? Quando você vê cor, seus olhos recebem e processam esses comprimentos de onda e os convertem em cores.

Quando se trata de acessibilidade digital, falamos sobre esses comprimentos de onda em termos de matiz, saturação e brilho (HSL). O modelo HSL foi criado como uma alternativa ao modelo de cores RGB e se alinha mais à forma como uma pessoa percebe cor.

Hue é uma maneira qualitativa de descrever uma cor, como vermelho, verde ou azul, em que cada matiz tem um ponto específico no espectro de cores, com valores que variam de 0 a 360, com vermelho em 0, verde em 120 e azul em 240.

A saturação é a intensidade de uma cor, medida em porcentagens que variam de 0% a 100%. Uma cor com saturação total (100%) seria muito vívida, enquanto uma cor sem saturação (0%) seria em escala de cinza ou preto e branco.

A claridade é o caractere claro ou escuro de uma cor, medido em porcentagens que variam de 0% (preto) a 100% (branco).

Medir o contraste de cores

Para ajudar pessoas com várias deficiências visuais, o grupo da WAI criou uma fórmula de contraste de cores para garantir que exista contraste suficiente entre o texto e o plano de fundo. Quando essas proporções de contraste de cores são seguidas, pessoas com visão moderadamente baixa podem ler texto em segundo plano sem precisar de tecnologia adaptativa de aumento de contraste.

Vamos analisar imagens com uma paleta de cores vibrantes e comparar como elas ficariam com aquelas com formas específicas de daltonismo.

À esquerda, a imagem mostra areia arco-íris com cores roxas, vermelhas, laranjas, amarelas, verdes aqua, azul-claro e azul-escuro. À direita está um padrão de arco-íris colorido e colorido.

Deuteranopia

A deuteranopia (chamada de cego verde) ocorre em 1% a 5% dos homens, e 0,35% a 0,1% das mulheres.

Pessoas com deuteranopia têm sensibilidade reduzida à luz verde. Este filtro de daltonismo simula como pode ser esse tipo de daltonismo.

Protanopia

A protanopia (normalmente conhecida como cega vermelha) ocorre em 1,01% a 1,08% dos homens e 0,02% de 0,03% das mulheres.

Pessoas com protanopia têm uma sensibilidade reduzida à luz vermelha. Este filtro de daltonismo simula como pode ser esse tipo de daltonismo.

Acromatopsia ou monocromatismo

Acromatopsia ou monocromatismo (ou o daltonismo total) ocorre muito, muito raramente.

Pessoas com acromatopsia ou monocromatismo quase não têm percepção de luz vermelha, verde ou azul. Esse filtro de daltonismo simula como pode ser esse tipo de daltonismo.

Calcular o contraste de cores

A fórmula de contraste de cores usa a luminância relativa das cores para ajudar a determinar o contraste, que pode variar de 1 a 21. Essa fórmula geralmente é abreviada para [color value]:1. Por exemplo, o preto puro contra o branco puro tem a maior taxa de contraste de cores em 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

O texto de tamanho normal, incluindo imagens de texto, precisa ter uma taxa de contraste de cores de 4.5:1 para atender aos requisitos mínimos das WCAG para cor. O texto grande e os ícones essenciais precisam ter uma taxa de contraste de cores de 3:1. Textos grandes são caracterizados por terem, no mínimo, 18 pt / 24 px ou 14 pt / 18,5 px em negrito. Logotipos e elementos decorativos estão isentos desses requisitos de contraste de cores.

Felizmente, não é necessário fazer cálculos avançados, já que há muitas ferramentas que farão os cálculos de contraste de cores. Ferramentas como Adobe Color, Color Contrast Analyzer, Leonardo e o seletor de cores do Chrome DevTools podem informar rapidamente as proporções de contraste de cores e oferecer sugestões para ajudar a criar os pares de cores e paletas mais inclusivos.

Como usar cores

Sem bons níveis de contraste de cores, palavras, ícones e outros elementos gráficos são difíceis de descobrir, e o design pode ficar inacessível rapidamente. Mas também é importante prestar atenção em como a cor é usada na tela, já que não é possível usar a cor sozinha para transmitir informações, ações ou distinguir um elemento visual.

Por exemplo, se você disser "clique no botão verde para continuar", mas omitir qualquer conteúdo ou identificador extra no botão, vai ser difícil para pessoas com determinados tipos de daltonismo saber em qual botão clicar. Da mesma forma, muitos gráficos e tabelas usam apenas a cor para transmitir informações. Adicionar outro identificador, como um padrão, texto ou ícone, é fundamental para ajudar as pessoas a entender o conteúdo.

Revisar seus produtos digitais em escala de cinza é uma boa maneira de detectar possíveis problemas de cores rapidamente.

Consultas de mídia com foco em cores

Além de verificar as taxas de contraste de cores e o uso de cores na tela, considere aplicar as consultas de mídia, cada vez mais conhecidas e com suporte, que oferecem aos usuários mais controle sobre o que é mostrado na tela.

Por exemplo, usando a consulta de mídia @prefers-color-scheme, é possível criar um tema escuro, o que pode ser útil para pessoas com fotofobia ou sensibilidade à luz. Você também pode criar um tema de alto contraste com o @prefers-contrast, que oferece suporte a pessoas com deficiências de cor e sensibilidade ao contraste.

Prefere o esquema de cores

A consulta de mídia @prefers-color-scheme permite que os usuários escolham uma versão com tema claro ou escuro do site ou app que estão visitando. É possível conferir essa mudança de tema em ação mudando as configurações de preferência de iluminação/escuro e navegando até um navegador que ofereça suporte a essa consulta de mídia. Consulte as instruções do Mac e do Windows sobre o modo escuro.

.

Prefere contraste

A consulta de mídia @prefers-contrast verifica as configurações do SO do usuário para ver se o alto contraste está ativado ou desativado. Para conferir essa mudança do tema em ação, mude as configurações de preferência de contraste e navegue até um navegador que ofereça suporte à consulta de mídia (configurações do modo de contraste do Mac e do Windows).

Sobreposição de consultas de mídia

Você pode usar várias consultas de mídia com foco em cores para dar aos usuários ainda mais opções. Neste exemplo, empilhamos @prefers-color-scheme e @prefers-contrast.

Teste seu conhecimento

Teste seus conhecimentos sobre cor e contraste