Twoja strona jest nieczytelna dla części klientów. Jak to sprawdzić i naprawić

Jasnoszary tekst na białym tle wygląda elegancko na Twoim monitorze. Dla klienta po pięćdziesiątce, czytającego na telefonie w słońcu, jest po prostu niewidoczny. To nie jest kwestia gustu, tylko mierzalna wartość: kontrast między tekstem a tłem da się policzyć, a norma mówi, jaki musi być minimalny. W ostatnich tygodniach przeszliśmy przez wszystkie szablony KOMPASFIRM i panel klienta, licząc ten kontrast piksel po pikselu. W tym wpisie tłumaczymy, dlaczego to się opłaca sprzedażowo, dlaczego od 2025 roku bywa też obowiązkiem, co poza kontrastem składa się na dostępność i co z tej listy jest po Twojej stronie.

Ilu klientów tracisz na nieczytelnej stronie

Wady wzroku nie są niszą. Według Światowej Organizacji Zdrowia problemy ze wzrokiem ma ponad dwa miliardy ludzi, a zaburzenia rozróżniania barw dotyczą około 8 procent mężczyzn. Do tego dochodzi cała reszta sytuacji, w których każdy z nas widzi gorzej: telefon w pełnym słońcu, przygaszony ekran przy niskiej baterii, zmęczone oczy o dwudziestej drugiej, tani wyświetlacz w starym laptopie.

Dla Twojej firmy oznacza to prostą rzecz. Jeśli numer telefonu w nagłówku ma za mały kontrast, część osób go nie przeczyta i nie zadzwoni. Nie napiszą Ci, że mają problem. Po prostu zamkną kartę i wejdą do konkurencji.

To dlatego dostępność cyfrowa nie jest tematem „dla dużych firm z działem prawnym". To jest temat konwersji.

Co mówi norma i co zmieniło się w 2025 roku

Standardem, do którego odnoszą się wszyscy, jest WCAG (Web Content Accessibility Guidelines), czyli międzynarodowy zbiór wytycznych dostępności treści w sieci. Najczęściej wymagany poziom to AA (środkowy z trzech: A, AA, AAA), a jego najbardziej namacalny wymóg brzmi: zwykły tekst musi mieć kontrast co najmniej 4,5:1 wobec tła, a duży tekst i elementy interfejsu co najmniej 3:1.

Ten współczynnik to nie jest kwestia opinii. Liczy się go ze wzoru na podstawie jasności obu kolorów: czarny tekst na białym tle daje 21:1, jasnoszary na białym potrafi dać 2:1. Możesz sprawdzić dowolną parę kolorów w darmowych narzędziach online w kilkanaście sekund.

Do tego doszedł kontekst prawny. Europejski akt o dostępności (dyrektywa 2019/882), w Polsce wdrożony ustawą o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług, obowiązuje od 28 czerwca 2025 roku. Obejmuje między innymi handel elektroniczny, czyli sprzedaż towarów i usług przez internet konsumentom.

Ważne zastrzeżenie, żeby nie straszyć bez potrzeby: przepisy przewidują wyłączenia, w tym dla mikroprzedsiębiorstw świadczących usługi. To, czy Twoja firma podlega tym obowiązkom, zależy od jej wielkości i tego, co dokładnie robisz w sieci. Jeśli prowadzisz sklep internetowy albo sprzedajesz usługi online, warto to sprawdzić z księgowym lub prawnikiem, zamiast zgadywać. Niezależnie od obowiązku, sam standard warto spełniać, bo przekłada się na klientów.

Kontrast liczy się względem powierzchni, a nie szablonu

Tu dochodzimy do najciekawszej części naszej pracy, bo pokazuje, gdzie zwykle popełnia się błąd.

Naturalny odruch przy projektowaniu jest taki: dobieramy kolor akcentu do marki, sprawdzamy go raz na białym tle, wychodzi dobrze i uznajemy temat za zamknięty. Problem w tym, że jedna strona ma zwykle kilka różnych teł. Sekcja na bieli, sekcja na jasnej szarości, wyróżniony panel, ciemna stopka. Ten sam kolor tekstu, który na bieli daje przyzwoite 5:1, na jasnoszarym tle spada poniżej progu, a na granatowej stopce wypada fatalnie.

