Cor e contraste

Você já tentou ler um texto em uma tela e teve dificuldade por causa do esquema de cores ou não conseguiu enxergar a tela em um ambiente muito claro ou com pouca luz? Ou talvez você tenha um problema de visão de cores mais permanente, como as 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 cores e contraste, seja temporária, situacional ou permanentemente. Isso ajuda você a atender melhor às necessidades visuais deles.

Este módulo apresenta alguns fundamentos de cores e contrastes acessíveis.

Perceber cores

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

Quando falamos de acessibilidade digital, nos referimos a esses comprimentos de onda em termos de matiz, saturação e luminosidade (HSL). O modelo HSL foi criado como uma alternativa ao modelo de cores RGB e se alinha mais à forma como um ser humano percebe as cores.

Observação: em CSS, uma cor pode ser especificada de várias maneiras, como com nomes de cores, valores RGB, RGBa, HEX, HSL, HSLa, HSV ou HSVa. O HSLa é o modelo HSL com um valor alfa, que mede a opacidade de 0,0 (totalmente transparente) a 1,0 (totalmente opaco).

Tonalidade é uma maneira qualitativa de descrever uma cor, como vermelho, verde ou azul. Cada tonalidade tem um ponto específico no espectro de cores com valores que variam de 0 a 360, sendo 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 em preto e branco.

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

Medir o contraste de cor

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

Confira imagens com uma paleta de cores vibrante e compare como elas aparecem para pessoas com daltonismo.

Foto de Alexander Grey no Unsplash.

Foto de Clark Van Der Beken no Unsplash.

À esquerda, a imagem mostra areia colorida com cores roxa, vermelha, laranja, amarela, verde-água, azul-claro e azul-escuro. À direita, há um padrão de arco-íris mais brilhante e multicolorido.

Deuteranopia

A deuteranopia (comumente conhecida como daltonismo verde) ocorre em 1% a 5% dos homens e em 0,35% a 0,1% das mulheres.

Pessoas com deuteranopia têm sensibilidade reduzida à luz verde. Esse filtro simula a aparência desse tipo de daltonismo.

Protanopia

A protanopia (conhecida como daltonismo vermelho) ocorre em 1,01% a 1,08% dos homens e em 0,02% a 0,03% das mulheres.

Pessoas com protanopia têm sensibilidade reduzida à luz vermelha. Esse filtro simula a aparência desse tipo de daltonismo.

Acromatopsia ou monocromatismo

Acromatopsia ou monocromatismo (daltonismo completo) é muito, muito raro.

Pessoas com acromatopsia ou monocromatismo quase não têm percepção de luz vermelha, verde ou azul. Esse filtro simula a aparência desse tipo de daltonismo.

Calcular o contraste de cor

A fórmula de contraste de cor 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 em contraste com o branco puro tem a maior taxa de contraste de cor, 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 cor de 4.5:1 para atender aos requisitos mínimos das WCAG para cor. Textos grandes e ícones essenciais precisam ter uma taxa de contraste de cores de 3:1. O texto grande tem pelo menos 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 matemáticos avançados, porque há muitas ferramentas que fazem isso para você. Ferramentas como Adobe Color, Color Contrast Analyzer, Leonardo e seletor de cores do DevTools do Chrome podem informar rapidamente as proporções de contraste de cores e oferecer sugestões para ajudar a criar os pares e paletas de cores mais inclusivos.

Uso de cores

Sem bons níveis de contraste de cores, palavras, ícones e outros elementos gráficos ficam difíceis de descobrir, e o design pode se tornar inacessível rapidamente. Mas também é importante prestar atenção a como a cor é usada na tela, já que não é possível usar apenas a cor 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 adicional do botão, será difícil para pessoas com daltonismo saberem em qual botão clicar. Da mesma forma, muitos gráficos e tabelas usam apenas cores para transmitir informações. Adicionar outro identificador, como um padrão, texto ou ícone, é fundamental para ajudar as pessoas a entender o conteúdo.

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

Consultas de mídia focadas 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 populares e compatíveis, que oferecem aos usuários mais controle sobre o que é exibido na tela.

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

Observação: há outras consultas de mídia e configurações de SO a serem consideradas para acessibilidade de cores, mas elas têm muito menos suporte do que as duas listadas neste módulo. Leia Modos de exibição de acessibilidade do sistema operacional e do navegador para mais informações sobre as várias configurações de acessibilidade do SO.

Prefere esquema de cores

Browser Support

• 76
• 79
• 67
• 12.1

Source

A consulta de mídia @prefers-color-scheme permite que os usuários escolham uma versão clara ou com tema escuro do site ou app que estão visitando. Para ver essa mudança de tema em ação, altere as configurações de preferência clara ou escura e navegue até um navegador que ofereça suporte a essa consulta de mídia. Revise as instruções do modo escuro para Mac e Windows.

Configurações gerais de aparência do macOS.

Compare o modo claro e o escuro.

Modo claro.

Modo escuro.

Prefere contraste

Browser Support

• 96
• 96
• 101
• 14.1

Source

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

Compare o contraste normal e o alto contraste.

Modo claro, sem preferência de contraste.

Modo escuro, preferência de alto contraste.

Consultas de mídia de camada

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

Compare a cor e o contraste.

Modo claro, sem preferência de contraste.

Modo escuro, sem preferência de contraste.

Modo claro, preferência de alto contraste.

Modo escuro, preferência de alto contraste.