Niquelao » Rozszerzenie colorChecker

» Rozszerzenie colorChecker Niquelao Jak mówisz, że wyszło? 25 maja 2008 przez Rumoroso —> Dostępność stron internetowych Rozszerzenie colorChecker Zaktualizowano 25 maja 2008 przez Rumoroso Przede wszystkim, oto link do rozszerzenia Rozszerzenie colorChecker, a także w Firefox Add-ons.

Za pomocą tego rozszerzenia można sprawdzić, czy kombinacja dwóch kolorów jest odpowiednia pod kątem percepcji wzrokowej, zgodnie z wymaganiami WCAG 1 i WCAG 2, wykorzystując w tym celu proponowany przez nie algorytm. WCAG 1. Wytyczna 2. Nie polegaj wyłącznie na kolorze.

2.2 Zapewnij, aby kombinacje kolorów pierwszego planu i tła zapewniały wystarczający kontrast, gdy są postrzegane przez osobę z deficytami widzenia kolorów lub na ekranie czarno-białym. [Priorytet 2 dla obrazów, Priorytet 3 dla tekstu]. WCAG 2. Wytyczna 1.4 Rozróżnialność: Ułatw użytkownikom dostrzeganie i słyszenie treści, w tym oddzielanie pierwszego planu od tła.

1.4.3 Kontrast (minimalny): Wizualna prezentacja tekstu i obrazów tekstu ma współczynnik kontrastu wynoszący co najmniej 5:1, z wyjątkiem następujących przypadków: (Poziom AA) Duży tekst: Duży tekst i obrazy dużego tekstu mają współczynnik kontrastu wynoszący co najmniej 3:1; Przypadkowy: Tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika, które są czystą dekoracją, które są przypadkowym tekstem na obrazie lub które nie są widoczne dla nikogo, nie mają minimalnego wymogu kontrastu.

Logotypy: Tekst będący częścią logo lub nazwy marki nie ma minimalnego wymogu kontrastu. 1.4.6 Kontrast (wzmocniony): Wizualna prezentacja tekstu i obrazów tekstu ma współczynnik kontrastu wynoszący co najmniej 7:1, z wyjątkiem następujących przypadków: (Poziom AAA) Duży tekst: Duży tekst i obrazy dużego tekstu mają współczynnik kontrastu wynoszący co najmniej 5:1; Przypadkowy: Tekst lub obrazy tekstu, które są częścią nieaktywnego komponentu interfejsu użytkownika, które są czystą dekoracją, które są przypadkowym tekstem na obrazie lub które nie są widoczne dla nikogo, nie mają minimalnego wymogu kontrastu.

Logotypy: Tekst będący częścią logo lub nazwy marki nie ma minimalnego wymogu kontrastu. Cechy rozszerzenia Rozszerzenie wyświetla się w panelu bocznym i oferuje wyniki zarówno dla normalnych warunków widzenia, jak i dla sytuacji utrudnionej percepcji kolorów (Protanopia, Deuteranopia i Tritanopia). Ponieważ za dokładniejszy uznaje się ten zawarty w WCAG 2, ten wynik jest początkowo wyświetlany domyślnie. Zmierz względną luminancję każdej litery (chyba że wszystkie są jednolite), korzystając ze wzoru: L = 0.2126 * R + 0.7152 * G + 0.0722 * B gdzie R, G i B są zdefiniowane jako: jeśli R sRGB <= 0.03928 to R = R sRGB /12.92 w przeciwnym razie R = ((R sRGB +0.055)/1.055) ^ 2.4 jeśli G sRGB <= 0.03928 to G = G sRGB /12.92 w przeciwnym razie G = ((G sRGB +0.055)/1.055) ^ 2.4 jeśli B sRGB <= 0.03928 to B = B sRGB /12.92 w przeciwnym razie B = ((B sRGB +0.055)/1.055) ^ 2.4 a R sRGB, G sRGB i B sRGB są zdefiniowane jako: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /255 Znak „^” jest operatorem potęgowania.

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

Uwaga: W przypadku liter z aliasowaniem użyj wartości względnej luminancji znalezionej dwa piksele od krawędzi litery. Zmierz względną luminancję pikseli tła bezpośrednio sąsiadujących z literą, korzystając z tego samego wzoru.

Oblicz współczynnik kontrastu, korzystając z następującego wzoru. (L1 + 0.05) / (L2 + 0.05), gdzie L1 to względna luminancja jaśniejszego z kolorów pierwszego planu lub tła, a L2 to względna luminancja ciemniejszego z kolorów pierwszego planu lub tła. Sprawdź, czy współczynnik kontrastu jest równy lub większy niż 7:1 Kod koloru można wprowadzić zarówno w formacie szesnastkowym (w formie skróconej lub nie, zarówno z krzyżykiem, jak i bez niego), jak i w RGB (można użyć różnych separatorów między wartościami, na przykład przecinka lub dwukropka).

Przykład: W formacie szesnastkowym można podać: #FC5 lub FC5 lub FFCC55 W formacie RGB można podać: 231,28,197 lub 231:28:197 lub rgb(231,28,197) Korzystanie z rozszerzenia colorChecker można połączyć z rozszerzeniem ColorZilla, ponieważ pozwala ono wybrać bezpośrednio z dokumentu internetowego (i skopiować do schowka) kolor, który chce się sprawdzić. Jeśli to rozszerzenie jest zainstalowane, colorchecker rozpozna jego obecność. W takim przypadku naciśnięcie Shift + Z lub Shift + X aktywuje eyedropper ColorZilla i automatycznie wyśle albo kolor pierwszego planu, albo tła do colorChecker w celu analizy.

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

Panel boczny rozwija się z menu narzędzi przeglądarki, albo przez kliknięcie ikony wyświetlanej na pasku stanu, a nawet za pomocą kombinacji klawiszy alt + c. Jeśli po przeczytaniu tego jesteś już przekonany, że chcesz wypróbować rozszerzenie, oto ponownie link do rozszerzenia colorChecker, które możesz także zainstalować z Firefox Add-ons W symulacji służącej do uzyskania wartości odpowiadających problemom z percepcją kolorów zastosowany algorytm opiera się na algorytmie opisanym przez Hansa Brettela, Francoise Vienot i Johna Mollona w ich artykule opublikowanym w Journal of the Optical Society of America V14, #10 pp2647, oraz na adaptacji zawartej w odpowiednim module Gimp, której autorami są: Michael Natterer (mitch@gimp.org) Sven Neumann (sven@gimp.org) Robert Dougherty (bob@vischeck.com) Alex Wade (alex@vischeck.com) Możesz śledzić komentarze dzięki kanałowi RSS 2.0.

Możesz też zostawić komentarz lub wysłać trackback z adresem http://www.niquelao.net/extension-colorchecker/trackback/ ze swojej strony. 1 komentarz Firefox Add-ons (25 maja 2008) […] Za pomocą tego rozszerzenia można sprawdzić, czy dwa kolory mają wystarczający kontrast między sobą, zgodnie z wymaganiami WCAG 1 i WCAG 2. […] Możesz śledzić komentarze dzięki kanałowi RSS 2.0.

Możesz też zostawić komentarz lub wysłać trackback ze swojej strony. Ta praca jest objęta licencją 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.