Niquelao » Extensão colorChecker

» Extensão colorChecker Niquelao Como é que dizes que ficou? 25 de Maio, 2008 por Rumoroso —> Acessibilidade web Extensão colorChecker Atualizado a 25 de Maio de 2008, por Rumoroso Antes de mais, aqui está a ligação para a extensão Extensão colorChecker e também em Firefox Add-ons .

Através desta extensão é possível verificar se a combinação de duas cores é adequada para a sua perceção visual com base nos requisitos das WCAG 1 e WCAG 2 , utilizando para isso o algoritmo que estas propõem. WCAG 1. Guideline 2. Don’t rely on color alone.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]. WCAG 2. Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 5:1, except for the following: (Level AA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 5:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Características da extensão A extensão é apresentada num painel lateral e oferece os resultados tanto para condições normais de visão, como para as situações de dificuldade na perceção da cor (Protanopia, Deuteranopia e Tritanopia). Dado que se considera mais preciso o incluído nas WCAG 2, este é o resultado que inicialmente é apresentado por defeito. Measure the relative luminance of each letter (unless they are all uniform) using the formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R , G and B are defined as: if R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4 if G sRGB <= 0.03928 then G = G sRGB /12.92 else G = ((G sRGB +0.055)/1.055) ^ 2.4 if B sRGB <= 0.03928 then B = B sRGB /12.92 else B = ((B sRGB +0.055)/1.055) ^ 2.4 and R sRGB , G sRGB , and B sRGB are defined as: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /255 The “^” character is the exponentiation operator.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter. Measure the relative luminance of the background pixels immediately next to the letter using same formula.

Calculate the contrast ratio using the following formula. (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter of the foreground or background colors, and L2 is the relative luminance of the darker of the foreground or background colors. Check that the contrast ratio is equal to or greater than 7:1 O código de cor pode ser introduzido tanto em formato hexadecimal (de forma abreviada ou não, e tanto com cardinal como sem ele), como em RGB (podendo usar diferentes separadores entre os valores, como por exemplo a vírgula ou os dois pontos).

Ex: Em hexadecimal poderia colocar-se: #FC5 ou FC5 ou FFCC55 Em formato RGB poderia colocar-se: 231,28,197 ou 231:28:197 ou rgb(231,28,197) A utilização da extensão colorChecker pode ser combinada com a extensão ColorZilla , pois esta permite selecionar diretamente a partir do documento web (e copiar para a área de transferência) a cor que se pretende verificar. Se tiver essa extensão instalada, o colorchecker reconhecerá a sua presença. Neste caso, ao premir Shift + Z ou Shift + X ativar-se-á o eyedropper do ColorZilla e enviará de forma automática, quer a cor de primeiro plano, quer a de fundo, para o colorChecker para a sua análise.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

O painel lateral é aberto a partir do menu ferramentas do navegador, ou premindo no ícone apresentado na barra de estado, ou ainda, com a combinação de teclas alt + c . Se depois de ler isto já está convencido de que quer experimentar a extensão, aqui está novamente a ligação para a extensão colorChecker , que também poderá instalar a partir de Firefox Add-ons Na simulação para obter os valores correspondentes a problemas na perceção da cor, o algoritmo utilizado baseia-se no algoritmo descrito por Hans Brettel, Francoise Vienot e John Mollon no seu artigo publicado no Journal of the Optical Society of America V14, #10 pp2647, e na adaptação incluída no módulo correspondente do Gimp e cujos créditos correspondem a: Michael Natterer (mitch@gimp.org) Sven Neumann (sven@gimp.org) Robert Dougherty (bob@vischeck.com) Alex Wade (alex@vischeck.com) Pode acompanhar os comentários através do feed RSS 2.0 .

Também poderá deixar um comentário , ou enviar um trackback com o endereço http://www.niquelao.net/extension-colorchecker/trackback/ a partir do seu site. 1 comentário Firefox Add-ons (25 de Maio de 2008) […] Através desta extensão é possível verificar se duas cores apresentam contraste suficiente entre si com base nos requisitos das WCAG 1 e WCAG 2. […] Pode acompanhar os comentários através do feed RSS 2.0 .

Também poderá deixar um comentário, ou enviar um trackback a partir do seu site. Esta obra está sob uma licença de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.