Kolory i fonty na stronie internetowej: jak je dobrać, żeby użytkownik został i kliknął

Kolory i fonty na stronie dobiera się według ról, nie według gustu. Bezpieczny standard to paleta 3-4 kolorów (tło, tekst, kolor wspierający, jeden akcent zarezerwowany dla CTA) i maksymalnie dwa kroje pisma w 2-3 grubościach. Tekst główny powinien mieć kontrast minimum 4,5:1 wobec tła, rozmiar od 16 px na telefonie i interlinię 1,5. Reszta to konsekwencja: te same zasady w każdej sekcji serwisu.

Co znaczy „dobrze dobrane” kolory i fonty na stronie

Dobrze dobrane kolory i fonty to takie, przy których użytkownik nie musi się wysilać: tekst czyta się bez powiększania, przycisk widać bez szukania, a każda sekcja wygląda jak część tej samej strony. Estetyka jest tu skutkiem ubocznym, nie celem.

Liczą się trzy rzeczy i wszystkie da się sprawdzić liczbowo:

• Kontrast: różnica jasności między tekstem a tłem, mierzona jako stosunek (np. 4,5:1).
• Hierarchia: różnice rozmiaru i grubości między H1, H2 i tekstem, na tyle wyraźne, że oko układa je w kolejność.
• Konsekwencja: liczba użytych krojów, grubości i kolorów akcentowych w całym serwisie.

Jeśli te trzy parametry są ustawione, strona wygląda profesjonalnie nawet przy bardzo prostym projekcie. Jeśli któregoś brakuje, żadna ilość ozdobników tego nie nadrobi.

Ile kolorów powinna mieć strona i jakie mają pełnić role

Strona firmowa potrzebuje 3-4 kolorów z przypisanymi rolami. Nie „ładnej palety”, tylko zestawu, w którym każdy kolor ma jedno zadanie i nie wchodzi w cudze.

Proporcja 60/30/10 to stara reguła z projektowania wnętrz, ale na stronie sprawdza się z prostego powodu: kolor akcentowy działa tylko wtedy, gdy jest go mało. Jeśli akcentów jest trzy, użytkownik nie wie, który przycisk jest tym właściwym, i klika w żaden.

Mini-procedura doboru palety:

