Projetando para acessibilidade, Etapa 1: contraste de cores

O Projeto A11Y coloca melhor, e mais diretamente: "A acessibilidade é difícil." Se você está se sentindo perdido, comece com um contraste de cores.

Uma cartilha sobre acessibilidade

Acessibilidade tem sido uma palavra da moda na comunidade de design ultimamente. O que isso significa? “A Web é fundamentalmente projetada para funcionar para todas as pessoas, independentemente de seu hardware, software, idioma, cultura, localização ou capacidade física ou mental. Quando a Web atinge esse objetivo, ela é acessível a pessoas com uma gama diversificada de habilidades auditivas, de movimento, visão e cognitivas ”- Henry & McGee, W3C .

Existem dois padrões de facto para acessibilidade: a secção 508 , que se aplica ao sector público, e a WCAG 2.0 , que se aplica ao sector privado. Esses dois padrões são essencialmente listas de verificação que são usadas para avaliar sites. A secção 508 é um mandato legal, enquanto a WCAG 2.0 não é. Portanto, a menos que você seja um funcionário ou subcontratado do governo, você não é legalmente obrigado a tornar seu site acessível. Mas há inúmeras razões para se preocupar com acessibilidade! Cada um dos seus usuários deve ter direito a uma experiência igual.

Nota: Embora todos os sites .gov tenham sido legalmente obrigados a cumprir a Seção 508 desde 1998, muito poucos deles, sem conseqüência. Este absurdo, juntamente com várias outras descobertas inquietantes, foi o tema da minha tese na UC Berkeley.

O que você pode fazer, como designer

Otimizar um site para acessibilidade é, em grande parte, uma tarefa do desenvolvedor. Por exemplo, uma diretriz das WCAG 2.0 exige que os sites sejam navegáveis ??pelo teclado, para o usuário que não consegue operar o mouse. Isso não representa um grande fardo para o designer; até mesmo sites animados cheios de animação e scroll-jacked podem ser navegáveis ??pelo teclado.

No entanto, há várias diretrizes que um designer pode abordar diretamente. Estes incluem a redução de movimento, limitação de popups ou flashes inesperados, e o mais fácil de tudo, garantindo um contraste de cores adequado.

Cada diretriz da WCAG 2.0 possui três níveis de conformidade: A (mínimo), AA (médio alcance) e AAA (máximo). AA é amplamente considerado o padrão da indústria. O padrão AA para contraste de cores é uma proporção de 4,5: 1 entre primeiro plano (ou seja, texto, imagens) e plano de fundo. Para exemplos de como uma proporção de 4.5: 1 se parece, confira a ferramenta de Brent Jackson chamada Colorable .

Ilusório

Teste de contraste

Se você tiver uma marca existente ou paleta de interface do usuário, verifique as taxas de contraste. Eu recomendo usar a ferramenta Contrast Ratio de Lea Verou , simplesmente pela facilidade de uso. Você também pode gostar da EightShapes Contrast Grid para avaliar paletas mais extensas. Nem o W3C (a fundação responsável pela WCAG 2.0) nem a Administração de Serviços Gerais (o órgão do governo que supervisiona a Seção 508) fornece ferramentas de teste, então você terá que confiar em ferramentas de terceiros por desenvolvedores de bom coração. O projeto A11Y mantém uma lista de recursos , assim como o Google .

Taxa de contraste

Fazendo ajustes

Se suas taxas de contraste atuais forem de 4,5: 1, você precisará fazer alguns ajustes para atender ao padrão de contraste AA. Tenha em mente que as cores adjacentes não são mantidas no padrão de contraste. O que realmente importa é o contraste entre o primeiro plano e o segundo plano, para que você não tenha que redefinir toda a sua paleta. Com ajustes de cor talvez menores, você pode garantir um bom contraste enquanto preserva sua imagem de marca. Eu sei que é mais fácil dizer do que fazer, então deixe-me reiterar minha declaração inicial: Acessibilidade é difícil. Esta é a parte mais fácil.

Considere o seguinte de Sebastien Gabriel , designer do Google Design :

“A acessibilidade sempre fez parte do DNA do Chrome… Admitidamente, no lado visual, nosso esquema de cores precisava de um novo passe para torná-lo mais simples e compatível com as regras da WCAG 2.0, para um bom contraste. Nós nos certificamos de que toda a nossa tipografia, bem como a iconografia, atingissem pelo menos o nível AA ou a relação de contraste de 4,5: 1 ”.

Paleta do Google Chrome

O Google não está sozinho no cumprimento do padrão AA. A atualização da interface do usuário do Twitter, lançada no mês passado, inclui um recurso "Aumentar contraste de cores". Quando isso é alternado , a maior parte da paleta não atende apenas a AA, mas a conformidade com AAA para contraste.

Viabilidade

Se você tem dúvidas sobre a viabilidade, você não está sozinho. Considere este trecho de Yesenia Perez-Cruz e Sanette Tanaka no Vox Media:

“A Vox Media fez avanços na melhoria da acessibilidade de nossos sites, pois a linguagem de design do Curbed foi inicialmente definida … a cor do link do guia de estilo original do Curbed não teve contraste suficiente com a cor de fundo da página inicial para passar nos testes de contraste definidos pelo Web Content Accessibility Diretrizes. Nós exploramos algumas opções, incluindo a mudança da paleta de cores do Curbed , mas finalmente decidimos que mudanças drásticas na linguagem do design estavam fora do escopo deste projeto. Estamos comprometidos por negrito nossos links. Embora ainda inacessíveis , os links irão se beneficiar de um segundo indicador visual que os ajudará a se destacar do corpo do texto ”.

Quando pedi informações adicionais sobre o motivo pelo qual o contraste adequado estava fora do escopo, Tanaka explicou que as cores são parte integrante da linguagem de design maior da marca, e que mudar essa linguagem de design não é pouca coisa. Embora eu esteja feliz que a Vox Media esteja ciente de suas deficiências de acessibilidade, a desculpa não é boa para mim. É injusto para seus usuários priorizar a unidade de sua linguagem de design sobre acessibilidade. A acessibilidade merece consideração, especialmente se os esforços de rebranding já estiverem em andamento.

Lembre-se de que todos merecem acesso ao seu site. Criar um produto totalmente acessível pode ser uma longa jornada, portanto, o contraste de cores é um ótimo lugar para começar.

?

Siga-me no Medium | Twitter | Dribbble