Técnica

O uso de cores em textos de Websites e aplicações para Web vai além da busca de uma estética agradável. Cores em textos na Web visam também transmitir informações que são, normalmente, parte importante do que o Web designer quer comunicar. Essas informações estão contidas na cor e não somente no texto, sendo que o daltônico perde parte importante dessa informação sem saber, muitas vezes, que existe alguma cor no texto apresentado.

Imagem de texto colorido pelo Beeline Reader

Texto colorido utilizando o plugin Beeline Reader que busca facilitar a leitura de textos longos através de diferentes cores: isto não é útil para daltônicos.

O uso de cores em textos é uma questão cultural e não podemos oferecer barreiras a essa forma de expressão. Nesse aspecto, o W3C (World Wide Web Consortium) orienta que deve-se garantir que toda informação disponível através do uso de cores também esteja disponível sem o uso destas.

Com o objetivo de melhorar a acessibilidade de pessoas portadoras de daltonismo foi desenvolvida uma técnica baseada em CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata). A aplicação da técnica poderá ser vista, mais abaixo, através de um exemplo.

imagem esquemática da criação de uma página web acessível para daltônicos

Diagrama esquemático de uma página acessível para daltônicos. Note o uso da ferramenta CED (Conversor de Estilos para Daltônicos) para fazer a conversão do CSS.

O diagrama esquemático acima está representando a técnica e pode ser explicado, resumidamente, da seguinte forma:

  • Inicialmente criamos uma página html e um CSS;
  • Após submetemos o CSS (poderá ser mais de um) à ferramenta CED (Conversor de Estilos para Daltônicos) que fará a conversão;
  • A saída da ferramenta será um outro documento CSS, já convertido, a ser adicionado na página;
  • Resumidamente a conversão substitui as propriedades "color" do CSS por um conjunto de propriedades que identificam a cor da letra;
  • O CSS convertido deverá ser referenciado na página e, através de algum mecanismo (java script por exemplo), aplicado quando necessário;
  • Como resultados teremos uma página acessível a daltônicos, com a aplicação de uma convenção para cores de letras.

É importante destacar que o W3C ( World Wide Web Consortium ) recomenda, em suas diretrizes, o uso de CSS em um documento separado quando se busca a melhoria da acessibilidade na Web .

Convenção

A técnica proposta tem por objetivo permitir que pessoas com daltonismo possam perceber a cor existente em um determinado trecho de texto colorido. Para isto o CSS original da página é substituido por um CSS convertido para daltônicos.

As cores vermelho , verde e azul são cores que normalmente são utilizadas como destaque em textos na web. Dificilmente alguém diria "leia o texto destacado na cor ardósia", pois causaria muita confusão na interpretação. A técnica tratará as cores que não sejam vermelho, verde e azul como outras cores.

Aplicando-se o CSS convertido, os textos coloridos serão mostrados com um fundo que representa a cor mostrada no texto onde o destaque colorido existe. Este fundo não representa exatamente a cor do texto, mas sim uma aproximação dela. No exemplo mais abaixo são apresentados dois textos onde a cor vermelha tem tonalidades diferentes, mas o fundo vermelho, aplicado aos dois textos, é o mesmo.

Imagem da tabela de conveções

Conveção utilizada na interpretação de cores em textos

Boa parte dos daltônicos consegue perceber a cor em uma porção maior. Por isto, o fundo colorido com letra preta permitirá que muitos daltônicos percebam intuitivamente a cor presente em um trecho de texto colorido.

Para pessoas que não conseguem perceber a cor do fundo corretamente, foi adicionada a funcionalidade de "dica" onde bastará que o usuário passe o mouse sobre o destaque que será mostrada textualmente a cor presente.

Devido a necessidade de transformação do CSS original em um CSS para acessibilidade de daltônicos, uma ferramenta foi criada. Assim, não há necessidade de converter manualmente o(s) CSS. A ferramenta chama-se CED-Conversor de Estilos para Daltônicos.

Exemplo

Para ver como os textos abaixo são representados, clique no ícone de acessibilidade para daltônicos no canto supeiror direito e para ver a cor com uma "dica" textual, passe o mouse* no fundo marcado correspondente no próprio texto.

As cores que não se encaixam em vermelho, verde ou azul serão representadas pelo fundo genérico cinza e para vê-lo será necessário clicar uma segunda vez no ícone.

Trecho em vermelho.

Trecho em Verde

Trecho em azul

Trecho em outra cor

Outro trecho em vermelho

* em dispositivos com tela sensivel ao toque, basta colocar o dedo no destaque.