Dokładnie na to natrafiliśmy w szablonie korporacyjnym. Kolor akcentu był liczony względem bieli, ale element, w którym go używaliśmy, leżał na jasnoszarym tle sekcji. Efekt: około 3,9:1 zamiast wymaganych 4,5:1. Podobnie stopka: brała kolory tekstu przygotowane pod jasne tło, a sama była ciemna.

Wniosek, który wyciągnęliśmy i który zastosowaliśmy we wszystkich szablonach, brzmi: kolor dobiera się do powierzchni, na której leży, a nie do szablonu. Jeden layout ma jasne sekcje i ciemną stopkę, więc musi mieć osobne zestawy kolorów dla obu przypadków. Po przeróbce tekst w ciemnych obszarach ma kontrast blisko 7:1, a wyróżnienia ponad 10:1, czyli z zapasem ponad normę.

To samo dotyczy landingów sprzedażowych. Odcień marki, który świetnie wygląda jako przycisk na białym tle, jako link na granacie potrafi dać 3,7:1. Rozjaśniliśmy go tak, żeby zachował rozpoznawalny odcień marki, ale trzymał próg 4,5:1 przy każdej palecie, także przy jaśniejszych stopkach.

Nagłówki to spis treści dla osób niewidomych

Druga rzecz, którą poprawialiśmy, jest niewidoczna dla oka, ale kluczowa dla części użytkowników: kolejność nagłówków.

Osoba korzystająca z czytnika ekranu (programu, który czyta stronę na głos) nie przegląda strony wzrokiem. Nawiguje po niej nagłówkami, mniej więcej tak, jak Ty przeglądasz spis treści książki. Czytnik potrafi wypisać wszystkie nagłówki po kolei i pozwolić przeskoczyć do wybranego. Żeby to działało, poziomy muszą iść po kolei: h1 to tytuł strony, h2 to sekcje, h3 to podpunkty w sekcjach.

Kiedy strona ma h1, a zaraz po nim h3, ten spis treści się rozjeżdża. Użytkownik nie wie, czy ominął jakiś fragment, czy po prostu strona jest źle zbudowana.

Znaleźliśmy u siebie kilka takich miejsc i wszystkie miały ten sam charakter: sekcja renderowała nagłówek warunkowo, więc karty pod nim czasem były poziom niżej, a czasem wisiały w powietrzu bez rodzica. Poprawka polegała na tym, żeby poziom kart zależał od tego, czy nagłówek sekcji faktycznie się pojawił. Przy okazji dodaliśmy znacznik main i link „przejdź do treści", które pozwalają czytnikowi i klawiaturze przeskoczyć od razu do treści, z pominięciem menu.

Co jeszcze składa się na dostępność

Kontrast i nagłówki są najbardziej widoczne w pomiarach, ale norma obejmuje więcej. To, co strony z KOMPASFIRM mają z automatu:

• obsługa klawiaturą: każdy przycisk, link i pole formularza da się osiągnąć klawiszem Tab i widać, gdzie jest fokus,
• etykiety pól formularza powiązane z polami, więc czytnik mówi „telefon", a nie „pole tekstowe",
• rozmiar celów dotykowych: przyciski i linki na telefonie mają rozmiar, w który trafia palec, nie tylko kursor,
• tekst, który da się powiększyć do 200% bez rozjechania układu i bez poziomego przewijania,
• animacje szanujące ustawienie „ogranicz ruch" w systemie,
• język strony zadeklarowany w kodzie, żeby czytnik czytał polską treść polskim głosem, a niemiecką wersję niemieckim.

I to, co zostaje po Twojej stronie, bo dotyczy treści, nie szablonu:

