O Qual a Cor? é um projeto criado para ajudar pessoas com daltonismo a identificar de maneira eficiente e eficaz os nomes corretos das cores. Além disso, o site também oferece ferramentas para desenvolvedores interessados em promover uma acessibilidade maior para daltônicos em seus produtos.
A ferramenta tem como origem um projeto de Trabalho de Conclusão de Curso para um curso técnico de Informática para Internet e foi criada com a idéia de fornecer funcionalidades integradas em um único lugar para facilitar o cotidiano de pessoas com dificuldades na identificação e percepção das cores.
A lista com os nomes de cores foi composta a partir da Lista de cores da Wikipédia em Português, selecionando apenas as cores que tinham correspondência com as keywords de cores presentes no CSS. O método de busca do nome das cores foi feito através da distância euclidiana, interpretando o espaço de cores RGB como um cubo onde cada dimensão corresponde a vermelho, verde ou azul.
O modelo de simulação de deficiência na percepção das cores utilizado tem sua origem no artigo "A Physiologically-based Model for Simulation of Color Vision Deficiency", escrito por Gustavo Machado, Manuel Oliveira e Leandro Fernandes. A implementação foi feita usando como base as matrizes pré-computadas de protanomalia, deuteranomalia e tritanomalia em suas severidades mais elevadas (protanopia, deuteranopia e tritanopia, respectivamente), oferecidas pelos autores.
O cálculo de contraste foi feito utilizando as informações e equações presentes na W3C Wiki e nas Diretrizes de Acessibilidade para Conteúdo Web da W3C em sua versão 2.1
A extração das paletas de cores das imagens é feita utilizando o algoritmo K-means, um método de clustering (um tipo de aprendizado de máquina não-supervisionado) que consiste em dividir um número n de elementos em um número k de grupos, onde cada elemento pertencerá ao grupo cuja média tenha a menor distância. O método de inicialização das centroides é o de Forgy, onde são escolhidas aleatoriamente k observações entre os elementos como as centroides iniciais. Na implementação do projeto, se a convergência (quando os centroides não mudam mais entre as iterações) não for atingida em 10 iterações ou menos, o loop é interrompido para evitar o travamento do site
A rotação de matizes é feita através da função CSS hue-rotate(), que rotaciona a matiz de um
determinado elemento utilizando um ângulo específico como parâmetro.
É importante ressaltar que os resultados da busca de cores, do modelo de simulação, do cálculo de contraste e da extração das paletas não são precisos. A busca de cores retorna o nome da cor mais próxima presente na lista de cores do site, não necessariamente correspondendo ao nome correto da cor específica fornecida pelo usuário. Qualquer modelo de simulação da deficiência na percepção das cores, mesmo que preciso, não é exato pois simula uma condição com variações significativas de indivíduo para indivíduo, fora a possibilidade de inconsistências na implementação do modelo por parte do projeto. O cálculo de contraste também não é perfeito, mesmo sendo baseado no documento mais recente (em sua versão já consolidada, descartando as versões 2.2 e 3.0, ainda em desenvolvimento) da W3C sobre o assunto. Por fim, o algoritmo K-means também não necessariamente encontrará os melhores valores para as cores, parando o processo de busca logo quando a convergência for atingida.
Mesmo que seu autor não tenha daltonismo, o site nasceu com o intuito de tornar a web mais acessível para 350 milhões de pessoas mundo afora, principalmente aquelas que falam português, e permitir que a criação de produtos digitais com acessibilidade para essa população seja mais fácil e rápida.
Dicas
- Em gráficos de setores (pizza), sempre utilize um rótulo para cada seção, além da cor;[1] [2]
- Quando o usuário tiver que escolher uma cor para um produto ou afins, forneça um rótulo com o nome da cor, além da cor;[1] [2]
- Ao invés de utilizar toggles para selecionar uma opção, utilize checkboxes;[2]
- Quando tiver de notificar um erro ao usuário, utilize uma mensagem de erro, além da cor que escolher para sinalizar o erro;[2]
- Sempre que possível utilize ferramentas de checagem de contraste entre cores, garantindo que a razão de contraste esteja de acordo com as Diretrizes de Acessbilidade para Conteúdo Web da W3C;[2]
- Em links, utilize ícones, sublinhado ou formatos diferenciados para distinguir entre o link e o texto, além da cor;[2]
- Evite combinações de cores como: vermelho, verde e marrom; rosa, turquesa e cinza; e roxo e azul;[3]
- Procure usar combinações de cores com azul e laranja ou vermelho;[3]
- Procure sempre variar a intensidade do brilho das cores escolhidas, buscando um resultado que fique legível até mesmo em preto e branco;[3]
- Sempre que possível realize simulações de como seu site é percebido por pessoas com alguma deficiência na percepção de cores.[1]