Dzień 12: Bezpieczne użycie kolorów
Zagadnienie bezpiecznych kolorów dotyczy wielu aspektów tworzenia stron internetowych, ale skoncentrujemy się na specyficznym przykładzie: tekstach odnośników.
Istnieją dwa potencjalne problemy z kolorami. Po pierwsze tekst odnośnika może być nie wystarczająco kontrastowy w stosunku do koloru tła. Dowolny bardzo jasny kolor na białym tle to kłopot; tekst może po prostu „zniknąć” w tle. Podobnie ciemny kolor na czarnym tle. To generalnie dotyczy wszystkich tekstów, nie tylko odnośników, ale zwracam uwagę szczególnie na nie, ponieważ dosyć powszechnym zjawiskiem są strony, na których tekst główny jest co prawda czytelny, ale odnośniki są całkiem nie do rozpoznania.
Drugi potencjalny problem to wyróżnienie odnośnika pośród reszty tekstu. Jeżeli Twoje style CSS definiują kolor odnośników, powinieneś się upewnić, że te odnośniki są również rozróżnialne w jakiś inny sposób, np. pogrubione, pochyłe czy podkreślone. W innym przypadku tekst może być całkiem czytelny, jednak ludzie nie rozróżniający kolorów nie będą w stanie stwierdzić, że akurat ten tekst jest odnośnikiem. Taki przypadek jest opisany poniżej.
Kto na tym skorzysta?
Michał skorzysta. Poniżej jest przedstawiony fragment ekranu ze strony z trzema różnymi sposobami oznaczenia odnośników:

Jak widać, odnośnik w pierwszym zdaniu używa standardowego wyróżnienia, czyli w przeglądarkach graficznych jest niebieski (po odwiedzeniu fioletowy) oraz podkreślony. Drugi odnośnik jest oznaczony kolorem czerwonym oraz jest pogrubiony (chociaż nie podkreślony). Natomiast trzeci odnośnik jest oznaczony tylko kolorem czerwonym.
A oto ten sam fragment strony tak, jak ją widzi Michał:

Pierwszy odnośnik jest nadal widoczny; daltonizm Michała (protanopia) nie dotyczy koloru niebieskiego. W drugim zdaniu czerwony kolor zanika i staje się prawie czarny, ale odnośnik jest wciąż widoczny jako pogrubiony, więc Michał nadal może go dostrzec. Problem pojawia się przy trzecim odnośnika, który był wyróżniony tylko kolorem; w sytuacji kiedy czerwień zanika niemal do czerni, rozróżnienie które słowa są odnośnikiem, a które zwykłym tekstem jest praktycznie niemożliwe.
Jak to zrobić?
Aby sprawdzić „wystarczający kontrast” między kolorem tekstu a kolorem tła, możesz użyć narzędzi na stronie VisCheck i zasymulować wygląd Twojej strony dla czytelnika z daltonizmem.
Aby wyeliminować potencjalne problemy z oznaczeniem odnośników, sprawdź styl CSS dla taga „a”. Na przykład, jeżeli masz poniższą regułę w swoim arkuszu CSS, to odnośniki są oznaczone tylko przez zmianę koloru na czerwony, co jest niewystarczające:
a {
text-decoration: none;
color: red;
}
Możesz oczywiście zostawić oznaczenie kolorem czerwonym, ale musisz się również upewnić, że odnośniki będą dodatkowo oznaczone jakoś inaczej, np. pogrubione, podkreślone lub pochyłe. Na przykład, aby odnośniki były zarówno czerwone jak i pogrubione, dodaj jeszcze jedną linię:
a {
text-decoration: none;
color: red;
font-weight: bold;
}
Zobacz także (strony w języku angielskim)
- VisCheck symuluje różne odmiany daltonizmu i umożliwia sprawdzenie co dokładnie widzi na Twojej stronie czytelnik z zaburzeniem rozróżniania kolorów. Możesz sprawdzić pojedynczy obrazek albo całą stronę.
- Colorblind Web Page Filter. Kolejne bardzo użyteczne narzędzie pokazujące dowolną stronę po przejściu przez filtry symulujące najróżniejsze zaburzenia rozpoznawania kolorów.
- Cal Henderson: Color Vision. Pokazuje paletę kolorów widzianą przez ludzi z różnymi rodzajami daltonizmu.
- Ishihara Test for Color Blindness zawiera zestaw obrazów testowych, które osoby z zaburzeniami rozpoznawania koloru czerwonego i zielonego widzą inaczej, albo wcale.
Zmodyfikowano: 18.03.2006, 23:14