Lúcia Roque’s Weblog

Dez ferramentas de avaliação de contraste de cor para melhorar a acessibilidade de um design

Colour Contrast Check: The first really intuitive online tool for checking colours that I know of, Jonathan Snook’s Colour Contrast Check lets you input foreground and background colours either by entering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser: Gez Lemon’s Colour Contrast Analyser uses the same algorithm as the Colour Contrast Check tool, so the results should be identical. The difference is that this tool has no live feedback and no sliders, meaning that you will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.

Colour Contrast Visualiser: Using a slightly different approach, Tom Hooper’s Colour Contrast Visualiser helps you find acceptable colour combinations by visualising the colours that provide sufficient contrast on a colour palette. Colour Contrast Visualiser is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.

Colour Contrast Analyser Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.

CSS Analyser: Another tool created by Gez Lemon, the CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

Luminosity Contrast Ratio Analyser: This tool, also created by Gez Lemon, tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.

Vischeck: A colour blindness simulator that can be used online or as a Photoshop plug-in that appears in the “Filter” menu. The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plug-in changes the colours of the document you are working on.

Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. This is a very neat application that does pretty much everything except analyse a web page for you. You can specify the foreground and background colours numerically or by pulling sliders, you can set it to use the colour/brightness or luminosity algorithms, and it will check and preview the selected colours against various types of colour blindness.

Graybit: An online tool developed by Jona Fenocchi and Mike Cherim. This tool does what you can guess from its name – it lets you submit a URL to a web page which will be converted to greyscale and displayed in your web browser.

Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in real-time, which makes it easy to check if a design is likely to cause problems.

Como complemento, ficam aqui explícitas as Directrizes de Acessibilidade do Conteúdo Web.

1. Proporcione alternativas para os conteúdos visuais e auditivos

   1. Forneça um equivalente textual para todo o elemento não textual. Pode ser feito através do atributo “alt”, ou “longdesc” ou no conteúdo do elemento. Isto abrange: imagens, representações gráficas de texto, incluindo símbolos, regiões de mapas de imagem, animações, como é o caso dos GIF’s animados, applets e objectos programados, arte ASCII, painéis/frames, programas interpretáveis, imagens utilizadas em listas como sinalizadores de pontos de enumeração, espaçadores, botões gráficos, sons (reproduzidos com ou sem interacção do utilizador), ficheiros de áudio independentes, pistas áudio de vídeo e trechos de vídeo. (Prioridade 1)
   2. Forneça hiperligações de texto redundantes para cada região activa de um mapa de imagens server-side.
      (Prioridade 1)
   3. Forneça uma descrição em áudio da informação relevante da pista visual de uma apresentação multimédia, até que os agentes de utilizador possam ler automaticamente em voz alta o equivalente textual de uma pista de vídeo. (Prioridade 1)
   4. Para qualquer apresentação multimédia temporizada (e.g., um filme ou animação), sincronize alternativas equivalentes (e.g., legendas ou áudio descrição de pistas visuais) com a apresentação. (Prioridade 1)
   5. Até que os agentes de utilizador alcancem o equivalente textual das hiperligações existentes nas regiões activas dos mapas de imagem client-side, forneça hiperligações textuais redundantes para cada região activa do mapa. (Prioridade 3)

2. Não se baseie apenas na cor

   1. Certifique-se de que toda a informação transmitida com base na cor se encontra também disponível sem cor. (Prioridade 1)
   2. Certifique-se que as combinações das cores de fundo e do texto, fornecem um contraste suficiente quando visualizados por alguém que tenha défices de percepção de cor ou quando a mesma é visualizada num ecrã a preto e branco. (Prioridade 2 para imagens, prioridade 3 para textos)

3. Utilize marcadores e folhas de estilo e faça-o apropriadamente

   1. Sempre que existir uma linguagem com notação apropriada, use a notação em vez das imagens para transmitir a informação. (Prioridade 2)
   2. Crie documentos validando a notação com a gramática formal publicada. (Prioridade 2)
   3. Use folhas de estilo para controlar a disposição dos elementos na página e a forma de os apresentar. (Prioridade 2)
   4. Use unidades relativas em vez de absolutas nos valores dos atributos da linguagem de notação e valores das propriedades das folhas de estilo. (Prioridade 2)
   5. Use os elementos cabeçalho (<H1>…<H6>) para transmitir a estrutura dos documentos e utilize-os de acordo com as especificações. (Prioridade 2)
   6. Faça uso da correcta notação para as listas (<ul>…<ol>) e para os seus pontos de enumeração (<li>). (Prioridade 2)
   7. Use a notação correcta para citações (<Q> para citação curta e <BLOCKQUOTE> para citação longa, normalmente superior a três linhas). Não utilize a notação de citação para formatar efeitos visuais tais como tabulação/entalhe. (Prioridade 2)

