Logo wygląda świetnie, księga marki jest dopięta, kolory wybrane z sercem, a potem ktoś wrzuca firmowy odcień do akapitu i nagle czytanie strony przypomina rozszyfrowywanie mapy skarbów. Niby wszystko się zgadza, ale oczy nie są zachwycone. Ten sam kolor może dobrze działać w logo, a zupełnie nie sprawdzać się jako tekst, link, przycisk albo obramowanie pola formularza.
Tu właśnie pojawia się temat: kolory marki a kontrast na stronie. Marka ma być rozpoznawalna, ale strona ma też pozwalać normalnie czytać treść i rozpoznawać, co można kliknąć. Dlatego kolor trzeba oceniać nie tylko jako próbkę na planszy, lecz w konkretnym miejscu, na konkretnym tle i w konkretnej funkcji.
Logo może być ładne, a strona nadal nieczytelna
Identyfikacja wizualna i interfejs strony mają trochę inne zadania. Logo może korzystać z charakterystycznego koloru, bo jego rolą jest budowanie rozpoznawalności. Tekst główny ma natomiast prowadzić użytkownika przez ofertę, odpowiedzieć na pytanie i nie zmuszać go do mrużenia oczu. Przycisk powinien być widoczny jako przycisk, a pole formularza jako pole, w którym naprawdę da się coś wpisać.
Problem zaczyna się wtedy, gdy firmowa paleta zostaje przeniesiona na stronę mechanicznie. Ten sam odcień ląduje w nagłówkach, akapitach, linkach, ikonach, formularzach i przyciskach, bo przecież „tak jest w brandingu”. Tyle że księga marki nie gwarantuje, że każda para kolorów będzie czytelna w każdym zastosowaniu. Kontrast kolorów na stronie trzeba sprawdzać dla konkretnego elementu, nie dla samego ogólnego wrażenia.
Czy kolory z księgi marki trzeba przenieść 1:1?
Nie. Księga marki ma pilnować spójności i rozpoznawalności, ale nie jest instrukcją nakazującą używać każdego koloru wszędzie. Firmowy żółty, jasny zielony czy pastelowy niebieski może świetnie działać jako akcent, tło ilustracji albo element grafiki, a jednocześnie być zbyt słaby jako kolor dłuższego tekstu na jasnym tle.
Praktyczniej jest przypisać kolorom konkretne role. Jeden odcień może być charakterystycznym akcentem, inny może służyć jako kolor tekstu, a jeszcze inne warianty mogą trafić do teł, przycisków, linków i stanów formularzy. Nie chodzi o wyrzucenie firmowej palety do kosza. Chodzi o to, żeby nie zmuszać jednego koloru do wykonywania każdej pracy. To trochę jak z wiertarką: przydatna rzecz, ale niekoniecznie najlepsza do mieszania zupy.
Kolor marki i kolor użytkowy to nie zawsze to samo
Kolor charakterystyczny może zostać mocnym znakiem marki, nawet jeśli tekst główny będzie miał inny, odpowiednio ciemny wariant. Spójność można budować przez proporcje kolorów, typografię, kształty, zdjęcia, ilustracje i sposób wyróżniania treści. Firmowy odcień nie musi być jednocześnie kolorem każdego akapitu i każdego linku.
Warto sprawdzać rzeczywiste elementy: nagłówek na swoim tle, przycisk z napisem, link w akapicie, ikonę przy formularzu i komunikat błędu. Sama plansza z próbkami może wyglądać obiecująco, ale nie pokaże, jak kolor zachowa się w dłuższym tekście albo przy różnych stanach elementu.
Kontrast tekstu: najważniejsze liczby bez czarowania
Dla zwykłego tekstu i obrazów tekstu WCAG 2.2 wskazuje minimalny kontrast 4,5:1 względem tła. Dla dużego tekstu minimalny poziom wynosi 3:1. To ważne punkty odniesienia, gdy oceniasz czytelność tekstu na stronie, ale nie są one magicznym certyfikatem całego serwisu. Spełnienie jednego poziomu kontrastu nie oznacza automatycznie, że cała strona jest dostępna i wygodna w użyciu.
Dlaczego firmowy tekst może być nieczytelny? Bo o kontraście decyduje przede wszystkim różnica jasności, a nie samo wrażenie, że kolory są różne. Dwa odcienie mogą mocno różnić się barwą, a mimo to mieć zbyt małą różnicę jasności. Jasny żółty na białym tle, pastelowy niebieski na jasnoszarym albo średni szary na podobnym szarym tle mogą wyglądać przyjemnie w identyfikacji, ale słabo sprawdzać się w treści.
Do tego dochodzi typografia. Cienki font i mały rozmiar mogą pogorszyć odbiór tekstu. Jeszcze trudniej robi się wtedy, gdy tekst leży na zdjęciu albo gradiencie. W jednym miejscu tło jest jasne, w innym ciemniejsze, więc ten sam napis raz da się przeczytać, a raz znika jak skarpetka w pralce.
Odcień to nie wszystko
W praktyce nie wystarczy powiedzieć: „Te kolory są przecież różne”. Trzeba sprawdzić ich różnicę jasności i zobaczyć tekst w rzeczywistym układzie. Znaczenie mają także rozmiar i grubość fontu, długość treści, odstępy, tło oraz sposób użycia koloru.
Dlatego kolorystyka strony firmowej powinna być oceniana na konkretnych komponentach, a nie tylko na próbniku. Jeśli firmowy kolor ma zostać użyty w tekście, trzeba sprawdzić jego parę z rzeczywistym tłem. Jeśli trafia na zdjęcie, należy ocenić różne fragmenty tego zdjęcia. To nadal nie zastępuje pełnej oceny dostępności, ale pozwala uniknąć oczywistego problemu już na etapie projektu.
Przyciski, ikony i formularze też mają swoje wymagania
Kontrast nie dotyczy wyłącznie liter. Elementy interfejsu oraz istotne grafiki potrzebne do rozpoznania funkcji lub znaczenia powinny mieć kontrast co najmniej 3:1 względem sąsiednich kolorów. W praktyce chodzi między innymi o przyciski, pola formularzy, ikony, obramowania i wskaźniki stanów.
Sam napis na przycisku może być czytelny, ale cały przycisk nadal może zlewać się z tłem. Podobnie cienkie obramowanie pola formularza może formalnie istnieć, lecz być trudne do zauważenia. Warto sprawdzać nie tylko stan podstawowy, ale także focus, zaznaczenie, aktywność, wyłączenie i błąd. Element, który wygląda dobrze „na spokojnie”, może tracić czytelność po kliknięciu albo przejściu klawiaturą.
Kolor nie może robić całej roboty
Kolor nie powinien być jedynym sposobem przekazywania informacji, wskazywania działania ani rozróżniania elementów. Jeśli pole formularza jest błędne, sam czerwony obrys to za mało. Przyda się czytelny komunikat tekstowy, a w razie potrzeby także ikona lub inne oznaczenie. Link nie powinien być rozpoznawalny wyłącznie dlatego, że ma inny kolor niż akapit. Można dodać podkreślenie albo inne wyraźne rozróżnienie.
Ta zasada jest szczególnie ważna przy polach wymaganych, statusach i komunikatach błędów. Użytkownik nie powinien zgadywać, co oznacza kolor. Interfejs ma informować wprost, a nie urządzać mały quiz z percepcji wzrokowej.
Logo to wyjątek, ale nie karta wyjścia z więzienia
Tekst będący częścią logo lub nazwy marki nie ma wymagania kontrastu według kryterium WCAG 1.4.3. Logo i logotyp mogą korzystać z wyjątku jako elementy identyfikacji marki. To odpowiada na częste pytanie: nie, logo nie musi spełniać dokładnie takich samych wymagań jak zwykły tekst.
Nie oznacza to jednak, że firmowy kolor dostał przepustkę do całej strony. Wyjątek dla logo nie obejmuje automatycznie akapitów, przycisków, linków, formularzy ani ikon. Jeśli logo jest linkiem lub innym elementem interaktywnym, warto rozważyć wariant o lepszym kontraście albo zapewnić równoważne oznaczenie funkcji. Przycisk, ikona informująca o działaniu czy wskaźnik focus powinny być oceniane jako elementy interfejsu, a nie jako część logo tylko dlatego, że użyto w nich podobnego koloru.
Jak zachować charakter marki i nie popsuć czytelności?
Najprostsza zasada brzmi: zostaw charakterystyczny kolor tam, gdzie buduje markę, a do zastosowań użytkowych przygotuj warianty, które da się czytać i rozpoznać. Kolor główny może pojawić się w logo, wybranych akcentach, grafikach, ilustracjach czy elementach wyróżniających. Tekst główny, tła, linki, przyciski i stany formularzy powinny mieć role dobrane do swojej funkcji.
Jeśli kolor marki jest zbyt jasny, można rozważyć ciemniejszy wariant do tekstu albo cyfrowy wariant przeznaczony do interfejsu. Jeśli jest bardzo ciemny, nie musi automatycznie trafiać na każde tło. Każdą parę trzeba sprawdzić w konkretnym zastosowaniu. Bez kodów kolorów i analizy konkretnej strony nie da się uczciwie ocenić całej palety.
Marka może być wyrazista także poza kolorem
Rozpoznawalność marki nie siedzi wyłącznie w jednym odcieniu. Wspierają ją typografia, kształty, proporcje kolorów, zdjęcia, ilustracje i sposób wyróżniania treści. Możesz zachować charakter marki, nawet gdy tekst główny będzie neutralny, a firmowy kolor pojawi się jako akcent.
Dobrym kierunkiem jest przypisanie każdemu kolorowi konkretnej roli: tekst, tło, akcent, przycisk, link, focus, błąd. Potem trzeba sprawdzić realne komponenty strony, a nie tylko próbki na planszy. To praktyczna synteza zasad dotyczących kontrastu i użycia koloru, nie automatyczna ocena każdej palety ani pełny audyt dostępności.
Krótka checklista przed publikacją strony
Przed publikacją warto przejść przez kilka konkretnych punktów:
- Sprawdź tekst główny i nagłówki na ich rzeczywistym tle.
- Zweryfikuj napisy umieszczone na zdjęciach oraz tłach z gradientem.
- Oceń przyciski, linki, ikony, pola formularzy i ich obramowania.
- Sprawdź stany aktywne, zaznaczenie, focus i komunikaty błędów.
- Upewnij się, że żadna ważna informacja nie jest przekazywana wyłącznie kolorem.
- Traktuj checklistę jako punkt wyjścia, a nie formalne potwierdzenie pełnej zgodności z WCAG.
Dobra strona nie kopiuje księgi marki bez zmian. Przekłada jej charakter na kolory, które da się czytać, rozpoznać i wykorzystać w konkretnych sytuacjach. Logo może korzystać z wyjątku, ale zwykły tekst, przyciski, ikony i formularze trzeba oceniać według ich funkcji. Najważniejsze jest sprawdzanie rzeczywistych par kolorów oraz różnych stanów elementów, a nie wiara, że skoro próbki wyglądają dobrze obok siebie, to problemu nie ma. Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.
