Ładna paleta kolorów to jeszcze nie wszystko. Projekt może wyglądać świetnie na ekranie osoby, która go tworzy, a jednocześnie męczyć wzrok komuś, kto próbuje przeczytać ofertę, znaleźć numer telefonu albo kliknąć przycisk. I wtedy zamiast wygodnej strony mamy małą zagadkę: „czy ten napis naprawdę tu jest?”.
Kontrast kolorów na stronie pomaga uniknąć takich sytuacji. Dotyczy nie tylko tekstu i tła, ale też przycisków, pól formularzy, ikon oraz ważnych części grafik reklamowych. Poniżej znajdziesz proste progi, typowe pułapki i proces sprawdzania, który można przejść przed publikacją bez zaklinania rzeczywistości i bez oceniania wszystkiego wyłącznie na oko.
Kontrast kolorów na stronie — o co w ogóle chodzi?
Najprościej mówiąc, kontrast to różnica między elementem a tłem, na którym ten element się znajduje. Tekst powinien odcinać się od tła na tyle, żeby dało się go swobodnie przeczytać. Przycisk powinien być widoczny jako przycisk, a jego napis nie może zlewać się z powierzchnią. Istotny fragment grafiki również musi odróżniać się od otoczenia, jeśli bez niego trudniej zrozumieć komunikat.
Tu często pojawia się zgrzyt między estetyką a praktyką. Dwa kolory mogą wyglądać elegancko i spokojnie, ale jeśli mają podobną jasność, napis zaczyna znikać. Jasnoszary tekst na jasnym tle bywa subtelny. Czasem aż za bardzo subtelny. Ciemny tekst na ciemnym tle działa podobnie, tylko w drugą stronę.
Warto oceniać osobno kilka sytuacji: zwykły tekst, duży tekst, elementy interfejsu oraz istotne części grafik. Sam dobry wynik dla jednej pary kolorów nie oznacza, że cała strona albo cała reklama jest czytelna. Kontrast pomaga, ale nie załatwia wszystkich spraw związanych z dostępnością. Liczy się także krój pisma, tło, rozmiar i sposób przekazania informacji.
Najważniejsze progi WCAG bez zaklinania rzeczywistości
Wytyczne WCAG 2.2 podają konkretne minimalne wartości kontrastu. Dla zwykłego tekstu i obrazów tekstu minimum wynosi 4,5:1 względem tła. To podstawowa liczba, którą warto zapamiętać przy akapitach, opisach oferty, formularzach i innych zwykłych napisach.
Dla dużego tekstu próg jest niższy i wynosi 3:1. Elementy interfejsu oraz istotne części grafik, które są potrzebne do zrozumienia treści, także powinny osiągać co najmniej 3:1 względem sąsiednich kolorów. Dotyczy to między innymi wizualnych informacji potrzebnych do rozpoznania kontrolki albo jej stanu.
4,5:1, 3:1 i elementy nietekstowe
| Rodzaj elementu | Minimalny kontrast |
|---|---|
| Zwykły tekst i obrazy tekstu | 4,5:1 |
| Duży tekst | 3:1 |
| Elementy interfejsu i istotne części grafik | 3:1 |
Duży tekst oznacza co najmniej 18 punktów bez pogrubienia albo 14 punktów w wersji pogrubionej. W przybliżeniu jest to 24 px albo 18,66 px. Logo i tekst będący częścią logo są wyjątkiem od minimalnego wymogu kontrastu określonego dla zwykłego tekstu.
Ważne: te wartości są kryteriami technicznymi, a nie magicznym certyfikatem wygody. Spełnienie progu nie oznacza automatycznie pełnej zgodności całej strony z wymaganiami dostępności ani tego, że każda osoba uzna projekt za idealnie czytelny. Dlatego nie warto projektować wszystkiego dokładnie na granicy minimum.
Czy duży tekst może mieć niższy kontrast?
Tak. Dla dużego tekstu minimalny kontrast może wynosić 3:1, zamiast 4,5:1 wymaganego dla zwykłego tekstu. Wynika to z tego, że większe litery łatwiej rozpoznać nawet wtedy, gdy różnica między tekstem a tłem jest mniejsza.
Próg dotyczy tekstu o rozmiarze co najmniej 18 punktów bez pogrubienia albo 14 punktów w wersji pogrubionej. W przeliczeniu przybliżonym to odpowiednio 24 px i 18,66 px. Nie chodzi jednak o to, żeby każdy duży nagłówek robić blady i ledwo widoczny. Niższe minimum to możliwość, nie cel projektowy.
Cienki krój pisma, antyaliasing, nietypowy font, przezroczystość albo zdjęcie pod napisem mogą pogorszyć odbiór. Element może więc wyglądać słabiej, niż sugeruje sam pomiar. Dobrze sprawdzić rzeczywisty wygląd nagłówka na ekranie i nie traktować wartości z checkera jak jedynej odpowiedzi.
Przyciski, formularze i stany — co dokładnie sprawdzać
Przycisk to nie tylko kolor w stanie spoczynku. Najpierw sprawdź tekst przycisku względem jego tła. Potem zobacz, czy sam przycisk odcina się od sąsiedniego tła. Jeśli ma obramowanie, ikonę albo inny ważny element wizualny, te części także powinny być rozpoznawalne.
Dla elementów interfejsu i istotnych informacji wizualnych stosuje się próg 3:1 względem sąsiednich kolorów. W formularzu warto więc spojrzeć nie tylko na napis, ale również na obramowanie pola, ikonę i sygnały pokazujące, że kontrolka istnieje albo zmieniła stan.
Nie sprawdzaj tylko przycisku w spoczynku
Użytkownik może zobaczyć przycisk w kilku wersjach. Znaczenie mają między innymi fokus, zaznaczenie i inne stany kontrolki. Jeśli sprawdzisz wyłącznie podstawowy wygląd, możesz przeoczyć moment, w którym element przestaje być widoczny albo trudniej rozpoznać, że został wybrany.
Nie używaj też samego koloru jako jedynego komunikatu. Błąd, sukces albo zaznaczenie powinny mieć dodatkowy sygnał: tekst, ikonę, podkreślenie lub inne wyraźne oznaczenie. Sam czerwony i zielony kolor to czasem za mało. Kolor może pomagać, ale nie powinien samotnie dźwigać całej informacji na plecach.
Grafiki reklamowe i tekst na zdjęciu
Tekst na zdjęciu ma trudniejsze zadanie niż tekst na jednolitym tle. Fotografia zmienia się pod napisem: raz jest jasna, chwilę później ciemna, a kawałek dalej pełna szczegółów. Kontrast może być dobry w jednym miejscu i niewystarczający w innym.
To samo dotyczy wzorów, gradientów i przezroczystości. Jeśli ważny komunikat leży na przypadkowym fragmencie tła, jego czytelność zależy od tego, co akurat znajduje się pod literami. Przy istotnych częściach grafiki trzeba ocenić także ich odróżnienie od sąsiednich kolorów, jeśli te elementy są potrzebne do zrozumienia treści.
Tekst na zdjęciu nie ma łatwego życia
Sprawdź najtrudniejszy fragment tła pod napisem, a nie tylko miejsce, w którym wszystko wygląda spokojnie. Gdy zdjęcie konkuruje z tekstem, można przyciemnić tło, zmienić kolor obszaru za napisem albo zastosować obwódkę. Chodzi o to, żeby odbiorca czytał komunikat, a nie prowadził śledztwo w sprawie każdej litery.
Checker jest pomocny, ale nie ocenia całej kompozycji. Nie zastępuje obejrzenia grafiki w praktyce, zwłaszcza gdy tło jest zmienne. Ważne hasło powinno mieć czytelny obszar, a nie liczyć na szczęście i spokojny fragment zdjęcia.
Jak sprawdzić kontrast w kilka minut
Nie musisz zaczynać od skomplikowanych obliczeń. Najpierw wypisz pary kolorów, które faktycznie widzi użytkownik. Osobno potraktuj tekst, przycisk, formularz i grafikę. Potem przejdź przez prosty proces:
Szybka checklista przed publikacją
- Zidentyfikuj parę kolorów: tekst i tło, element interfejsu i sąsiednie tło albo istotny element grafiki i jego otoczenie.
- Wpisz kolory do checkera: możesz użyć narzędzia WebAIM Contrast Checker.
- Dobierz właściwy próg: dla zwykłego tekstu sprawdź 4,5:1, dla dużego tekstu 3:1, a dla elementów interfejsu i istotnych grafik 3:1.
- Sprawdź różne stany: obejrzyj przycisk w stanie podstawowym, przy fokusie, zaznaczeniu i innych wersjach, które użytkownik może zobaczyć.
- Oceń zmienne tło: przejrzyj miejsca pod napisem na zdjęciu, wzorze albo gradiencie, zamiast ufać jednemu spokojnemu fragmentowi.
W narzędziu sprawdzaj osobno zwykły i duży tekst. Pamiętaj też, że wynik dotyczy wskazanej pary kolorów, nie całego projektu. Jeśli grafika ma wiele elementów, testuj te, które są ważne dla zrozumienia komunikatu.
Zestawienia kolorów, które często robią problemy
Nie ma jednej zamkniętej listy zakazanych par kolorów. Ostatecznie każdą parę trzeba zmierzyć. Są jednak sytuacje, które powinny zapalić lampkę ostrzegawczą:
- jasny tekst na jasnym tle;
- ciemny tekst na ciemnym tle;
- cienki jasny tekst na zdjęciu albo wzorze;
- napis na gradiencie lub tle z przezroczystością;
- cienkie linie i bardzo cienkie kroje pisma;
- przekazywanie błędu, sukcesu albo zaznaczenia wyłącznie kolorem.
Wspólny mianownik? Element zaczyna zlewać się z otoczeniem albo traci znaczenie, gdy kolor nie jest dobrze widoczny. Dlatego lepiej zmierzyć zestawienie, niż wydawać wyrok na podstawie samego „na oko”. Oko bywa pewne siebie. Checker przynajmniej pokazuje konkretny wynik dla wskazanej pary.
Checklista przed publikacją i kiedy zawołać Szwagra
Przed publikacją sprawdź zwykły tekst, duży tekst, przyciski, formularze i istotne grafiki. Powtórz test dla stanów komponentów oraz trudnych fragmentów zmiennego tła. Nie projektuj dokładnie na granicy minimum i nie zakładaj, że dobry wynik automatycznie rozwiązuje całą dostępność.
Jeśli kontrast trzeba przejrzeć na stronie, w grafice albo innym materiale cyfrowym, Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.
Najkrócej: zmierz właściwe pary kolorów, wybierz odpowiedni próg i obejrzyj cały materiał, nie tylko wynik z narzędzia. Zwykły tekst potrzebuje minimum 4,5:1, duży tekst 3:1, a elementy interfejsu i istotne części grafik 3:1. Potem sprawdź fokus, zaznaczenie, obramowania oraz miejsca, w których tło się zmienia. Kontrast pomaga w czytelności, ale nie zastępuje rozsądnego projektu ani innych działań na rzecz dostępności.
