Neste mês foi lançada a versão CCA1.1, atualizando e ampliando a versão anterior. Este documento substitui o documento da versão anterior que para fins de arquivo e consultas foi movido para http://www.maujor.com/tutorial/ccanalyser-v1.php
Esta ferramenta foi desenvolvida pelo WAC-T que é um consórcio para desenvolvimento de ferramentas para acessibiliade a Web com sede na Austrália. Esta ferramenta foi por mim traduzida no ano passado quando foi lançada a versão 1.0 em português.
Traduzi também a barra de ferramentas para acessibilidade a Web que é instalada no Internet Explorer e foi desenvolvida pelo WAT-C. Esta ferramenta exerce todas as funções e mais umas tantas outras da Web Developer Tool Bar para o Firefox
Você pode conhecer com detalhes a AIS Toolbar em português no tutorial Funções da barra de ferramentas do consórcio WAT.
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. Ela dispõe ainda de funcionalidades que fazem simulações de determinadas condições visuais tais como a cegueira cromática.
A determinação da “visibilidade de cores” baseia-se em dois conjuntos de algorítimos: Índice de contraste de luminosidade e Diferença de cor e de brilho, sugeridos pelo World Wide Web Consortium (W3C):
Nota: É importante lembrar que nem o índice de contraste de luminosidade nem o algorítimo de combinação de cores sugeridos pela AERT são ou foram recomendações; são sugestões de dois grupos de trabalho da WAI para auxiliar na determinação se o contraste entre duas cores é suficiente para leitura por pessoas com restrições visuais.
A Diretriz 1.4 das WCAG 2 (rascunho) prevê este índice que destina-se a facilitar a distinção entre o primeiro plano e imagens ou sons de fundo.
O algorítimo de cálculo do índice de contraste de luminosidade será uma recomendação, quando WCAG 2 passar ao status de Recomendação e caso não seja retirada do rascunho atual. O algorítimo foi desenvolvido por Gregg Vanderheiden, Dave Kelso e Aries Arditi do Trace R&D Center.
(L1+.05) / (L2+.05) onde L é a luminosidade e definida como .2126*R + .7152*G + .0722B usando valores linearizados de R, G e B. R linearizado (por exemplo) = (R/FS)^2.2 onde FS é a escala completa de valores (255 para canal de cores 8 bit). L1 é o maior valor (cor do texto ou do fundo) e L2 é o menor valor.
A correção Gamma e a constante RGB são derivadas da Standard Default Color Space for the Internet (sRGB) , e o valor 0.05 de offset é para compensar índice de contrastes para valores próximos a zero e para efeitos de luz no ambiente.
Este algorítimo foi sugerido no rascunho de trabalho de 26 de abril de 2000 do Accessibility Evaluation and Repair Tools (AERT).
"Considera-se que duas cores oferecem boas condições de visibilidade se o valor que mede a diferença entre suas cores e a diferença entre seus brilhos forem maiores do que os de uma determinada faixa.
" A faixa sugerida pelo W3C é (maior que) > 125 para a diferença de brilho e (maior que) > 500 para a diferença da cor.
Nota: Hewlett Packard (HP) disponibiliza uma ferramenta para verificação do contraste de coresl que se utiliza do algorítimo do W3C, contudo adota uma faixa de valores (maiores que) > 400 para a diferença de cores, resultando em uma tolerância maior para combinação de cores de primeiro plano com cores de fundo.
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.
Note: Este algoritmo baseia-se em uma fórmula de conversão de valores RGB para valalores YIQ. O valor calculado pela fórmula, oferece o grau de percepção para o brilho da cor.
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.
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.
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”.
A interface do usuário consiste de 5 seções
Os controles para escolha da cor dividem-se em 2 seções (fundo e primeiro plano) sendo que cada uma delas oferece 4 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: A criação desta funcionalidade inspirou-se na ferramenta Color Palette Creator.
Entrada do valor da cor (em formato Hexadecimal ou RGB) em uma caixa de texto. Esta opção é útil quando você conhece o valor Hex ou RGB das cores a testar.
Nota: O formato para entrada do valor da cor pode ser alterado via o menu “opções > formato para valor das cores”
Por amostra de cores tomada de uma página web (ou de qualquer outro lugar da tela) usando um seletor ampliador.
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
Cursor deslizante para escolha de cores vermelha verde e azul
A criação desta funcionalidade inspirou-se na ferramenta verificador de contraste de cores em snook.ca. Obrigado a pixeldiva pela sugestão da sua inclusão no Analisador de Contraste de Cores.
A seção dos Resultados está dividida em um ícone passou/falhou e textos de resultados em sumário e texto de resultados completos: Um resultado que passou é indicado por uma marca tipo ‘ticado’ (em forma de V). Um resultado que falhou é indicado por um X (xis). Uma caixa de texto mostra o resultado escrito em fundo e primeiro plano nas cores testadas.
Os ‘Resultados Completos’ mostram os valores das cores testadas, descreve os critérios usados para aprovar ou reprovar e indica se o contraste calculado é suficiente ou insuficiente.
Nota: Ativando o botão "copiar resultados" os resultados podem ser copiados para a área de transferência (clipboard)
Marcando o checkbox ‘Mostrar 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.
Selecionar a opção ‘Sempre à frente’ fará com que a janela do ACC permaneça sempre sobre todas as demais janelas abertas na tela. Selecionar a opção ‘Font’
abrirá uma caixa de diálogo que permite alterar o tamanho da fonte usada nos rótulos textuais e no conteúdo do ACC. Selecionar ‘formato para valor das cores’ permite escolher valor Hex ou RGB. Selecionar ‘algorítimo’ permite escolher o algoritimo para testar a luminosidade cor/brilho.
Nota: a seleção de alguns tipos ou tamanhos de fontes pode causar uma área de corte nos textos.
O menu ‘Simulações’ oferece três opções para simular diversos tipos de restrições visuais.
Escolher a opção ‘Selecionar janela (Lista)’ abrirá uma caixa dimensionável denominada ‘Lista de janelas’ e será apresentada uma lista das janelas que você tem abertas no seu computador. Escolha uma delas, marque o checkbox da restrição visual a simular e pressione o botão ‘Visão prévia’. Em alguns segundos a janela escolhida será apresentada à direita simulando a restrição escolhida. Marque outro checkbox, pressione ‘Visão prévia’ e o processo se repetirá.
Agindo no botão ‘Gravar’ você poderá salvar no seu HD uma imagem JPG com o nível de compressão e com ou sem suavização.
Escolher a opção ‘Selecionar arquivo de imagem’ abrirá uma caixa dimensionável denominada ‘Converter arquivo de imagem’. Pressionar o botão ‘Navegar’ abrirá a janela de diálogo para acesso aos arquivos no HD, permitindo escolher uma imagem lá gravada. As simulações e gravação para uma imagem são feitas de modo semelhante ao mostrado no item anterior.
Escolher a opção ‘Visor’ abrirá uma caixa não dimensionável denominada ‘Screen convert’. Clique sobre a barra em cima da caixa e arraste pela tela até a área onde fazer a simulação. Opcionalmente, após abrir o visor ative o modo de movimento teclando M e movimente a caixa com as setas do teclado. Tendo colocado o visor sobre a área a simular, escolha no menu select ‘Simulação’ o tipo de restrição visual a simular.
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..
| Função | Tecla(s) |
|---|---|
| movimenta pelos controles | tecla tab |
| 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 |
| move os controles deslizantes vermelho, verde e azul | setas |
| sempre à frente | ctrl+S |
| seleção por valor – hex | ctrl+E |
| seleção por valor – RGB | ctrl+R |
| algoritimo – luminosidade | ctrl+L |
| algoritimo – diferença de brilho | ctrl+O |
| simulações – seleção por janela | ctrl+I |
| Ajuda | ctrl+H |
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
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 .
Leia por favor: O Analisador de Contraste de Cores não contém qualquer adware ou spyware.
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
O Analisador de Contraste de Cores foi desenvolvido por JUn do Wrong HTML
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 em seu site e pelo feedback durante a fase de desenvolvimento do CCA. Muito obrigado também a Andrew Arch, Sofia Celic e pixeldiva por seus comentários e sugestões.
Email Steve Faulkner [steven.faulkner@nils.org.au]
NT: Toda a documentação listada a seguir está escrita em inglês
Trenton Moss from Webcredible: Using the Web Accessibility Toolbar
Steven Faulkner from AIS: Using the AIS Web Accessibility Toolbar
Juicy Studio – Luminosity Contrast Ratio Analyser online service.
If you're interested in contributing to the translation and localisation of our tools, please contact: Steve Faulkner [AIS]
steven.faulkner@nils.org.au
We develop customised versions of our tools to suit the web accessibility testing requirements of Government, Educational, Corporate and Not for Profit organisations.
Contact: Steve Faulkner [AIS]
steven.faulkner@nils.org.au
(C) 2005 Web Accessibility Tools Consortium [WAT-C]
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Olá Maurício
Fiquei surpreso quando vi seu comentário no meu blog.
Como você achou ele?
Criei esses dias…
Obrigado pelos Parabéns.
Grande abraço!
Artigo maravilhoso... bastante completo!
Muito bom, de bastante utilidade... bem legal essa idéia...
parabéns ae maurício
Caramba eim ótimo trabalho!
Parabéns