Wróć do wszystkich kryteriów

1.4.3 Kontrast (minimalny) (ang.) Contrast (Minimum)

Specjalizacje:

  • Content Creator
  • Designer

Elementy:

  • Obrazy i grafiki
  • Tekst i treść

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Fundamentem tego kryterium jest zapewnienie, aby treść tekstowa była wyraźnie oddzielona od tła, na którym się znajduje. Realizacja tej wytycznej polega na zachowaniu odpowiednich proporcji jasności między kolorem tekstu a kolorem tła, co określamy mianem współczynnika kontrastu. Dzięki temu informacje stają się dostępne dla osób, które nie widzą pełnego spektrum barw lub mają trudności z dostrzeganiem detali przy niskim kontraście.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#kontrast-minimum

    Słownik pojęć

    Współczynnik kontrastu
    –

    to liczbowa wartość (od 1:1 do 21:1) określająca różnicę w jasności między dwoma kolorami.

    Obrazy tekstu
    –

    Grafiki, które prezentują tekst w formie obrazu (JPEG, PNG, BMP, GIF, TIFF itp.) lub wektora (SVG) zamiast standardowego kodu HTML, co często utrudnia ich skalowanie bez utraty jakości.

    Wpływ na dostępność (Kogo wspierasz?)

    • Seniorzy: Z wiekiem naturalna zdolność oka do rozróżniania kontrastów i nasycenia barw ulega pogorszeniu.
    • Użytkownicy z wadami wzroku: Osoby z jaskrą, zaćmą czy niską ostrością widzenia potrzebują wyraźnych krawędzi liter, aby móc sprawnie czytać.
    • Osoby z zaburzeniami rozpoznawania barw (daltonizm): Niektóre pary kolorów mogą zlewać się w jedną plamę, jeśli ich jasność jest zbliżona.
    • Osoby w specyficznych warunkach: Każdy z nas korzysta z urządzenia w pełnym słońcu lub na ekranie o niskiej jasności – wysoki kontrast ratuje wtedy czytelność.
    • Użytkownicy z zaburzeniami poznawczymi: Wyraźna treść redukuje zmęczenie i pozwala szybciej przetwarzać informacje.

    Zasady wdrażania i wymagania techniczne

    Wdrożenie wymaga zachowania następujących proporcji:

    • Tekst standardowy: Współczynnik kontrastu minimum 4.5:1. Dotyczy to również tekstów zastępczych ((ang.) placeholders).
    • Duży tekst: Współczynnik kontrastu minimum 3:1.
    • Definicja dużego tekstu:
      • Tekst o rozmiarze co najmniej 18pt (ok. 24px).
      • Tekst pogrubiony o rozmiarze co najmniej 14pt (ok. 18.5px).
      • Przelicznik techniczny: 1pt = 1.333px.
    • Stany interaktywne: Wymóg musi być spełniony także w stanach :hover, :focus i :active.

    Wyjątki i sytuacje szczególne

    Nie każda treść tekstowa na stronie musi spełniać rygorystyczne normy kontrastu. Wyjątki obejmują:

    • Logotypy: Tekst będący częścią znaku towarowego lub logotypu marki nie podlega tym restrykcjom.
    • Elementy nieaktywne: Tekst w elementach interfejsu, które są obecnie niedostępne dla użytkownika (np. wyszarzony przycisk „Wyślij”)
    • Tekst dekoracyjny: Napisy, które pełnią funkcję czysto estetyczną (np. powtarzające się wzory w tle) i nie niosą istotnych informacji.
    • Tekst incydentalny w obrazie: Napisy, które przypadkowo znalazły się na zdjęciu, np. szyld sklepu w tle fotografii ulicznej.

    Przykłady implementacji

    Tekst standardowy (wymagany kontrast 4.5:1)

    Duży tekst (wymagany kontrast 3:1)

    Obrazy tekstu

    Najczęstsze błędy

    • F24: Deklarowanie tylko jednego koloru (tylko tła lub tylko tekstu): To krytyczny błąd polegający na określeniu w CSS właściwości color bez jednoczesnego zdefiniowania background-color (lub odwrotnie). Pamiętaj, że użytkownicy mogą wymuszać własne schematy kolorów w przeglądarkach. Jeśli zadeklarujesz jedynie jasny tekst, a tło pozostawisz domyślne, osoba z ustawionym białym tłem zobaczy pustą stronę. Zawsze definiuj obie te właściwości wspólnie, aby zagwarantować czytelność treści.
    • F83: Nieodpowiednie obrazy w tle: Stosowanie grafik tła, które w interakcji z tekstem (lub obrazami tekstu) nie zapewniają minimalnego kontrastu. Częstym przypadkiem jest tekst umieszczony na zdjęciu o dużej rozpiętości tonalnej, gdzie litery są czytelne na ciemnych fragmentach fotografii, ale znikają na jasnych.
    • Zbyt cienkie kroje pisma ((ang.) Thin fonts): Wykorzystywanie bardzo cienkich fontów, które ze względu na mechanizmy wygładzania krawędzi ((ang.) anti-aliasing) są renderowane jako znacznie jaśniejsze niż wynika to z definicji koloru w CSS, co w praktyce drastycznie obniża kontrast.
    • Ignorowanie stanów interaktywnych: Zaniechanie sprawdzenia kontrastu dla linków lub przycisków po najechaniu myszką (:hover) lub po wejściu na nie tabulatorem (:focus).
    • Zaokrąglanie wyników: Uznawanie testu za zaliczony, gdy narzędzie wskazuje wynik np. 4.48:1. Zgodnie z wytycznymi wartości te są progami rygorystycznymi i nie podlegają zaokrąglaniu w górę.

    Najlepsze praktyki

    • Celuj wyżej: Jeśli to możliwe, stosuj kontrast 7:1, co odpowiada poziomowi AAA i zapewnia jeszcze większą wygodę.
    • Unikaj tekstu jako obrazka (obrazów tekstu): Zawsze stosuj żywy tekst HTML/CSS. Jest on elastyczny, lepiej czytelny po powiększeniu i wspiera SEO.
    • Podwójne wyróżnienie: Nie polegaj tylko na kolorze. Dodaj podkreślenie lub pogrubienie, aby odróżnić linki od zwykłego tekstu.
    • Kontrola personalizacji: Jeśli wdrażasz (ang.) Dark Mode, upewnij się, że każdy z wariantów kolorystycznych przechodzi testy kontrastu.
    • Personalizacja poziomu kontrastu: Warto rozważyć wdrożenie mechanizmu pozwalającego na przełączanie schematów kolorystycznych, w tym opcji o nieco niższym kontraście. Choć wysoki kontrast jest niezbędny dla wielu osób słabowidzących, niektórzy użytkownicy z zaburzeniami poznawczymi, autyzmem czy dysleksją mogą odczuwać dyskomfort lub trudności w czytaniu przy zbyt jaskrawych zestawieniach (tzw. olśnienie). Zapewnienie alternatywnego widoku wspiera neuroróżnorodność, pod warunkiem że domyślny schemat strony nadal spełnia minimalne wymogi kryterium 1.4.3.

    Metody testowania

    • (ang.) WCAG Color contrast checker: Wykorzystaj zewnętrzne narzędzie z funkcją próbnika (pipety), aby pobrać kolory bezpośrednio z obrazów tekstu lub grafik PNG. Pamiętaj, że przeglądarki często nie potrafią automatycznie obliczyć kontrastu tekstu osadzonego wewnątrz bitmapy, dlatego ręczna weryfikacja takich elementów jest niezbędna.
    • ANDI.js: Wybierz moduł „Kontrast kolorów”, który nanosi na stronę czytelną nakładkę z obliczonymi współczynnikami dla każdego fragmentu tekstu. Jest to niezwykle skuteczne przy szybkiej ocenie całych bloków treści oraz weryfikacji, czy elementy pozycjonowane absolutnie zachowują kontrast wobec tła.
    • Narzędzie deweloperskie (ang.) Developer Tools: Wykorzystaj kursor inspekcji i najedź na wybrany element tekstowy, aby sprawdzić kolor treści. W sekcji (ang.) „Styles” kliknij kwadrat z kolorem – próbnik automatycznie pokaże obliczony współczynnik kontrastu.
    • (ang.) WAVE Evaluation Tool: Uruchom narzędzie i przejdź do zakładki (ang.) „Contrast”, aby uzyskać listę wszystkich błędów automatycznie wykrytych w kodzie. Narzędzie to pozwala również na testowe manipulowanie jasnością kolorów bezpośrednio w panelu, co ułatwia znalezienie barw spełniających wymóg 4.5:1.
    • (ang.) IBM Equal Access Toolkit: Przeprowadź pełny audyt strony, aby zidentyfikować błędy kontrastu osadzone głęboko w arkuszach stylów CSS. Narzędzie to precyzyjnie wskazuje konkretne reguły kodu, które wymagają poprawy, aby osiągnąć zgodność na poziomie AA.

    Sprawdź swoją wiedzę

    Poniżej znajduje się 5 przykładów tekstu. Twoim zadaniem jest ocena, czy kontrast między tekstem a tłem jest wystarczający zgodnie z WCAG 1.4.3.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: (ang.) WCAG Color contrast checker, ANDI.js, Narzędzie deweloperskie (ang.) Developer Tools, (ang.) IBM Equal Access Toolkit, (ang.) WAVE Evaluation Tool

    Link: https://pdc.ambiscale.com/training/wcag-1-4-3/

    #1 DOBRZE

    Dlaczego: Kontrast wynosi 10.98:1. Jest to znacznie powyżej wymaganego 4.5:1 dla standardowego tekstu. Tekst jest bardzo czytelny.

    #2 BŁĄD

    Problem: Pomarańczowy tekst na białym tle ma kontrast 2.85:1.
    Dlaczego: Mimo że jest to duży tekst (wymagane 3:1), kontrast jest nadal zbyt niski. Osoby słabowidzące mogą mieć problem z odczytaniem nagłówka.
    Naprawa: Przyciemnić pomarańczowy (np. do #d35400) lub zmienić tło.

    #3 BŁĄD

    Problem: Biały tekst na jasnoszarym tle grafiki ma kontrast 1.78:1.
    Dlaczego: Tekst jest prawie niewidoczny. Zasady kontrastu dotyczą również tekstu będącego częścią obrazka.
    Naprawa: Zmienić kolor tła w grafice na ciemniejszy lub kolor tekstu na ciemny.

    #4 DOBRZE

    Dlaczego: Kontrast wynosi 4.3:1. Dla dużego tekstu wymagane jest tylko 3:1, więc ten nagłówek spełnia normy z zapasem (spełnia nawet normę dla zwykłego tekstu).

    #5 BŁĄD

    Problem: Szary tekst w stopce ma kontrast 1.78:1.
    Dlaczego: Jest to standardowy tekst (mały), więc wymaga kontrastu 4.5:1. Obecny kolor jest zdecydowanie zbyt jasny i trudny do odczytania.
    Naprawa: Zmienić kolor tekstu na ciemniejszy szary (np. #595959).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów