Cor e contraste

Você já tentou ler um texto em uma tela e achou difícil lê-lo devido para o esquema de cores ou teve dificuldade para ver a tela em um plano em um ambiente com pouca luz? Ou talvez você seja alguém com uma cor mais permanente problemas de visão, como a estimativa de 300 milhões de pessoas com daltonismo ou os 253 milhões de pessoas com baixa visão?

Como designer ou desenvolvedor, você precisa entender como as pessoas percebem as cores e contraste, seja temporária, situacional ou permanentemente. Isso vai ajudar você atende melhor às necessidades visuais deles.

Este módulo vai apresentar alguns fundamentos acessíveis de cor e contraste.

Percepção de cor

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

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

Tonalidade é uma forma 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%) seriam escala de cinza ou preto e branco.

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

Medir o contraste de cor

Para ajudar pessoas com diversas deficiências visuais, o grupo WAI criou uma fórmula de contraste de cor para garantir que exista contraste suficiente entre o texto e o plano de fundo. Quando essas taxas de contraste de cores são seguidas, pessoas com visão moderadamente baixa podem ler o texto em segundo plano sem precisar de tecnologia assistiva de aumento de contraste.

Vamos analisar imagens com uma paleta de cores vibrante e comparar apareceriam para pessoas com formas específicas de daltonismo.

.

À esquerda, a imagem mostra a areia arco-íris com as cores roxo, vermelho, laranja, amarelo, verde-água, azul-claro e azul-escuro. À direita, há um padrão de arco-íris mais colorido e colorido.

Deuteranopia

Deuteranopia (link em inglês) (comumente conhecida como cego verde) ocorre em 1% a 5% dos homens, 0,35% a 0,1% dos fêmeas.

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

Protanopia

Protanopia (link em inglês) (comumente conhecida como cega vermelha) ocorre em 1,01% a 1,08% dos homens e 0,02% dos 0,03% das mulheres.

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

Acromatopsia ou monocromatismo

Acromatopsia ou monocromatismo (ou daltonismo completo) ocorre muito, muito raramente.

Pessoas com acromatopsia ou monocromatismo quase não percebem o vermelho, verde ou azul. Esse filtro para daltonismo simula o que esse tipo de de daltonismo.

Calcular o contraste de cor

A fórmula do contraste de cores usa luminância relativa de cores para ajudar a determinar o contraste, que pode variar de 1 a 21. Essa fórmula é geralmente encurtado para [color value]:1. Por exemplo, preto puro em contraste o branco 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

Textos de tamanho normal, incluindo imagens de texto, precisam ter uma taxa de contraste de cores de 4.5:1 para transmitir o requisitos mínimos de WCAG para cor. Textos grandes e ícones essenciais precisam ter uma taxa de contraste de cores de 3:1. Textos grandes são caracterizados por ter pelo menos 18 pt / 24 px ou 14 pt / 18,5 px em negrito. Logotipos e elementos decorativos não podem usar estas cores requisitos de contraste.

Felizmente, nenhuma matemática avançada é necessária, pois há muitas ferramentas fazer os cálculos de contraste de cor para você. Ferramentas como Adobe Color Analisador de contraste de cores, Leonardo e Seletor de cores do DevTools do Chrome pode informar rapidamente as taxas de contraste de cores e oferecer sugestões para ajudar para criar os pares de cores e paletas mais inclusivos.

Usar cores

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

Por exemplo, se você disser "clique no botão verde para continuar", mas omitir qualquer conteúdo ou identificadores adicionais ao botão, difícil para pessoas com daltonismo saberem qual botão clicar. Da mesma forma, muitos gráficos, tabelas e tabelas usam apenas a cor para transmitir informações imprecisas ou inadequadas. Adicionar outro identificador, como um padrão, texto ou ícone, é é crucial 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 com foco em cores

Além de verificar as taxas de contraste de cores e o uso de cores na sua tela, considere aplicar a abordagem cada vez mais popular e consultas de mídia que oferecem aos usuários ter 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 o @prefers-contrast, que ajuda 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 luz ou versão com tema escuro do site ou app que estão visitando. Observe que mudança do tema em ação mudando suas configurações de preferência de iluminação/escuro e navegando para um navegador que suporte essa consulta de mídia. Analise o Mac e Instruções do Windows para o modo escuro.

Compare os modos claro e escuro.

.

Prefere o contraste

O @prefers-contrast consulta de mídia verifica as configurações do sistema operacional do usuário para ver se o alto contraste está ativado ou desativada. Mude o contraste para conferir a mudança do tema em ação preferências e navegar para um navegador que ofereça suporte a essa consulta de mídia (configurações do modo de contraste do Mac e do Windows).

Compare os valores "regular" e "alto contraste".

.

Sobreposição de consultas de mídia

Você pode usar várias consultas de mídia com foco em cores para oferecer aos usuários ainda mais e fazer escolhas melhores. Neste exemplo, empilhamos @prefers-color-scheme e @prefers-contrast juntas.

Compare cor e contraste.

.

.

Teste seu conhecimento

Teste seus conhecimentos sobre cor e contraste