Pomoc:Kontrast

Niektórzy z Twoich czytelników nie widzą wiki w ten sam sposób, co Ty. Mogą mieć problem z wrażliwością na kontrast – trudności w odczytaniem tekstu, który zbyt słabo odróżnia się od koloru tła (np. takiego). Choć czytanie czarnego tekstu na białym tle może być dla nich łatwe, inne kombinacje kolorów bywają dużo trudniejsze – czasem mogą nawet prowadzić do dyskomfortu i bólu głowy.

Na szczęście możesz im pomóc. Stosowanie się do przyjętych standardów kontrastu w internecie może sprawić, że więcej osób będzie mogło bez problemu czytać i cieszyć się treściami na Twojej wiki i zostanie na niej na dłużej.

Problem dla wszystkich czytelników

Istnieje wiele chorób wzroku, które mogą zniechęcić ludzi do pozostana na Twojej wiki. Jaskra, retinopatia^[1] czy astygmatyzm to tylko kilka z nich. Miej na uwadze, że czytelnicy każdej wiki, niezależnie od tematu, mogą mieć różnego rodzaju problemy ze wzrokiem.

Jednakże z wyższego kontrastu korzystają nie tylko osoby z wadami wzroku. Zły dobór kolorów może powodować zmęczenie oczu i dyskomfort również u osób z doskonałym wzrokiem i skłonić ich do zrezygnowania z odwiedzania Twojej wiki.^[2]

Współczynniki kontrastu

Więc jak poprawić kontrast Twojej wiki? Poprzez odpowiednie współczynniki kontrastu (CR). Choć istnieje sporo dowodów na skuteczność tych standardów webowych, ich znajomość nie jest wymagana, aby ulepszyć wiki.

Dostępne narzędzia

Wszystko, czego ci potrzeba, to proste w użyciu narzędzie – analizator kontrastu. Istnieje wiele darmowych opcji, np. Colorable zaprezentowany w filmie powyżej, jak również:

• WCAG Contrast Checker.
• Inspektor dostępności w Firefoksie
• Narzędzie wyboru koloru w Chrome,
• Inne rozszerzenia do przeglądarek sprawdzające współczynnik kontrastu.

Stosowanie się do standardów

W Internecie obowiązują dwa podstawowe standardy kontrastu: WCAG AA oraz WCAG AAA. Wszystkie narzędzia do testowania jasno pokażą, gdy osiągniesz odpowiedni poziom. Nigdy nie schodź poniżej poziomu AA, jeśli chodzi o kontrast między tłem a tekstem.^[3] Staraj się jednak osiągnąć AAA wszędzie, gdzie to możliwe, aby pomóc możliwie jak najszerszemu gronu użytkowników.^[4]

Aby spełnić standard AA, warto również zwracać uwagę również na kontrast elementów graficznych takich jak ikony, które są potrzebne do zrozumienia treści wiki.^[5] Muszą być równie łatwe do odczytania jak tekst – w innym wypadku czytelnikom może umknąć kontekst tekstu lub inne istotne informacje.

Zwróć również uwagę, by kolorystyka wiki pasowała też do jej tematyki. Choć styl jest ważny, czytelność i dostępność treści jest priorytetem.

Rozmiar ma znaczenie

Większe symbole nie potrzebują aż tak wysokiego kontrastu, aby dało się je łatwo odczytać. Dlatego możesz sobie pozwolić na nieco więcej swobody przy nagłówkach sekcji czy innych elementach interfejsu niż w treści artykułu. ' Analizatory kontrastu zwykle wskazują, czy dany CR został osiągnięty jedynie dla dużego tekstu. Jeśli nie ma adnotacji large lub podobnej, oznacza to, że wartość ma zastosowanie zarówno do dużego, jak i zwykłego tekstu.

Niektóre elementy wiki, takie jak logo typowo nie muszą spełniać wymagań kontrastu – są zazwyczaj zbyt duże i stylizowane. Nie oznacza to jednak, że jego kontrast całkowicie nie ma znaczenia. Przykładowo, białe logo zniknie na białym tle – chyba że dodasz np. ciemne obramowanie lub cienie dookoła.

Najlepsze praktyki

Oto kilka najlepszych praktyk, które pomogą ci osiągnąć standardy W3C:

• Zadbaj, aby zwykły tekst spełniał przynajmniej standard AA – a najlepiej AAA
• Upewnij się, że rozumiesz poprawnie analizator kontrastu. Dobrze dopasuj współczynnik z rozmiarem tekstu, z jakim pracujesz. Wynik osiągnięty dla czcionki 18px nic nie da, jeśli Twoja czcionka ma 11px.
• Unikaj łączenia kolorów, które są (choćby trochę) po przeciwnych stronach koła barw. Szczególnie złe przypadki to: czerwony na zielonym tle, błękitny na czerwonym, zielony na magencie, czerwony na niebieskim, niebieski na żółtym, i vice versa.^[6]

Stosując te wskazówki, sprawisz, że więcej osób będzie mogło wygodnie korzystać z Twojej wiki – i chętniej na niej zostaną!

Zobacz także

• Głębsze objaśnienie współczynników kontrastu
• Osoby ze ślepotą barw na twojej wiki
• Szczegóły dotyczące jasnych i ciemnych motywów na Fandomie
• Nagranie z rozmowy na temat CSSu i teorii kolorów z Community Connect (ok. 58 min.; ang.)

Linki zewnętrzne

• Przewodnik W3C dot. kontrastu na stronach internetowych
• Contrast Rebellion – interaktywna prezentacja znaczenia kontrastu
• Colorable – proste narzędzie do planowania palety kolorów
• Realtime Colors – narzędzie symulujące wykorzystanie palety kolorów w praktyce
• Omatsuri Color shades generator – narzędzie do tworzenia odcieni danego koloru
• Narzędzia do analizy kontrastu według W3C
  • WCAG Contrast Checker pozwalający na bezpośrednie sprawdzenie zgodności z normami AA i AAA
• Sekcja cyfrowa Braille Institute poświęcona tej tematyce oraz darmowe aplikacje symulujące różne schorzenia wzroku

Przypisy

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.

• Dowiedz się więcej, sprawdzając inne strony pomocy.
• Uzyskaj pomoc od innych użytkowników Fandomu w Dyskusjach na Centrum Społeczności.
• Skontaktuj się ze wsparciem Fandomu poprzez formularz kontaktowy.