🌈 🧐 Um seletor de cores opinativo

(20 de março de 2020)

Em toda a web, designers e engenheiros estão cada vez melhores em construir com acessibilidade em mente. No Wistia, a atualização mais recente de nosso reprodutor de vídeo foi um grande passo à frente, com melhorias para torná-lo amigável ao leitor de tela, navegável pelo teclado e compatível com descrições de áudio.

Um seletor de cores com uma caixa de seleção que diz “Limitar espectro para cores de fundo de alto contraste”

Mas por mais fantástica e talentosa que seja a equipe aqui, existem alguns aspectos da acessibilidade do vídeo que simplesmente não podemos consertar nos bastidores. Ainda cabe aos criadores de vídeo solicitar legendas, adicionar texto alternativo descritivo às imagens em miniatura e escolher a cor do player que mais se adequa à marca. E essa escolha tem um grande impacto na acessibilidade, uma vez que uma cor de fundo clara pode tornar o texto e os ícones de baixo contraste, a ponto de torná-los ilegíveis.

O controle sobre a aparência do player é um dos características que nossos clientes mencionam mais como a razão para escolher Wistia, mas também é uma escolha que pode afetar gravemente o acesso sem que eles percebam o que está em jogo.

Para resolver este problema, nós estabelecemos para projetar um seletor de cores que torna a acessibilidade fácil de escolher.

Colocar um número nele, isso significa fazer uma escolha informada com o mínimo de cliques possível. Procurando uma interface de usuário fácil e de baixo atrito para a seleção de cores, avaliamos milhões (?) De maneiras diferentes de fazer uma escolha de cores. Por que tudo isso é diferente? Por que não existe um seletor de cores padrão? E qual é a diferença entre “Luminosidade” e “Brilho”?

Muitos seletores de cores diferentes, mostrando diferentes layouts e estruturas de espaço de cores

A resposta está no espaço de cores tridimensional. Ou seja, para representar com precisão todas as cores possíveis, você precisa de uma forma tridimensional. O modelo que mapeia mais diretamente para nossos instintos sobre a cor é HSV: matiz (o ponto no arco-íris), saturação (pureza dessa tonalidade versus a turvação dela se transformando em cinza), valor (luminosidade dessa tonalidade versus se misturando ao branco ou preto). Cada uma dessas três variáveis ​​é uma dimensão necessária para definir uma cor exibida em uma tela.

Formas tridimensionais que representam o espaço de cores: a coluna, cone, cubo e esfera
Curiosidade: os valores hexadecimais das cores mapeiam não para HSV, mas (no menos intuitivo) RGB. Cada um dos três pares de caracteres representa um canal de cor vermelha, azul ou verde em hexadecimal (base 16), então #FF FF FF é branco, porque todos os três estão no máximo como o meio da imagem daquele cubo, enquanto #FF 00 00 é vermelho, porque apenas o canal R atingiu o limite máximo. Portanto, a face esquerda desse cubo são todas as cores que você poderia obter se alterasse apenas o canal R e os últimos quatro caracteres do seu código hexadecimal permanecessem FF FF.

Tão legal quanto seria fazer os usuários escolherem suas cores navegando em um mundo tridimensional até a coordenada (x, y, z) que melhor corresponde à sua marca, isso não resultaria em poucos cliques e escolhas rápidas e boas. A razão de haver tantos seletores de cores é que é necessário um certo grau de abstração para pegar aquele espaço de cores tridimensional e reduzi-lo a uma IU bidimensional . É por isso que todos os seletores de cores têm pelo menos dois (às vezes três) eixos de escolha – o usuário precisa escolher seus x, y e z; seu matiz, saturação e valor. E para nossa equipe de design, essas escolhas significam cliques extras. Para minimizar esses cliques, nos perguntamos quais eram os mais e os menos importantes.

Escolher um matiz é o clique mais importante; escolher a saturação é o clique menos importante.

Matiz é a primeira coisa em que pensamos quando pensamos em escolher uma cor. E, no contexto da correspondência de um player de vídeo com a cor da marca, a saturação é a última coisa em que pensamos. Isso ocorre porque a maioria das cores da marca são de saturação total e, mesmo quando não são, você provavelmente ainda pensa nelas dessa forma. Isso significa que muitos usuários nunca desejarão que a saturação seja nada além de 100 e, se for seu próprio clique, é um clique que podemos evitar. Isso deixa apenas matiz e valor para escolher, que podem ser os eixos de um campo bidimensional e selecionáveis ​​com um único clique.

Um seletor de cores mostrando duas seções, a primeira uma matriz de matiz e luminosidade, a segunda um espectro denominado Saturação
Em um único clique, o usuário seleciona matiz e luminosidade. O segundo clique, para diminuir a saturação, geralmente não é necessário.

Eis! A escolha de cores em um único clique. Mas e a acessibilidade? Podemos adicionar um texto auxiliar que explica por que o contraste é importante (nós fazemos isso) e mostra a relação de contraste calculada e se isso atende ao padrão (nós também fazemos isso), mas o trabalho a ser feito ainda é a escolha . Nossos usuários precisam entender o que escolher, sem perder o contexto de todo o espectro de opções. Afinal, os seletores de cores são complicados o suficiente, e entender o que está acontecendo é mais fácil com uma animação mostrando o que está sendo levado embora.

Um gif animado do seletor de cores em transição de todo o espectro para um espectro limitado de cores de alto contraste

Nossa solução adiciona um clique, mas apenas 1. Quando você clica na caixa de seleção, o seletor mascara todos os valores que não criam contraste alto o suficiente contra os controles do player branco para serem considerados acessíveis. Se a sua configuração anterior não cair no intervalo aceitável, o matiz permanece o mesmo e a luminosidade cai para o nível mais alto aceitável.

O cálculo é baseado na matemática fornecida pela Web Content Accessibility Guild , em cujo padrão AA baseamos nosso trabalho de acessibilidade. A partir daí, incorporamos um fator de leveza adicional para contabilizar a opacidade de 80\% do player Wistia. Isso significa que o cenário de contraste mais baixo, quando o player é sobreposto sobre branco puro, ainda resulta em contraste suficiente.

Este seletor de cores é apenas uma pequena parte de nossas ferramentas de acessibilidade, que inclui uma lista de verificação para cada vídeo e dicas úteis ao longo do processo de personalização, explicando como as diferentes opções afetam a acessibilidade. Muito desse trabalho é feito pela Wistia nos bastidores, mas orientar os usuários nas configurações que eles precisam ajustar é a nossa maneira de trabalhar para tornar a acessibilidade uma escolha fácil de fazer.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *