jhg Tutorial CSS - Analisador de Contraste de Cores

Analisador de Contraste de Cores 1.1

Publicado em: 03/05/2006

Nesta data foi criada 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


Nesta p?gina:

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. 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.

?ndice de contraste de luminosidade

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.

Diferença de cor e de brilho

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.

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.

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.

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.

Topo

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".

Topo


Usando o CCA

A interface do usu?rio consiste de 5 se??es
  1. Escolha da cor
  2. Resultados
  3. Resultados para cegueira cromática
  4. Simula??es
  5. Opções e Menus de ajuda

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 4 maneiras para escolher a cor a testar.

Interface para escolha da cor

  1. 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.

    Paleta de cores

    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.

  2. 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"

    Caixa de entrada de valor hex       Caixa de entrada de valor RGB

  3. Por amostra de cores tomada de uma p?gina web (ou de qualquer outro lugar da tela) usando um seletor ampliador. bot?o ampliador 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

    Exemplo da ?rea de amplia??o em volta do cursor quando o seletor de cores ? ativado. A cor sobre a ponta do cursor aparece na caixa de sele??o da paleta de cores

  4. Cursor deslizante para escolha de cores vermelha verde e azul

    Controles de escolha de cores vermelha verde 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.

2. Resultados

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.

?cone passou falhou e texto exemplo

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) Bot?o para c?pia dos resultados

Resultados do verificador de contraste

3. Resultados para cegueira crom?tica

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).

exemplo de resultados para cegueira crom?tica

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.

Topo

4. Op??es e Menus de ajuda

Op??es

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.

Menu Op??es

Simulações

O menu 'Simula??es' oferece três opções para simular diversos tipos de restrições visuais.

Menu Simula??es

Selecionar janela (Lista)

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.

 

Menu selecionar janela

Selecionar arquivo de imagem

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.

Menu converter arquivo imagem

Visor

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.

Menu visor

AjudaMenu ajuda

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..

Topo

Uso via teclado

Teclas de atalho para o Analisador de Contraste de Cores
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

Topo

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

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 Creative Commons Licence.

Topo

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 & XP

Download

Topo

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

Topo

Sobre

O Analisador de Contraste de Cores foi desenvolvido por JUn do Wrong HTML Wrong Html Logo 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 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.

Qualquer feedback sobre o Analisador de Contraste de Cores entre em contato

Email Steve Faulkner [steven.faulkner@nils.org.au]

Topo

NT: Toda a documentação listada a seguir está escrita em inglês

Articles:

Trenton Moss from Webcredible: Using the Web Accessibility Toolbar

Steven Faulkner from AIS: Using the AIS Web Accessibility Toolbar

Just Released:

Juicy Studio - Luminosity Contrast Ratio Analyser online service.

Tool Internationalisation

If you're interested in contributing to the translation and localisation of our tools, please contact: Steve Faulkner [AIS]
steven.faulkner@nils.org.au

Tool Customisation

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]

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil