Analisador de Contraste de Cores 1.0
Publicado em: 29/11/2005Já foi lançada a versão CCA1.1 desta ferramenta. Este documento permanece para fins de consulta e histórico. Consulte a versão atual em: https://www.maujor.com/tutorial/ccanalyser.php
Introdução
Gez Lemon desenvolvedor do site Juicy Studio apresentou-me a Steven Faulkner do Vision Australia Limited, uma Companhia australiana com foco em pessoas com necessidades especiais e que mantém um site voltado para esta área. Entre seus inúmeros serviços a Vision Australia desenvolveu uma ferramenta freeware para ser usada por desenvolvedores de sites e com a finalidade de analisar o contraste de cores em um web site. Fui convidado por Steven Faulkner a traduzir a interface e a documentação da ferramenta para o português. O resultado do trabalho está publicado no site da Web Accessibility Tools Consortium e eu transcrevo nesta matéria a mesma documentação que traduzi.
Índice
- O que é Analisador de Contraste de Cores?
- Fórmula para cálculo do brilho de uma cor
- Fórmula para cálculo da diferença entre duas cores
- Usos
- Usando o ACC
- Uso via teclado
- Notas sobre as condições de uso
- Download e Instruções para Instalação
- Sobre
- Extensão para Firefox - Atualizado em 2006-03-08
O que é Analisador de contraste de cores?
O analisador de contraste de cores é uma ferramenta para verificar se determinada combinação de cores para o fundo e para o primeiro plano, oferece boas condições de visibilidade. A determinação da "visibilidade de cores" baseia-se em um algoritmo sugerido pelo World Wide Web Consortium (W3C):
"Considera-se que duas cores oferecem boas condições de visibilidade se a diferença de brilho e a diferença de cor entre elas for maior do que um determinado intervalo. "O valor sugerido pelo W3C é (maior que) > 125 para a diferença de brilho e (maior que) > 500 para a diferença de cor.
Nota: A Hewlett Packard (HP) disponibiliza online uma ferramenta para verificação do contraste de cores que se utiliza do algoritmo do W3C, mas estabelece o limite > 400 para a diferença de cor, o que implica em um faixa maior de cores aceitáveis para a combinações fundo e primeiro plano.
Fórmula para cálculo do brilho de uma cor
O brilho de uma cor é determinado pela seguinte fórmula:
((valor vermelho X 299) + (valor verde X 587) + (valor azul X 114)) / 1000
A diferença entre os valores encontrados para o brilho do fundo e do primeiro plano deverá ser maior do que 125.
Nota: Este algoritmo provem de uma fórmula de conversão de valores RGB para YIQ. O valor calculado pela fórmula, oferece o grau de percepção para o brilho da cor.
Fórmula para cálculo da diferença entre duas cores
A diferença de cor entre duas cores é determinada pela seguinte fórmula:
(máximo (valor vermelho 1, valor vermelho 2) - mínimo (valor vermelho 1, valor vermelho 2)) + (máximo (valor verde 1, valor verde 2) - mínimo (valor verde 1, valor verde 2)) + (máximo (valor azul 1, valor azul 2) - mínimo (valor azul 1, valor azul 2))
A diferença entre a cor de fundo e a cor do primeiro plano deve ser maior do que 500.
Usos
O Analisador de Contraste de Cores (ACC) é útil particularmente para determinação da legibilidade dos textos em uma página web, bem como a legibilidade de imagens utilizadas para representar textos.
Estabelecendo conformidade com o Ponto de Verificação 2.2 das Recomendações para a acessibilidade do conteúdo da Web - 1.0
O Ponto de verificação 2.2 das WCAG 1.0 estabelece que a
combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiências, bem como pelas que utilizam monitores de vídeo monocromáticos."
Use o ACC para testar a combinação de cores segundo o algoritmo sugerido pelo W3C para verificar se o "contraste é suficiente".
Usando o ACC
A interface do usuário consiste de 4 seções
1. Escolha da cor
Os controles para escolha da cor dividem-se em 2 seções (fundo e primeiro plano) sendo que cada uma delas oferece três maneiras para escolher a cor a testar.
- Paleta(s) de cores acessível por uma caixa de seleção (select box). O uso desta opção oferece uma ajuda para experimentar e selecionar combinações adequadas.
Uma paleta (menor) localizada na parte inferior, fornece 10 tonalidades para a cor atual escolhida, disponível em difentes graus de opacidade e visível no canto superior esquerdo. Nesta paleta menor a linha de cima simula a opacidade da cor sobre um fundo branco e a linha de baixo sobre um fundo preto. Os valores da opacidade são de 100% opaco, 75%, 50%, 25% e 10% para a linha de cima. Para a linha de baixo o valor inicial é de 85% em lugar de 100% e os demais valores são iguais ao da linha de cima .
Esta paleta é útil para testar tons mais claros e mais escuros de uma cor base, com a finalidade de aumentar a visibilidade da combinação de cores que está sendo testada.
Nota: Esta funcionalidade foi inspirada na Color Palette Creator.
- Entrada do valor da cor (em formato Hexadecimal ) em uma caixa de texto. Esta opção é útil quando você conhece o valor Hex das cores a testar.
- Por amostra de cores tomada de uma página web (ou de qualquer outro lugar da tela) usando um seletor de cores
Esta opção é útil para testes rápidos e para obtenção do valor haxadecimal de uma cor. Ao se clicar sobre o botão do seletor de cores uma área ampliada será mostrada em volta do cursor do mouse. Apontando o cursor sobre uma cor na tela ela irá aparecer na caixa da paleta de cores
Uma vez selecionada a cor com o ponteiro do mouse (para selecionar dar um clique com o botão esquerdo ou pressionar 'enter' no teclado) o valor hexadecimal da cor irá aparecer em 'hex valor' na caixa de texto e o resultado do teste será atualizado de modo a refletir o valor do brilho e a da diferença de cor para a nova combinação de cores selecionadas.
Nota: Para um ajuste fino da posição do ponteiro do mouse sobre uma cor, use as setas do teclado.
2. Resultados
A seção dos Resultados está dividida em Sumário dos Resultados e Resultados Completos.
O 'Sumário dos Resultados' fornece os valores obtidos para o brilho e para a diferença de cores.
Se ambos os valores passarem no teste será colacada uma marca tipo 'ticada' (em forma de V à esquerda). Se um dos valores não passar a marca será em forma de um 'xis'
Os 'Resultados Completos' mostram os resultados para cada uma das verificações descrevendo os critérios usados para aprovar ou reprovar e indicando se o contraste calculado é suficiente ou insuficiente.
Nota: O texto apresentado no sumário e no resultado completo pode ser selecionado e copiado.
3. Resultados para cegueira cromática
Marcando-se o check box 'mostre também os resultados para 'cegueira cromática' será apresentado um sumário dos resultados para 'visão normal' e para 3 tipos de cegueira cromática(Protanopia, Deuteranopia, Tritanopia)
Nota: O método para determinar os valores de transformação de cores para os 3 tipos de deficiência baseia-se no algoritmo descrito por Hans Brettel , Francoise Vienot e John Mollon em um escrito contido no Journal of the Optical Society of America V14, #10 pp2647.
Agradecimentos ao amável pessoal do Vischeck que permitiu nosso acesso ao código fonte de implementação do algoritmo de Brettel.
4. Opções e Menus de ajuda
Selecionar a opção 'Sempre à frente' no menu fará com que a janela do ACC permaneça sempre sobre todas as demais janelas abertas na tela. Selecionar a opção 'Font' no menu abrirá uma caixa de diálogo que permite alterar o tamanho da fonte usada nos rótulos textuais e no conteúdo do ACC
Nota: a seleção de alguns tipos ou tamanhos de fontes pode causar uma área de corte nos textos.
Selecionar o menu "Ajuda" 
abrirá uma janela com a página web que contém a documentação do ACC
Nota: você precisa estar conectado à Internet para acessar a citada documentação.
Uso via teclado
| Função | Tecla(s) |
|---|---|
| abre a paleta(s) para cor do primeiro plano | F9 |
| abre a paleta(s) para cor do fundo | F10 |
| movimenta-se pelas cores da paleta | setas e tab |
| ativa o seletor de cores para o primeiro plano | F11 |
| ativa o seletor de cores para o fundo | F12 |
| movimenta o seletor de cores | setas |
| escolhe uma cor no seletor ou na paleta | Enter |
Notas sobre as condições de uso:
O Analisador de Contraste de Cores é Freeware.
Ao acessar e utilizar o Analisador de Contraste de Cores esta implicito que você leu, entendeu e concorda com os Termos de Uso do Analisador de Contraste de Cores e com os Termos de Uso do Vision Australia Website.
ESTE SOFTWARE É DISTRIBUIDO "COMO É", SEM QUALQUER TIPO DE GARANTIA SEJA EXPRESSA OU IMPLICITA. O VISION AUSTRALIA EM PARTICULAR NÃO REPRESENTA NÃO DÁ GARANTIA DE RESPONSABILIDADE, QUALIDADE OU COMERCIALIZAÇÃO DESTE SOFTWARE OU DE SUA ADEQUAÇÃO PARA QUALQUER PRÓPOSITO PARTICULAR. ADICIONALMENTE, O VISION AUSTRALIA NÃO GARANTE QUE O USO DESTE SOFTWARE ASSEGURE ACESSIBILIDADE AO SEU CONTEÚDO WEB OU QUE O SEU CONTEÚDO WEB CUMPRA QUALQUER ITEM ESPECÍFICO DE UMA NORMA DE ACESSIBILIDADE.
Este trabalho está licenciado sobre as condições do Creative Commons License 
.
Download e Instruções para Instalação
Leia por favor: O Analisador de Contraste de Cores não contém qualquer adware ou spyware.
Sistema Mínimo
Microsoft Windows - Windows 2000 e XP
Download
Link para a página do WAT-C onde você poderá fazer o download da ferramenta.
Instruções de instalação
Faça o Download, descompacte e salve o ACC em um diretório de sua escolha. Para usar a aplicação ative o arquivo Colour_Contrast_Analyser.exe
Nota do tradutor: A ferramenta tem um tamanho total de apenas 202 kB. Se você quiser um acesso rápido à ferramenta sugiro o seguinte:
Vá ao diretório onde você salvou o ACC e crie um atalho para o arquivo Colour_Contrast_Analyser.exe (em Windows: clique com o botão direito sobre o ícone do arquivo e escolha a opção 'Create Shortcut'/ 'Criar atalho'.) Clique e arraste o ícone criado para a barra de ferramentas do windows. Assim você terá seu ACC á mão para uso imediato, sempre que precisar
Sobre
O Analisador de Contraste de Cores foi desenvolvido por JUn do Wrong HTML 
em colaboração com Steve Faulkner do Vision Australia.
Seu desenvolvimento foi inspirado por Juicy Studio Colour Contrast Analyser, pela HP colour contrast verification tool e pelo Color Visibility Test Program por Chris Ridpath da Universidade de Toronto
Obrigado a Gez Lemon do Juicy Studio pelo uso do conteúdo online do Colour Contrast Analyser.
Qualquer feedback sobre o Analisador de Contraste de Cores entre em contato via email
- Steven Faulkner (versão inglesa)
steven.faulkner@nils.org.au - JUn (versão japonesa)
jun@idena.jp - Juan Fuertes (versão espanhola)
juan.fuertes@dnxgroup.com - Roberto Castaldo (versão italiana)
rcastaldo@webaccessibile.org - Jedi (versão chinesa)
JediLin@Gmail.com - Sylvie Duchateau (versão francesa)
info@accessiweb.org - Juha-Markku Liikala (versão finlandesa)
rcastaldo@webaccessibile.org - Maurício Samy Silva (versão português do Brasil)
via web site
Extensão para Firefox
Gez Lemmon desenvolveu uma extensão do Analisador de Contraste de Cores para o navegador Firefox. A versão da extensão pode ser baixada neste link https://juicystudio.com/extensions/cca.xpi
Se você usa o Firefox como ferramenta de desenvolvimento aconselho vivamente a baixar a extensão. O link acima é para versões em diferentes idiomas. Ao baixar a extensão será instalada automaticamente a versão (se disponível) para o idioma configurado no navegador. Há uma versão para o idioma pt-br.
Após ter instalado a extensão reinicie o Firefox e vá ao menu Ferramentas > Analisador de contraste de cores ou clique com o botão direito e Analisador de contraste de cores. Se a extensão estiver vem inglês mude a configuração default de idioma do Firefox para pt-br. Para fazer a mudança do idioma baixe esta extensão
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
