Dostępność cyfrowa marki: kontrast, czcionki i wymogi Europejskiego aktu o dostępności

Dlaczego dostępność zaczyna się od identyfikacji wizualnej

O dostępności strony często myśli się jak o zadaniu dla programistów: atrybuty, nagłówki, obsługa klawiaturą. Część najważniejszych decyzji zapada jednak wcześniej, w księdze znaku. Jeśli kolor marki jest za jasny na tekst, a font marki ma bardzo cienkie kreski, każdy szablon, każdy baner i każda strona powielą ten problem. Poprawianie go później kosztuje więcej niż dobry wybór na starcie.

Skala problemu nie jest niszowa. Według organizacji Colour Blind Awareness zaburzenia widzenia barw dotyczą około 1 na 12 mężczyzn i 1 na 200 kobiet. Do tego dochodzą osoby słabowidzące, starsze, korzystające z telefonu w pełnym słońcu albo powiększające tekst w przeglądarce. Materiał czytelny dla nich jest czytelniejszy dla wszystkich.

W tym tekście skupiamy się na warstwie wizualnej marki: kolorach, typografii i elementach interfejsu. Dostępność wideo, w tym napisy, opisujemy osobno w artykule o napisach, dźwięku i dostępności wideo, a całość systemu wizualnego w przewodniku identyfikacja wizualna marki.

Europejski akt o dostępności i polska ustawa: kogo dotyczą

Unia Europejska przyjęła w 2019 r. dyrektywę 2019/882, nazywaną Europejskim aktem o dostępności (European Accessibility Act). W Polsce wdraża ją ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (Dz.U. 2024 poz. 731), nazywana Polskim Aktem o Dostępności. Przepisy są stosowane od 28 czerwca 2025 r.

Ważne zastrzeżenie dotyczy zakresu. Zwolnienie mikroprzedsiębiorców obejmuje usługi, a nie produkty objęte ustawą. Obrót liczy się dla całej firmy, a nie dla jednego sklepu. Z definicji usług handlu elektronicznego wynika też, że chodzi o usługi prowadzące do zawarcia umowy, więc przepisy dotyczą przede wszystkim sklepów i aplikacji sprzedażowych. Czy obejmują konkretną stronę firmy, oceń z prawnikiem, bo zależy to od jej funkcji.

Nawet jeśli Twoja firma korzysta ze zwolnienia, warto projektować dostępnie. Firma może urosnąć ponad próg mikroprzedsiębiorcy, a klienci z niepełnosprawnościami kupują niezależnie od wielkości sprzedawcy. O tym, jak dostępność łączy się z projektem stron produktowych, piszemy w tekście o karcie produktu, która sprzedaje.

Kontrast: co dokładnie wymaga WCAG

Kontrast to stosunek jasności dwóch kolorów, od 1:1 dla identycznych kolorów do 21:1 dla czerni na bieli. WCAG wyznacza kilka progów, które trzeba uwzględnić w palecie marki.

Z wymogu kontrastu zwolniony jest tekst będący częścią logo lub nazwy marki oraz tekst czysto dekoracyjny. Zwolnienie nie obejmuje jednak hasła reklamowego, przycisków ani nagłówków w kolorach marki. W3C zastrzega też, że logo jest zwolnione tylko wtedy, gdy jego wygląd wynika z zasad identyfikacji, a nie z decyzji autora strony, na przykład o pokazaniu ciemnoszarych logo partnerów na czarnym tle.

Przykłady z wyjaśnień W3C pokazują, jak łatwo przekroczyć granicę. Jasnoszare obramowanie pola #AAA na białym tle ma kontrast 2,3:1 i nie spełnia wymogu, jeśli jest jedynym sygnałem, że pole istnieje. Obramowanie #767676 już go spełnia. Dlatego paleta marki powinna zawierać nie tylko kolory główne, ale też sprawdzone odcienie szarości do obramowań, tekstu pomocniczego i nieaktywnych elementów. Przykładowe wyliczenia kontrastu dla popularnych kolorów znajdziesz w tekście o kolorach marki.

Czcionki i układ tekstu

WCAG nie narzuca konkretnego kroju ani minimalnego rozmiaru fontu. Stawia za to wymagania, które dobrze dobrana typografia spełnia bez wysiłku, a źle dobrana tylko z trudem:

• Powiększenie do 200%. Kryterium 1.4.4 na poziomie AA wymaga, by tekst dało się powiększyć do 200% bez technologii wspomagających i bez utraty treści lub funkcji. Tekst zapisany w grafice nie powiększy się razem z tekstem strony, więc hasła i oferty lepiej składać tekstem, a nie wklejać jako obraz.
• Odstępy. Kryterium 1.4.12 wymaga, by treść nie gubiła się i nie nakładała, gdy użytkownik ustawi wysokość linii na 1,5 rozmiaru fontu, odstęp po akapicie na 2 rozmiary, odstęp między literami na 0,12, a między wyrazami na 0,16 rozmiaru fontu. Nie trzeba ustawiać takich wartości domyślnie, ale układ musi je wytrzymać.
• Wymogi ustawy. Polski Akt o Dostępności wśród wymagań dla usług wymienia czcionkę o odpowiednim rozmiarze i kroju oraz wystarczający kontrast i odstępy między literami, wierszami i akapitami.