1. Wybierz tło. Czysta biel (#FFFFFF) na dużych powierzchniach męczy, złamana biel lub bardzo jasny szary jest wygodniejszy.
2. Ustaw kolor tekstu tak, żeby dawał minimum 4,5:1 wobec tła. Czysta czerń rzadko jest konieczna, ciemny grafit zwykle wystarcza i wygląda spokojniej.
3. Dodaj kolor wspierający do ikon, ramek i tła sekcji.
4. Wybierz jeden akcent i zapisz zasadę: używany wyłącznie do przycisków i linków, które prowadzą do kontaktu lub zakupu.
5. Zapisz wartości HEX w jednym miejscu. Paleta, której nikt nie spisał, rozjeżdża się w ciągu dwóch miesięcy.

Jeśli marka ma już logo i materiały, paleta strony powinna być z nich wyprowadzona, a nie wymyślona od zera. Szerzej opisałam to w tekście o spójnej identyfikacji wizualnej, gdzie paleta jest jednym z elementów systemu, a nie decyzją podejmowaną osobno dla strony.

Jak kolory wpływają na odbiór marki

Kolor działa szybciej niż tekst, bo nie wymaga czytania. Zanim ktoś przeczyta nagłówek, ma już wrażenie: spokojnie, drogo, tanio, chaotycznie.

Typowe skojarzenia w polskim kontekście B2B: granat i ciemna zieleń czytają się jako stabilne i bezpieczne, beże i złamane biele jako spokojne i jakościowe, mocne kontrasty jako nowoczesne i dynamiczne. To są tendencje, nie prawa fizyki, i zawsze przegrywają z kontekstem branży. Ten sam odcień pomarańczu wygląda energicznie w studiu fitness i podejrzanie tanio w kancelarii.

Praktyczny wniosek jest niezależny od branży: kolor ma podkreślać to, co ważne, czyli nagłówki i CTA. Jeśli podkreśla wszystko, nie podkreśla nic.

Jaki kontrast musi mieć tekst: konkretne wartości

Kontrast to jedyny parametr wizualny na stronie, który ma oficjalną normę i darmowe narzędzie do sprawdzenia. Standard WCAG 2.2 definiuje minimalne wartości dla tekstu i elementów interfejsu.

Szczegóły i wyjątki opisuje dokumentacja W3C do kryterium 1.4.3. Do sprawdzenia konkretnej pary kolorów wystarczy WebAIM Contrast Checker: wklejasz dwa kody HEX i od razu widzisz wynik.

Dwa miejsca, w których kontrast najczęściej nie przechodzi:

• Szary tekst na białym tle. Popularny #999999 na bieli daje 2,85:1, czyli poniżej normy. #767676 to 4,54:1, czyli minimum spełnione.
• Tekst na zdjęciu w sekcji hero. Kontrast zmienia się razem ze zdjęciem. Trzeba go liczyć w najgorszym punkcie kadru, nie w najlepszym, albo podłożyć jednolitą przesłonę.

Ile fontów na stronie i jak je łączyć

Maksimum to dwa kroje: jeden do treści, jeden do nagłówków. Trzeci font ma sens tylko w jednym miejscu, na przykład w krótkim haśle w hero, i tylko wtedy, gdy niesie jakąś informację o marce.

Definicja: font bezszeryfowy nie ma ozdobnych zakończeń liter (Inter, Lato, Source Sans). Font szeryfowy ma charakterystyczne kreski na końcach znaków (Lora, Merriweather, Playfair). Bezszeryfowe czytają się lepiej w długich blokach tekstu na ekranie, szeryfowe dają nagłówkom bardziej redakcyjny charakter.

Bezpieczne kombinacje wyglądają tak:

Zasada, która rozstrzyga wątpliwości: font zmienia się wtedy, gdy zmienia się rola tekstu, nigdy dla urozmaicenia. W praktyce wystarczą 2-3 grubości: regular do treści, semibold do nagłówków, bold do krótkich wyróżnień.

Jaki rozmiar fontu i interlinia: wartości do skopiowania

To pytanie, na które najczęściej brakuje konkretu, więc konkret:

Dolna granica 16 px na telefonie nie jest kwestią gustu. Safari na iOS automatycznie przybliża stronę, gdy użytkownik kliknie w pole formularza z fontem mniejszym niż 16 px, co potrafi rozjechać cały layout w momencie, w którym ktoś próbuje wysłać zapytanie. Więcej o tym, jak takie drobiazgi psują konwersję, jest w tekście o użytecznym formularzu kontaktowym.

Długość wiersza to parametr, o którym prawie nikt nie pamięta. Powyżej 90 znaków oko gubi początek kolejnej linii i tempo czytania spada. Na szerokich ekranach rozwiązuje to ograniczenie szerokości kolumny tekstu, nie zmniejszanie fontu.

Jak zbudować hierarchię typograficzną

Hierarchia typograficzna to różnice rozmiaru, grubości i odstępów, dzięki którym oko samo układa treść w kolejność ważności. Bez niej strona wygląda jak jednolita ściana i użytkownik jej nie skanuje, tylko zamyka.

Robocza zasada: każdy poziom nagłówka powinien być o co najmniej 25% większy od poziomu niżej. Jeśli H2 ma 30 px, tekst główny nie powinien mieć więcej niż 19 px, bo różnica przestaje być czytelna z odległości.

Mini-procedura:

1. Ustaw jeden styl dla każdego poziomu nagłówka i nie zmieniaj go między sekcjami.
2. Daj więcej odstępu nad nagłówkiem niż pod nim. Nagłówek ma należeć do treści, która po nim następuje.
3. Ogranicz wyróżnienia do trzech na sekcję. Pogrubienie działa tylko przez rzadkość.
4. Nie zmniejszaj fontu, żeby treść „się zmieściła”. Skróć treść.

Fonty a szybkość strony: koszt, którego nie widać

Każdy krój i każda grubość to osobny plik do pobrania. Dwa kroje po trzy grubości to sześć plików, które przeglądarka musi ściągnąć, zanim tekst wyświetli się w docelowej formie. To realnie widać w Core Web Vitals, w metrykach LCP i CLS.

Cztery rzeczy, które warto ustawić i o których projektanci zapominają:

• Format WOFF2. Mniejszy od starszych formatów, obsługiwany przez wszystkie aktualne przeglądarki.
• font-display: swap. Tekst wyświetla się od razu w foncie zastępczym i podmienia po załadowaniu, zamiast być przez chwilę niewidoczny.
• Preload jednego, maksymalnie dwóch fontów widocznych na pierwszym ekranie. Więcej konkuruje o pasmo z resztą strony.
• Self-hosting zamiast Google Fonts z CDN. Eliminuje dodatkowe połączenie do zewnętrznego serwera i porządkuje kwestię RODO.

Pełną listę dobrych praktyk opisuje dokumentacja Google na web.dev. Podobna logika dotyczy grafik, o czym pisałam w tekście o optymalizacji grafiki na stronie.

Kolory i fonty na mobile: co się zmienia

Font zwykle nie. Zmieniają się rozmiary, odstępy i wielkość elementów klikalnych.

WCAG 2.2 wprowadził kryterium minimalnego rozmiaru celu (2.5.8): element klikalny ma mieć co najmniej 24 na 24 px CSS albo tyle wolnej przestrzeni wokół siebie. To jest podłoga, nie cel. Dokumentacja W3C opisuje wyjątki, a wytyczne producentów idą wyżej: Apple rekomenduje 44 na 44 punkty, Google w Material Design 48 na 48 dp. Dla głównego przycisku CTA warto trzymać się tej wyższej wartości.

Drugi problem mobilny to kontrast w słońcu. Para kolorów, która na laptopie w pomieszczeniu wygląda elegancko, na telefonie na zewnątrz może zniknąć. Jeśli tekst jest na granicy 4,5:1, w praktyce jest za jasny. Sprawdzenie zajmuje minutę: otwórz stronę na telefonie i wyjdź z nią przed budynek.

Reszta zachowania strony na małych ekranach to temat na osobny tekst: responsywność stron firmowych.

Najczęstsze błędy w kolorach i fontach na stronie

Wspólny mianownik: chaos wizualny odbiera się jako brak jakości, nawet gdy oferta jest dobra. Więcej typowych potknięć zebrałam w tekście czego nie robić przy projektowaniu strony firmowej.

Jak sprawdzić, czy kolory i fonty działają

Nie na oko. Kolory i fonty da się zweryfikować w dwóch krokach: technicznym i behawioralnym.

Test techniczny, około 15 minut:

1. Wklej parę kolorów tekst-tło do WebAIM Contrast Checker. Powtórz dla tekstu na kolorowych sekcjach i dla tekstu na przyciskach.
2. Otwórz stronę na telefonie i sprawdź, czy czytasz treść bez przybliżania.
3. Zmierz główny przycisk CTA. Poniżej 44 px wysokości jest za mały.
4. Policz kroje i kolory akcentowe użyte na całej stronie, nie tylko na głównej. Więcej niż 2 kroje albo więcej niż 1 akcent to sygnał do uporządkowania.
5. Uruchom PageSpeed Insights i sprawdź, czy fonty nie są zgłaszane jako blokujące renderowanie.

Test behawioralny, po 2-4 tygodniach od zmiany: w GA4 porównaj głębokość scrolla, kliknięcia w CTA i liczbę wysłanych formularzy przed zmianą i po niej. Poprawa czytelności zwykle najpierw podnosi głębokość przewijania, dopiero potem konwersję.

Kolory i fonty na stronie nie są dekoracją, tylko warstwą, która decyduje o tym, ile z Twojej oferty użytkownik faktycznie przeczyta. Cała robota mieści się w kilku liczbach: 3-4 kolory z rolami, maks. 2 kroje, 4,5:1 kontrastu, 16 px na telefonie.

Jeśli typografia, paleta i układ mają być projektowane jako jedna całość, razem z materiałami PDF i ofertą, tak właśnie prowadzę projektowanie stron internetowych w Click Made. Zakres i widełki cenowe są opisane w cenniku, a jeśli chcesz po prostu skonsultować konkretny przypadek, napisz do mnie.