4. Identifique o idioma utilizado

   1. Identifique claramente quaisquer alterações de idioma no texto de um documento, incluindo os equivalentes textuais (caso das legendas das imagens e de outros elementos). (Prioridade 1)
   2. Especifique por extenso cada abreviatura ou acrónimo quando da sua primeira ocorrência num documento. (Prioridade 3)
   3. Identifique o idioma principal do documento. (Prioridade 3)

5. Crie tabelas que se transformem correctamente

   1. Nas tabelas de dados, identifique as linhas e as colunas que constituem os cabeçalhos. (Prioridade 1)
   2. Nas tabelas de dados que têm dois ou mais níveis lógicos de linhas ou colunas de cabeçalhos use notação para associar células de dados e células de cabeçalhos. (Prioridade 1)
      1. Não deve usar tabelas para formatar páginas a não ser que a tabela faça sentido quando em formato linear. Caso contrário, se a tabela não fizer sentido, forneça um equivalente alternativo (o qual poderá ser uma versão linear). (Prioridade 2)
   3. Se uma tabela for utilizada para formatar uma página, não utilize qualquer notação de estrutura para efeitos de formatação visual. (Prioridade 2)
   4. Providencie sumários para as tabelas. (Prioridade 3)
   5. Use abreviaturas na designação dos cabeçalhos das tabelas. (Prioridade 3)

6. Assegure-se de que as páginas que usam tecnologias emergentes se transformam correctamente

   1. Organize os documentos para que os mesmos sejam passíveis de serem lidos sem o uso das folhas de estilo. Quando um documento HTML é apresentado sem a folha de estilo a que está associado, deve ser, mesmo assim, possível ler o documento. (Prioridade 1)
   2. Certifique-se que o equivalente para conteúdo dinâmico é actualizado quando se dá a alteração dinâmica do conteúdo. (Prioridade 1)
   3. Certifique-se que as páginas são usáveis quando scripts, applets, ou outros objectos programáveis se encontram desactivados ou não são suportados. Se isto não for possível, forneça informação equivalente numa página alternativa acessível. (Prioridade 1)
   4. No caso dos scripts e dos applets, certifique-se que os eventos que o manipulam funcionam independentemente do dispositivo de entrada. (Este ponto inclui o 9.3). (Prioridade 2)
   5. Certifique-se que o conteúdo dinâmico é acessível ou forneça uma apresentação ou página alternativa. (Prioridade 2)

7. Assegure ao utilizador o controlo sobre as alterações dos conteúdos tempo-dependentes

   1. Evite concepções que possam provocar intermitência do ecrã, até que os agentes do utilizador possibilitem o seu controlo. (Prioridade 1)
   2. Evite concepções que possam provocar o piscar (modificação do conteúdo em intervalos constantes) do conteúdo das páginas, até que os agentes do utilizador possibilitem o seu controlo. (Prioridade 2)
   3. Enquanto os agentes do utilizador não permitam congelar o movimento do conteúdo, não use movimento nas páginas. (Prioridade 2)
   4. Não crie páginas de reiniciar periodicamente automáticas, até que os agentes do utilizador possibilitem interromper o processo. (Prioridade 2)
   5. Não use a notação para redireccionar páginas automaticamente até que os agentes do utilizador disponham da capacidade para interromper o processo. Em vez disso, aconselha-se a configurar o servidor para executar esse redireccionamento. (Prioridade 2)

8. Assegure a acessibilidade directa das interfaces incorporadas

   1. Faça com que os elementos programáveis tais como scripts e applets sejam directamente acessíveis ou compatíveis com tecnologias de apoio. (Prioridade 1 se a funcionalidade é importante e não se encontra noutro local de forma redundante e acessível; caso contrário, Prioridade 2)

9. Desenhe tendo em conta diversos dispositivos

   1. Providencie mapas de imagens client-side em vez de mapas de imagens server-side, excepto quando as regiões não possam ser definidas por uma das figuras geométricas disponíveis. (Prioridade 1)
   2. Certifique-se de que qualquer elemento dotado de interface própria funciona independentemente do dispositivo utilizado. (Prioridade 2)
   3. No caso dos scripts, especifique manipuladores de eventos por software em vez de manipuladores de eventos dependentes de dispositivos. (Prioridade 2)
   4. Crie uma sequência lógica de tabs para percorrer as hiperligações, controlos de formulários e objectos. (Prioridade 3)
   5. Defina teclas de atalho para hiperligações importantes (incluindo os que se encontram nos mapas de imagem client-side), controlos de formulário, e grupos de controlos de formulários. (Prioridade 3)

