Bezpłatnie · bez rejestracji
Kontrast kolorów WCAG
Wybierz kolor tekstu i tła. Od razu zobaczysz współczynnik kontrastu, wynik dla progów AA i AAA oraz najbliższy kolor, który przejdzie test, jeśli obecny jest za słaby.
Współczynnik kontrastu
-
Podgląd
Duży nagłówek oferty
Zwykły tekst akapitu, taki jak opis usługi albo cena. Tak przeczytają go Twoi klienci na telefonie w słońcu.
Drobny tekst przypisu, np. godziny otwarcia.
Przycisk z obramowaniemKontrast a kolory marki
Najczęstszy problem nie leży w logo, tylko w tekstach: szary tekst na białym tle, biały napis na jasnym kolorze marki, przyciski w pastelach. Kolor marki nie musi znikać ze strony. Wystarczy używać go do akcentów i dużych elementów, a do drobnego tekstu dobrać jego ciemniejszy wariant.
Kontrast to tylko jeden z elementów dostępności. Pełny obraz strony (kontrast, opisy zdjęć, etykiety formularzy, szybkość) pokaże darmowy audyt strony, a paletę marki od początku z myślą o czytelności projektujemy w ramach identyfikacji wizualnej.
Jaki kontrast jest wymagany według WCAG?
Na poziomie AA zwykły tekst potrzebuje kontrastu co najmniej 4,5:1, a duży tekst 3:1. Na poziomie AAA odpowiednio 7:1 i 4,5:1. Ikony, obramowania pól i inne ważne elementy graficzne powinny mieć co najmniej 3:1.
Co to jest duży tekst?
Według WCAG to tekst o wielkości co najmniej 18 punktów albo 14 punktów pogrubiony, czyli w przybliżeniu 24 piksele lub 18,7 piksela pogrubione.
Czy logo musi spełniać wymagania kontrastu?
Nie. WCAG wyłącza z wymagań tekst, który jest częścią logo lub nazwy marki. Warto jednak, żeby logo było czytelne, bo pojawia się też w małych rozmiarach.
Czy moja firma musi mieć dostępną stronę?
Od 28 czerwca 2025 r. w Polsce obowiązuje ustawa wdrażająca Europejski Akt o Dostępności. Dotyczy m.in. sklepów internetowych, ale mikroprzedsiębiorcy świadczący usługi (mniej niż 10 osób i obrót do 2 mln euro) są z niej wyłączeni. Nawet bez obowiązku czytelny tekst oznacza więcej klientów, którzy przeczytają ofertę.
Jak liczony jest kontrast?
Z luminancji względnej obu kolorów według wzoru WCAG: (jaśniejszy + 0,05) / (ciemniejszy + 0,05). Wynik mieści się od 1:1 (brak kontrastu) do 21:1 (czarny na białym).
Więcej odpowiedzi znajdziesz w naszej bazie wiedzy — piszemy tam o cenach, terminach i typowych błędach.
Poczytaj więcej
Wszystkie artykuły- Logo i branding2 min czytaniaJak wybrać kolory marki, żeby nie żałować za rokPraktyczne zasady doboru kolorystyki firmowej: ile kolorów, jak sprawdzić czytelność i dlaczego kolor musi działać zarówno na ekranie, jak i w druku.
- Logo i branding3 min czytaniaCo powinna zawierać identyfikacja wizualna firmyCzym różni się logo od identyfikacji wizualnej i księgi znaku, co powinien zawierać każdy z tych zestawów i ile z tego naprawdę potrzebuje mała firma.
- Strony internetowe2 min czytaniaJak pisać treść, którą rozumie Google i AIZasady pisania tekstów na stronę, które dobrze pozycjonują się w wyszukiwarce i są chętnie cytowane przez modele językowe. Bez keyword stuffingu.
Inne darmowe narzędzia
Zbudujmy Twoją markę od zera.
Bezpłatna konsultacja, konkretna wycena w 24h, bez zobowiązań.
Wolisz porozmawiać? Zadzwoń: 730 009 902