W praktyce lepiej unikać bardzo cienkich odmian w tekście ciągłym, długich fragmentów pisanych wersalikami, tekstu wyjustowanego na wąskich kolumnach i krojów ozdobnych w miejscach, gdzie liczy się szybkie czytanie, na przykład w cenach i formularzach. Jak wybrać kroje z myślą o czytelności i licencjach, opisujemy w tekście o typografii marki.

Przyciski, linki i fokus w kolorach marki

Elementy interfejsu to miejsce, w którym identyfikacja wizualna spotyka się z funkcją. Przycisk „Kup teraz” w kolorze marki musi być czytelny, widoczny i łatwy do trafienia palcem.

WCAG 2.2, opublikowane jako rekomendacja W3C 5 października 2023 r., dodało dziewięć kryteriów. Dla projektantów identyfikacji najważniejsze są dwa na poziomie AA. Kryterium 2.5.8 wymaga, by cel kliknięcia lub dotknięcia miał co najmniej 24 × 24 piksele CSS albo odpowiedni odstęp od sąsiednich celów, z kilkoma wyjątkami, na przykład dla linków w tekście. Kryterium 2.4.11 wymaga, by element, na którym jest fokus klawiatury, nie był całkowicie zasłonięty, na przykład przez przyklejony baner z promocją. WCAG 2.2 zachowuje kryteria z wersji 2.1, z wyjątkiem usuniętego kryterium 4.1.1 dotyczącego parsowania kodu.

Wskaźnik fokusu, czyli obrys pokazujący, który element jest aktywny przy obsłudze klawiaturą, też musi być widoczny. W3C podaje przykład: żółty obrys #FFFF00 na białym tle nie spełnia wymogu kontrastu 3:1. Kolor fokusu warto więc ustalić w księdze znaku, a nie zostawiać przypadkowi.

• Przyciski główne mają kontrast tekstu do tła co najmniej 4,5:1, a ich krawędź lub tło odróżnia się od otoczenia przy kontraście co najmniej 3:1.
• Linki w tekście różnią się od tekstu czymś więcej niż kolorem, na przykład podkreśleniem.
• Błędy w formularzach mają komunikat tekstowy lub ikonę, a nie tylko czerwoną ramkę.
• Wskaźnik fokusu ma określony w wytycznych kolor i kontrast.
• Cele dotyku mają co najmniej 24 × 24 piksele CSS lub odpowiedni odstęp.

Materiały marki poza stroną: PDF, e-mail i media społecznościowe

Strona i sklep to nie jedyne miejsca, w których klienci spotykają markę. Oferty w PDF, newslettery i grafiki w mediach społecznościowych podlegają tym samym zasadom czytelności, nawet jeśli nie zawsze tym samym przepisom.

• PDF i dokumenty. Szablony ofert i katalogów powinny korzystać z par kolorów spełniających wymogi kontrastu i z prawdziwego tekstu, a nie ze skanów lub obrazów.
• E-mail. Najważniejsza treść i przycisk nie powinny być zapisane wyłącznie w grafice, bo jeśli obrazy się nie wczytają, odbiorca nie zobaczy oferty, a czytnik ekranu nie odczyta tekstu z grafiki. Szerzej o projektowaniu wysyłek piszemy w tekście o e-mail marketingu w 2026 roku.
• Grafiki i zdjęcia. Zdjęcia, ikony i grafiki w sklepie potrzebują tekstów alternatywnych, co Shoper wymienia wśród przykładowych wymagań dla sklepów internetowych.
• Wideo. Napisy i transkrypcje omawiamy w osobnym tekście o dostępności wideo.

Jak wpisać dostępność do księgi znaku

Najskuteczniejszy sposób na dostępność marki to zapisanie jej zasad w tym samym dokumencie, z którego zespół bierze kolory i fonty. Wtedy każdy nowy materiał startuje z dostępnych ustawień. Księga znaku lub brand book powinny zawierać:

1. Tabelę dozwolonych par kolorów tekstu i tła z wyliczonym kontrastem i oznaczeniem, do jakiego rozmiaru tekstu nadaje się dana para.
2. Kolory funkcyjne do komunikatów o błędzie, ostrzeżeń i potwierdzeń, zawsze z ikoną lub tekstem.
3. Zasady typograficzne: minimalne rozmiary tekstu na stronie i w druku przyjęte przez markę, wysokość linii, zakaz cienkich odmian w tekście ciągłym.
4. Wygląd elementów interfejsu: przyciski, linki, pola formularzy, wskaźnik fokusu, rozmiary celów dotyku.
5. Wersje logo na jasne i ciemne tło oraz wersję o wysokim kontraście do użycia jako link. Kryteria oceny znaku opisujemy w tekście logo firmy: jak ocenić projekt.
6. Zasady dla grafik i wideo: tekst alternatywny, napisy, brak informacji przekazywanych samym kolorem.

Jak zorganizować brand book, żeby zespół rzeczywiście z niego korzystał, opisujemy w tekście o brand booku. Przy przeglądzie identyfikacji raz w roku dopisz do listy kontrolnej sprawdzenie nowych materiałów pod kątem kontrastu i czytelności. To kilka godzin pracy, które oszczędzają kosztownych poprawek po zgłoszeniu klienta.