10. Utilize soluções provisórias

    1. Não provocar o aparecimento de janelas de sobreposição ou outras, e não fazer com que a janela actual seja modificada sem que o utilizador disso seja informado, até que os agentes do utilizador tornem possível a desactivação de janelas secundárias. (Prioridade 2)
    2. Até que os agentes do utilizador suportem associações explícitas entre os rótulos e os controlos de formulário, para todos os controlos com rótulos implicitamente associados, certifique-se que os rótulos se encontram apropriadamente posicionados. (Prioridade 2)
    3. Até que os agentes do utilizador identifiquem correctamente o texto colocado lado a lado, disponibilize uma alternativa linear do texto (na página actual ou numa outra) para todas as tabelas que disponham o texto de forma paralela, ao longo dos limites das colunas. (Prioridade 3)
    4. Até que os agentes do utilizador consigam manipular controlos vazios correctamente, inclua caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto. (Prioridade 3)
    5. Até que os agentes do utilizador consigam distinguir hiperligações adjacentes, inclua caracteres não-linkados, circundados por espaços, entre as hiperligações adjacentes. (Prioridade 3)

11. Utilize as tecnologias e directrizes do W3C

    1. Use tecnologias W3C quando a mesma esteja disponível e seja apropriada para uma tarefa. Utilize as versões mais recentes, desde que suportadas. (Prioridade 2)
    2. Evite o uso de notação obsoleta das tecnologias do W3C. (Prioridade 2)
    3. Disponibilize a informação necessária para que os utilizadores recebam os documentos de acordo com as suas preferências. Por exemplo: idioma, tipo de conteúdo, etc. (Prioridade 3)
    4. Se, depois de todos os esforços, não conseguir criar uma página acessível, forneça uma hiperligação para uma página alternativa que use as tecnologias W3C na sua versão acessível, com informação equivalente (ou com as mesmas funcionalidades), que seja actualizada tantas vezes quantas as páginas inacessíveis (originais). (Prioridade 1)

12. Proporcione informação contextual e de orientação

    1. Forneça um título (<TITLE>) para cada FRAME, facilitando assim a sua identificação e navegação. (Prioridade 1)
    2. Descreva o propósito das fremes e a forma como as mesmas estão relacionadas umas com as outras, caso essa relação, suportada apenas nos títulos das frames, não seja óbvia para o utilizador. (Prioridade 2)
    3. Divida grandes blocos de informação em grupos mais geríveis e apropriados. (Prioridade 2)
    4. Associe explicitamente os rótulos aos respectivos controlos. (Prioridade 2)

13. Proporcione mecanismos claros de navegação

    1. Identifique claramente o destino de cada hiperligação. (Prioridade 2)
    2. Forneça meta dados para acrescentar informações semânticas às páginas e aos sítios Web. (Prioridade 2)
    3. Forneça informação sobre a organização geral do sítio Web (e.g. mapa do site, índice). (Prioridade 2)
    4. Use mecanismos de navegação de uma forma consistente. (Prioridade 2)
    5. Providencie barras de navegação para salientar e dar acesso aos mecanismos de navegação. De preferência faça uso de elementos de notação para listas (<ul>…<ol>) para estruturar esses mecanismos. Use CSS para lhes dar estilo. (Prioridade 3)
    6. Agrupe hiperligações relacionados, identifique o grupo (em benefício dos agentes do utilizador) e, até que os agentes do utilizador o façam, forneça uma forma de saltar um grupo. (Prioridade 3)
    7. Caso seja fornecida uma função de pesquisa, active diferentes tipos de pesquisa de modo a corresponderem a diferentes níveis de competências e às preferências dos utilizadores. (Prioridade 3)
    8. Coloque informação diferenciada no início dos cabeçalhos, parágrafos, listas, etc. (Prioridade 3)
    9. Providencie informação sobre colecções de documentos (i.e. documentos compostos por múltiplas páginas). (Prioridade 3)
    10. Providencie um meio de saltar por cima de múltiplas linhas em arte ASCII. (Prioridade 3)

14. Assegure-se que os documentos são claros e fáceis

    1. Use linguagem clara e o mais simples possível apropriada ao conteúdo do sítio Web. (Prioridade 1)
       1. Reforce a mensagem texto através de gráficos e/ou áudio na medida em que os mesmos facilitem a compreensão da página. (Prioridade 3)
    2. Crie um estilo de apresentação que seja consistente ao longo das páginas. (Prioridade 3)

Estas directrizes permitem a análise automática feita no próximo post, pela ferramente Hera.

Skills for Acess – como curiosidade, uma pequena ligação a um estudo de caso no que toca ao design de um pacote multimédia acessível a pessoas com dislexia.