Governo de Minas Portal Minas
Você esta aqui: Home | Dúvidas Gerais | Acessibilidade - Utilizando o Analisador de Contraste

Criar PDF Enviar por e-mail Imprimir

Acessibilidade - Utilizando o Analisador de Contraste

Resposta

Usando o CCA

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.

Download.

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

|| Telefones de Contato

Governo de Minas Area