• opisy alternatywne zdjęć (tekst „alt"): przy wgrywaniu grafiki w panelu wpisz, co jest na zdjęciu; „zespół w warsztacie przy montażu bramy" zamiast „IMG_2031",
• treść w tekście, nie na obrazku: cennik jako tabela, nie jako zdjęcie cennika,
• zrozumiałe teksty linków: „zobacz cennik przeglądów", nie „kliknij tutaj",
• filmy z napisami, jeśli mówi się w nich coś istotnego.

Czego nie musisz robić sam

Cała ta praca ma jeden cel: żebyś Ty nie musiał się nią zajmować.

Kiedy budujesz stronę w KOMPASFIRM i wybierasz paletę kolorów, nie sprawdzasz w kalkulatorze kontrastu, czy Twoja zieleń nadaje się na tekst. System dobiera odcienie tak, żeby na każdej powierzchni w Twoim szablonie trzymały normę; dlatego palety są gotowymi zestawami, a nie dowolnymi kolorami. Kiedy dodajesz sekcję z kartami, nie zastanawiasz się, czy to ma być h2 czy h3. Poziom wynika z tego, co jest wyżej na stronie.

To samo dotyczy trybu ciemnego, który przeszliśmy osobno, bo tam ta sama szarość zachowuje się zupełnie inaczej niż na jasnym tle.

Efekt widać w niezależnym pomiarze. W teście, który opisywaliśmy we wpisie o Google PageSpeed, prawdziwa strona klienta dostała 100 punktów w kategorii „Ułatwienia dostępu" zarówno na komputerze, jak i na telefonie. To ta sama kategoria, o której mówi ten wpis, mierzona narzędziem Google, a nie naszym.

Jak sprawdzić własną stronę w pięć minut

1. Otwórz stronę w narzędziu PageSpeed Insights (bezpłatne, od Google) i spójrz na kategorię „Ułatwienia dostępu"; poniżej 90 punktów są konkretne wskazania, co poprawić.
2. Przejdź stronę samą klawiaturą (Tab, Enter): jeśli nie widzisz, gdzie jesteś, albo nie da się dojść do formularza, to pierwsza rzecz do naprawy.
3. Powiększ stronę w przeglądarce do 200%: układ ma zostać czytelny bez przewijania w bok.
4. Sprawdź numer telefonu i przycisk kontaktu w kalkulatorze kontrastu: 4,5:1 to minimum.
5. Wyłącz obrazki w przeglądarce: czy strona nadal mówi, czym się zajmujesz?

Dostępność pomaga też w Google

Na koniec argument dla sceptyków, dla których to wszystko brzmi jak koszt.

Google nie ma osobnego rankingu „dla stron dostępnych", ale większość wymagań dostępności pokrywa się z tym, co wyszukiwarka i tak lubi. Poprawna hierarchia nagłówków to dla robota mapa treści. Opisy alternatywne obrazków to jedyny sposób, w jaki wyszukiwarka rozumie, co jest na zdjęciu. Czytelny kontrast i sensowna struktura zmniejszają liczbę osób, które wchodzą i natychmiast wychodzą.

Dokładnie te same elementy liczą się dziś w wyszukiwarkach opartych na AI. Model, który streszcza Twoją stronę użytkownikowi ChatGPT czy Perplexity, czyta ją strukturą, nie wyglądem. Strona z porządną hierarchią nagłówków jest po prostu łatwiejsza do zacytowania.

Podsumowanie

Dostępność cyfrowa sprowadza się do jednego pytania: czy klient, który widzi gorzej niż Ty, jest w stanie znaleźć u Ciebie numer telefonu i wysłać zapytanie.

Trzy rzeczy warto zapamiętać. Kontrast liczy się względem konkretnego tła, na którym leży tekst, a nie raz na całą stronę. Nagłówki muszą iść po kolei, bo dla części użytkowników są jedyną nawigacją. Od czerwca 2025 dla części firm to nie tylko dobra praktyka, ale i obowiązek, który warto sprawdzić w swojej sytuacji.

Na stronach z KOMPASFIRM wszystkie trzy rzeczy są ustawione domyślnie, w każdym szablonie i każdej palecie. Po Twojej stronie zostają opisy zdjęć i treść w tekście zamiast na obrazkach.