Kontrast kolorów marki decyduje, czy odbiorca bez wysiłku przeczyta ofertę, rozpozna przycisk i zrozumie komunikat błędu. Ładna paleta może dobrze wyglądać na próbniku, a zawodzić po zestawieniu jasnego tekstu z pastelowym tłem. Problem często wychodzi dopiero na telefonie, w słońcu albo na ekranie o innych ustawieniach.
Nie musisz od razu zmieniać całej identyfikacji. Najpierw sprawdź konkretne pary kolorów w miejscach, w których niosą treść lub pomagają wykonać działanie. Potem przypisz kolorom właściwe role. Dzięki temu charakter marki zostaje, a strona, oferta i grafiki stają się łatwiejsze w użyciu.
Kontrast kolorów marki oceniaj w konkretnych parach
Sam kod koloru nie jest czytelny ani nieczytelny. Liczy się zestawienie pierwszego planu z tłem. Ten sam fiolet może dobrze działać jako tekst na bieli, lecz zniknąć na jasnym różu. Dlatego przygotuj listę par, które rzeczywiście występują w materiałach:
- tekst podstawowy i tło strony,
- nagłówek i kolorowa sekcja,
- tekst oraz tło przycisku,
- link i otaczający go tekst,
- obramowanie pola formularza i jego otoczenie,
- komunikat błędu i tło,
- napisy umieszczane na fotografiach.
Jeśli paleta nie ma jeszcze ustalonych funkcji, zacznij od poradnika o identyfikacji wizualnej małej firmy. Wybierz jeden ciemny kolor do tekstu, jasne tło, kolor akcentowy oraz bezpieczne warianty dla komunikatów. Taki podział jest praktyczniejszy niż zbiór pięciu równorzędnych próbek bez instrukcji użycia.
Użyj progów WCAG 2.2 jako kryterium
Wytyczne WCAG 2.2 opisują współczynnik kontrastu jako relację jasności dwóch kolorów. Dla zwykłego tekstu wymagany poziom AA wynosi co najmniej 4,5:1. Dla dużego tekstu próg wynosi 3:1. W3C zalicza do dużego tekstu zapis o rozmiarze co najmniej 18 punktów albo 14 punktów przy pogrubieniu. Pełne warunki i wyjątki opisuje oficjalne objaśnienie kryterium minimalnego kontrastu tekstu.
W praktyce nie zakładaj, że nagłówek automatycznie jest „duży”. Sprawdź jego faktyczny rozmiar i grubość. Nie zaokrąglaj też wyniku w górę: W3C podaje wprost, że 4,499:1 nie spełnia progu 4,5:1. Bezpieczniej zostawić niewielki zapas, zwłaszcza gdy tekst pojawia się na zdjęciu lub tle z gradientem.
Osobno zbadaj elementy potrzebne do obsługi strony. Widoczne granice pól, ikon, przełączników i stan zaznaczenia powinny osiągać 3:1 względem sąsiednich kolorów zgodnie z kryterium kontrastu elementów nietekstowych. Ozdobna kreska nie wymaga takiego traktowania. Obramowanie pola, bez którego trudno dostrzec miejsce do wpisania danych, ma już funkcję użytkową.
Zrób test na rzeczywistych materiałach
Zbierz stronę główną, formularz kontaktowy, ofertę PDF i trzy najczęściej używane formaty grafik. Jeśli materiały są rozproszone, pomoże wcześniejszy audyt marki w 30 minut. Testuj elementy po kolei, zaczynając od tych, które prowadzą do kontaktu lub zakupu.
Skopiuj kod koloru tekstu i kod tła do kalkulatora kontrastu. W3C publikuje listę narzędzi do oceny dostępności, którą można filtrować według języka, standardu i rodzaju testu. Narzędzie przyspiesza pomiar, ale wynik nadal trzeba odnieść do funkcji elementu. Przycisk z dobrym napisem może mieć zbyt słabo widoczną krawędź, a formularz może informować o błędzie wyłącznie zmianą koloru.
Po pomiarze wykonaj próbę wzrokową. Ustaw stronę na zwykłym telefonie, zmniejsz jasność ekranu i wyjdź z podglądu projektu do rzeczywistego widoku. Sprawdź też najdłuższy nagłówek oraz grafikę z fotografią o nierównym tle. Nakładka, cień lub półprzezroczysty gradient potrafią zmieniać kontrast w różnych częściach tego samego napisu.
Sprawdź ekran i druk jako dwa osobne zastosowania
Wynik kalkulatora dotyczy kolorów wyświetlanych na ekranie. Nie przewiduje wyglądu ulotki wydrukowanej na chłonnym papierze, wizytówki z matowym uszlachetnieniem ani domowej drukarki pracującej w trybie oszczędnym. Jeśli para kolorów ma trafić do druku, zamów próbkę albo wydrukuj jedną stronę w docelowej skali. Przeczytaj drobny tekst z typowej odległości, a nie z nosem przy kartce.
Przykładowa piekarnia używa jasnego beżu, brązu i żółci. Beż może zostać tłem opakowania, brąz kolorem tekstu, a żółć niewielkim akcentem. Próba umieszczenia białego cennika na żółtej planszy tworzy słabą parę, choć wszystkie trzy barwy pasują do charakteru firmy. Zmiana ich funkcji rozwiązuje problem bez wymiany palety.
Na stronie sprawdź także widoki, których zwykle nie ma na projekcie graficznym. Wywołaj błąd formularza, przejdź po elementach klawiaturą i otwórz menu na telefonie. Zobacz, czy aktywne pole ma widoczny obrys, wybrana opcja różni się od pozostałych, a nieaktywny przycisk nadal da się rozpoznać jako element interfejsu. Zrób ten sam test po aktualizacji motywu strony, ponieważ zmiana tła może zepsuć wcześniej poprawną parę.
Nie przekazuj znaczenia wyłącznie kolorem
Czerwone pole może być zrozumiałe dla autora formularza, lecz odbiorca potrzebuje jeszcze informacji, co należy poprawić. Dodaj komunikat tekstowy, ikonę lub wyraźną zmianę obramowania. Wykres powinien łączyć kolory z etykietami albo wzorami. Link w akapicie warto wyróżnić podkreśleniem, zamiast polegać tylko na innym odcieniu.
To podejście wynika z kryterium WCAG 2.2 dotyczącego użycia koloru. Ma też prostą korzyść operacyjną: materiał pozostaje zrozumiały po wydruku w skali szarości, na słabszym projektorze i wtedy, gdy firmowy kolor zostanie nieco zmieniony przez urządzenie.
Przygotowując szablony postów zgodne z marką, nie zapisuj tylko palety. Dodaj gotowe, sprawdzone pary: kolor nagłówka na jasnym tle, biały tekst na ciemnym tle oraz wariant dla drobnego podpisu. Osoba składająca grafikę wybiera wtedy bezpieczny układ, zamiast za każdym razem tworzyć nowe połączenie.
Popraw słabą parę bez burzenia identyfikacji
Najpierw ustal, który element może się zmienić. Jeśli jasna mięta jest ważnym akcentem marki, pozostaw ją na większych powierzchniach, a tekst ustaw w ciemnej zieleni lub graficie. Jeśli firmowy pomarańcz słabo działa jako tło białego przycisku, wykorzystaj go jako obramowanie, ikonę albo detal i wybierz ciemniejszy wariant do elementu sterującego.
Stwórz małą tabelę: zastosowanie, kolor pierwszego planu, kolor tła, wynik kontrastu, dozwolony rozmiar tekstu. Włącz ją do brand booka na jednej stronie, nawet jeśli oznacza to skrócenie mniej używanych zasad. Zespół potrzebuje gotowych decyzji, a nie samej informacji, że ma „dbać o czytelność”.
Na końcu sprawdź ponownie zmienione elementy oraz ich stany: zwykły, po najechaniu, aktywny, nieaktywny, zaznaczony i z błędem. Zapisz zaakceptowane zestawienia wraz z kodami. Taki prosty system ogranicza przypadkowe odstępstwa i pozwala rozwijać identyfikację bez ciągłego zaczynania od nowa.