Jak sprawdzić kolory i fonty na stronie WWW?
czyli jak podejrzeć, kto i czego używa na swojej stronie
Jeśli wchodzisz na stronę konkurencji i myślisz: „Jak ona to zrobiła?”, to ten wpis jest dla Ciebie.
Dobrze dobrane kolory i typografia sprawiają, że strona wygląda profesjonalnie, a użytkowniczki chętniej zostają na dłużej.
Ale zanim zaczniesz eksperymentować, warto wiedzieć, jak podejrzeć, czego inni używają — i jak robić to etycznie.
Poniżej pokażę Ci 3 darmowe metody, dzięki którym sprawdzisz wygląd dowolnej strony bez kodowania.
Zanim zaczniesz – inspiracja to nie kopiowanie
Kolory nie mają praw autorskich, więc możesz traktować je jako inspirację.
Ale z fontami sprawa wygląda inaczej. Większość z nich ma licencje – niektóre darmowe, inne komercyjne.
• Jeśli font pochodzi z Google Fonts – możesz go użyć bezpłatnie.
• Jeśli widzisz w kodzie np. Proxima Nova lub Avenir Next – to znaczy, że wymaga zakupu licencji.
Takie szybkie sprawdzenie pozwoli Ci unikać nielegalnego użycia i niepotrzebnych nerwów.
Metoda 1: Narzędzia deweloperskie w przeglądarce
To najprostszy i zawsze dostępny sposób.
W Chrome, Edge czy Firefox wystarczy kliknąć prawym przyciskiem myszy na element i wybrać „Zbadaj” / „Inspect”.
• font-family – czyli użyty krój i jego fallbacki,
• font-weight, line-height, letter-spacing,
• color i background-color w formacie HEX/RGB/HSL.
Tip:
Sprawdź kilka elementów: nagłówek, akapit, przycisk – zapisz kolory tekstu, tła i hoverów.
Metoda 2: Rozszerzenia przeglądarki (na szybko)
Jeśli nie masz ochoty zaglądać w kod, a chcesz po prostu zobaczyć, jak to zostało zrobione i jakie kolory i fonty zostały użyte na stronie, te rozszerzenia to małe złoto. Wystarczy jedno kliknięcie, by podejrzeć fonty, kolory i style na dowolnej stronie. Co najważniejsze – wszystkie działają w przeglądarce Chrome, są darmowe i nie wymagają żadnej konfiguracji.
Font Ninja
To najprostszy sposób, żeby w kilka sekund sprawdzić, jakiego fontu ktoś użył.
Po zainstalowaniu rozszerzenia w Chrome pojawi się ikonka „F” (lub „Ninja”). Klikasz ją, a następnie najeżdżasz kursorem na tekst na stronie — od razu zobaczysz nazwę kroju pisma, jego rozmiar, grubość oraz wysokość linii.
To idealne rozwiązanie, gdy chcesz zobaczyć typografię w kontekście – na żywo, bez grzebania w kodzie.
Dzięki temu możesz porównać, jak różne fonty zachowują się przy tytułach, akapitach i przyciskach.
Ja sama często używam tego narzędzia, żeby pokazać klientce, czym różni się np. szeryfowy font nagłówka od bezszeryfowego tekstu głównego – to robi ogromną różnicę w odbiorze marki.
CSS Peeper
Po kliknięciu ikonki CSS Peeper zobaczysz całe podsumowanie użytych na stronie kolorów, fontów, rozmiarów i odstępów – w czytelnym, wizualnym formacie.
Nie musisz niczego szukać w kodzie – narzędzie samo wyciąga najważniejsze informacje i prezentuje je w przejrzysty sposób.
To świetne narzędzie dla osób, które chcą się inspirować układem i stylem strony, ale nie mają wiedzy technicznej.
Wystarczy jedno kliknięcie, żeby pobrać kolor brandowy, sprawdzić proporcje fontów czy podejrzeć użyte obrazy i ich formaty.
Wykorzystuję CSS Peeper np. wtedy, gdy przygotowuję audyt wizualny lub gdy chcę pokazać klientce, jakie elementy warto uprościć lub ujednolicić.
➡️ CSS Peeper
ColorZilla
To klasyka, jeśli chodzi o pobieranie kolorów z ekranu.
Po kliknięciu w ikonę pipety możesz wskazać dowolny punkt na stronie – ColorZilla natychmiast skopiuje jego kod koloru (HEX, RGB lub HSL) do schowka.
Co więcej, zapisuje historię ostatnich próbek, więc możesz później wrócić do wybranych kolorów bez konieczności ponownego otwierania strony.
Dzięki temu narzędziu łatwo stworzysz własną paletę kolorów inspirowaną ulubioną stroną, zdjęciem lub sklepem, który ma świetny branding.
Świetnie sprawdza się też, gdy chcesz porównać kolory z różnych elementów strony – np. tekstu i tła – i ocenić ich kontrast (o tym więcej w metodzie nr 3).
➡️ ColorZilla
Metoda 3: Sprawdzenie kontrastu i dostępności
Kontrast to temat, który większość osób pomija — a szkoda, bo ma ogromny wpływ nie tylko na estetykę strony, ale też na użyteczność i pozycjonowanie (SEO).
Google coraz częściej zwraca uwagę na dostępność witryn, a jednym z jej kluczowych elementów jest właśnie czytelność tekstu.
Zbyt niski kontrast między kolorem tła a kolorem czcionki sprawia, że użytkowniczki muszą wytężać wzrok, by cokolwiek przeczytać. A jeśli coś jest trudne w odbiorze – po prostu znikają z Twojej strony.
Z punktu widzenia projektantki powiem Ci jedno: piękne pastelowe połączenia często wyglądają cudownie na planszach w Canvie, ale kompletnie nie sprawdzają się w praktyce na ekranie.
Szary tekst na beżowym tle może wyglądać elegancko, ale po kilku sekundach męczy oczy.
Z kolei zbyt jaskrawy kontrast (np. biały tekst na intensywnie różowym tle) też nie jest idealny – „bije po oczach” i szybko zniechęca do czytania.
Jak sprawdzić kontrast krok po kroku
- Skopiuj kody kolorów tekstu i tła.
Możesz to zrobić np. z narzędzi deweloperskich lub przy pomocy ColorZilli. - Wejdź na WebAIM Contrast Checker.
To darmowe narzędzie online, które natychmiast pokaże, czy Twoje kolory spełniają normy dostępności. - Wklej oba kolory w pola „Foreground” i „Background”.
Zobaczysz wynik w formie „Pass” lub „Fail” wraz z oceną zgodności z poziomami WCAG AA lub AAA. - Jeśli wynik to „Fail” – zmodyfikuj kolor.
Wystarczy delikatnie przyciemnić tekst lub rozjaśnić tło, aż narzędzie pokaże „Pass”.
Alternatywne narzędzia
Jeśli chcesz pójść o krok dalej, możesz skorzystać również z innych darmowych narzędzi:
Contrast Ratio – bardzo prosty interfejs, pokazuje współczynnik kontrastu w czasie rzeczywistym.
WAVE Accessibility Tool – przeprowadza szybki audyt całej strony, wskazując miejsca z niskim kontrastem, błędami w altach, nagłówkach czy linkach.
Na co zwrócić uwagę
Sprawdzaj nie tylko zwykły tekst, ale też linki, przyciski i stany hover/focus – to właśnie one najczęściej mają zbyt niski kontrast.
Unikaj tekstu na zdjęciach – jeśli musisz go tam umieścić, dodaj półprzezroczyste tło (overlay) lub cień, by poprawić czytelność.
Zadbaj o spójność – jeśli w jednym miejscu używasz ciemnego tekstu na jasnym tle, nie odwracaj tej zasady w innych sekcjach.
Pamiętaj o urządzeniach mobilnych – kontrast może wyglądać dobrze na monitorze, ale na telefonie już niekoniecznie.
Dzięki tym prostym testom nie tylko upewnisz się, że Twoja strona wygląda profesjonalnie, ale też zrobisz coś naprawdę dobrego: sprawisz, że każda osoba, niezależnie od wzroku czy urządzenia, będzie mogła ją komfortowo przeglądać.
To właśnie takie detale odróżniają ładną stronę od naprawdę dobrze zaprojektowanej.
Potrzebujesz wsparcia?
Chcesz sprawdzić, co w Twojej ofercie wymaga poprawy? Umów się na bezpłatną rozmowę!
Jeśli chcesz, żebym spojrzała na Twoją ofertę i pomogła Ci dopracować jej strategię sprzedaży, zapraszam na bezpłatną 20-minutową rozmowę konsultacyjną.