WCAG 1.4.6: Kontrast (rozszerzony)

Co Oznacza Ta Zasada

WCAG 1.4.6 Kontrast (zwiększony) jest kryterium sukcesu na poziomie AAA w ramach Wytycznej 1.4 (Rozróżnialne). Wymaga ono, aby wizualna prezentacja tekstu i obrazów tekstu miała współczynnik kontrastu co najmniej 7:1 względem tła. Dla dużego tekstu — zdefiniowanego jako co najmniej 18pt (około 24px) dla kroju o normalnej grubości lub co najmniej 14pt (około 18,67px) dla kroju pogrubionego — wymagany współczynnik kontrastu wynosi co najmniej 4,5:1. Jest to istotne podniesienie wymagań względem kryterium poziomu AA 1.4.3, które wymaga jedynie 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego.

Współczynnik kontrastu oblicza się przy użyciu względnej luminancji dwóch zaangażowanych kolorów, zgodnie z definicją w specyfikacji WCAG. Wzór uwzględnia zlinearyzowane wartości RGB kolorów pierwszego planu i tła, aby uzyskać współczynnik w zakresie od 1:1 (brak kontrastu, identyczne kolory) do 21:1 (maksymalny kontrast, czarny na białym lub biały na czarnym).

To kryterium ma zastosowanie do całego renderowanego tekstu w interfejsie, w tym tekstu w obrazach, ikon zawierających tekst oraz tekstu renderowanego w elementach canvas, jeśli renderowany wynik jest dostępny. Dotyczy nagłówków, tekstu głównego, etykiet, tekstu zastępczego w polach formularzy, gdy przekazuje on istotne informacje, etykiet przycisków, tekstu linków, elementów nawigacyjnych oraz wszelkich innych treści tekstowych widocznych na ekranie.

WCAG 1.4.6 dzieli te same oficjalne wyjątki co kryterium 1.4.3. Poniższe elementy są wyraźnie wyłączone z wymogu:

• Tekst incydentalny: Tekst lub obrazy tekstu, które są czysto dekoracyjne, niewidoczne dla kogokolwiek lub stanowią część obrazu zawierającego istotne inne treści wizualne. Przykładem może być tekst widoczny w tle fotografii użytej jako dekoracja.
• Logotypy: Tekst będący częścią logo lub nazwy marki nie podlega wymaganiom kontrastu. Dotyczy to wyłącznie części logo zawierającej nazwę firmy (wordmark), a nie przylegającego tekstu głównego czy etykiet interfejsu.
• Nieaktywne komponenty interfejsu użytkownika: Tekst w wyłączonych kontrolkach formularza, wyłączonych przyciskach lub innych elementach interfejsu, które nie są obecnie operacyjne, jest zwolniony. Jednak ten wyjątek należy stosować oszczędnie — nieaktywne elementy UI nadal powinny być na tyle postrzegalne, aby komunikować swoje istnienie.

Spełnienie tego kryterium oznacza, że każdy przypadek treści tekstowej, który nie jest wyraźnie wyłączony, spełnia lub przekracza współczynnik 7:1 (lub 4,5:1 dla dużego tekstu). Niespełnienie ma miejsce, gdy jakikolwiek tekst nieobjęty wyjątkiem spada poniżej tych progów, nawet o niewielki margines. Kontrast musi być zachowany we wszystkich obsługiwanych stanach — hover, focus, active, visited — ponieważ kryterium dotyczy renderowanej prezentacji w każdym z tych stanów.

Dlaczego To Ma Znaczenie

Około 2,2 miliarda ludzi na świecie żyje z jakąś formą upośledzenia wzroku, według Światowej Organizacji Zdrowia. Spośród nich setki milionów doświadczają schorzeń, które bezpośrednio ograniczają zdolność rozróżniania kolorów lub postrzegania tekstu o niskim kontraście, w tym zaćmy, jaskry, zwyrodnienia plamki żółtej oraz różnych form zaburzeń widzenia barw. Dla tej populacji interfejsy spełniające jedynie próg kontrastu AA na poziomie 4,5:1 mogą nadal stanowić istotną barierę w czytaniu i rozumieniu treści.

Współczynnik 7:1 wymagany przez to kryterium jest specjalnie skalibrowany, aby uwzględnić utratę czułości na kontrast związaną ze starzeniem się wzroku i powszechnymi schorzeniami niskowzrocznymi. Badania w dziedzinie nauk o widzeniu pokazują, że osoba z umiarkowanie obniżoną czułością na kontrast — mniej więcej równoważną osobie z ostrością 20/80 korzystającej z korekcji — może doświadczać efektywnego spadku kontrastu mniej więcej trzy do jednego. Projektowy współczynnik 7:1, po takim percepcyjnym obniżeniu, nadal zapewnia około 2,3:1 postrzeganego kontrastu, co jest bliskie minimalnego progu, przy którym tekst staje się czytelny. Bez tego marginesu bezpieczeństwa tacy użytkownicy mogą być całkowicie niezdolni do odczytania treści.

Rozważmy scenariusz z życia: 68-letni klient banku zarządzający swoimi finansami online w jasne popołudnie, przy odbijającym się od ekranu laptopa świetle słonecznym. Nawet przy w pełni sprawnym wzroku w ujęciu klinicznym, odblaski i naturalne obniżenie czułości na kontrast towarzyszące starzeniu mogą sprawić, że średnioszary tekst na białym tle stanie się całkowicie nieczytelny. Projekt osiągający kontrast 7:1 w normalnych warunkach nadal będzie użyteczny w takim kontekście; projekt ledwie spełniający 4,5:1 — nie.

Poza wpływem specyficznym dla niepełnosprawności, tekst o wysokim kontraście przynosi korzyści praktycznie wszystkim użytkownikom w suboptymalnych warunkach czytania: w jasnym świetle dziennym na zewnątrz, na zużytych ekranach z obniżonym podświetleniem, na monochromatycznych wyświetlaczach e-ink oraz na niskiej jakości projektorach w salach spotkań. Zwiększony wymóg kontrastu stanowi zatem nie tylko poprawę dostępności, ale szeroko rozumiane usprawnienie użyteczności.

Z perspektywy optymalizacji pod kątem wyszukiwarek tekst o wysokim kontraście ma tendencję do korelowania z czystszą, bardziej uporządkowaną hierarchią typograficzną. Choć wyszukiwarki nie mierzą bezpośrednio kontrastu, dyscyplina projektowa wymagana do spełnienia standardów kontrastu AAA zazwyczaj prowadzi do stron o silniejszej hierarchii wizualnej i lepszych wynikach czytelności, co przekłada się na niższe współczynniki odrzuceń i dłuższy czas spędzany na stronie — sygnały pośrednio korzystne dla wyników SEO.

Powiązane Reguły Axe-core

• color-contrast-enhanced: Jest to główna reguła axe-core powiązana z WCAG 1.4.6. Ocenia obliczone kolory pierwszego planu i tła wszystkich węzłów tekstowych w DOM i oblicza ich współczynnik kontrastu przy użyciu wzoru luminancji WCAG. Reguła oznacza każdy element tekstowy, w którym współczynnik kontrastu spada poniżej 7:1 dla tekstu o normalnym rozmiarze lub poniżej 4,5:1 dla tekstu dużego (zgodnie z obliczonym font-size i font-weight). Zgłasza rzeczywisty znaleziony współczynnik, wymagany współczynnik oraz odpowiedzialny element, co ułatwia naprawę. Reguła rozróżnia tekst normalny i duży, używając tych samych progów rozmiaru, które definiuje WCAG: 18pt (24px) dla kroju o normalnej grubości i 14pt (18,67px) dla kroju pogrubionego.
• Ograniczenia wymagające testów manualnych: Zautomatyzowane reguły, takie jak color-contrast-enhanced, nie są w stanie wykryć błędów kontrastu w kilku istotnych scenariuszach. Tekst renderowany wewnątrz elementów <canvas> jest niewidoczny dla skanera opartego na DOM i wymaga ręcznej inspekcji wizualnej. Tekst nałożony na gradientowe lub fotograficzne tła stanowi szczególnie trudne wyzwanie: współczynnik kontrastu zmienia się w obrębie tekstu w zależności od tego, która część gradientu lub obrazu znajduje się za daną literą. Narzędzia automatyczne zazwyczaj próbkują pojedynczy kolor tła lub zgłaszają wyniki niejednoznaczne w takich przypadkach. Tekst zmieniający kolor przy najechaniu kursorem lub fokusie musi być również testowany ręcznie w każdym stanie interaktywnym, ponieważ skany automatyczne zazwyczaj rejestrują tylko domyślny stan renderowania. Dodatkowo tekst, którego kontrast zależy od niestandardowych właściwości CSS rozwiązywanych w czasie działania przez JavaScript, może nie być możliwy do oceny podczas statycznego skanu.

Jak Testować

1. Automatyczny skan za pomocą axe DevTools: Zainstaluj rozszerzenie przeglądarki axe DevTools (Chrome lub Firefox). Otwórz docelową stronę, aktywuj rozszerzenie i uruchom skan całej strony. W panelu wyników przefiltruj według identyfikatora reguły color-contrast-enhanced lub wyszukaj „enhanced” na liście problemów. Dla każdego oznaczonego elementu panel wyświetla element, rzeczywisty współczynnik kontrastu i wymagany współczynnik. Zanotuj elementy zgłoszone jako wymagające przeglądu, a nie jednoznacznego zaliczenia lub niezaliczenia — zazwyczaj dotyczą one obliczonych teł, których nie udało się rozwiązać i wymagają ręcznej weryfikacji.
2. Automatyczny skan za pomocą Lighthouse: Otwórz Chrome DevTools, przejdź do zakładki Lighthouse i uruchom audyt dostępności. Lighthouse używa wewnętrznie axe-core, więc wykaże te same naruszenia color-contrast-enhanced. Raport grupuje je w sekcji Accessibility i linkuje do każdego elementu z błędem. Pamiętaj, że Lighthouse audytuje stronę w jej stanie domyślnym i nie testuje stanów interaktywnych, takich jak hover czy focus.
3. Ręczne próbkowanie kolorów: Użyj próbnik kolorów w narzędziach deweloperskich przeglądarki lub dedykowanego narzędzia, takiego jak Colour Contrast Analyser (TPGi), aby ręcznie pobrać próbki kolorów pierwszego planu i tła elementów tekstowych. Jest to szczególnie ważne dla tekstu na obrazach, gradientach lub półprzezroczystych tłach. Pobierz próbki z wielu punktów wzdłuż tekstu, gdzie tło się zmienia, i sprawdź, czy minimalny współczynnik kontrastu we wszystkich próbkowanych punktach wynosi co najmniej 7:1 dla tekstu normalnego lub 4,5:1 dla tekstu dużego.
4. Testowanie stanów interaktywnych: Korzystając z narzędzi deweloperskich przeglądarki, wymuś na elementach ich stany hover, focus, active i visited (za pomocą panelu :hov w Chrome DevTools lub odpowiednika). Ponownie wykonaj sprawdzenie kontrastu w każdym stanie, aby upewnić się, że zmiany kolorów zastosowane przez pseudoklasy CSS nie wprowadzają błędów kontrastu. Zwróć szczególną uwagę na stany visited linków, stany hover przycisków oraz wskaźniki fokusu pól formularzy.
5. Weryfikacja czytnikiem ekranu (NVDA + Firefox): Choć czytniki ekranu nie testują bezpośrednio kontrastu, potwierdzenie, że tekst jest dostępny dla NVDA, potwierdza, że jest to prawdziwy tekst w DOM (a nie obraz tekstu bez alternatywy). Uruchom Firefox, włącz NVDA i przeglądaj stronę za pomocą kursora czytania. Każdy tekst, którego NVDA nie może odczytać, należy zbadać, aby ustalić, czy jest to obraz tekstu wymagający testowania kontrastu na poziomie obrazu.
6. Weryfikacja czytnikiem ekranu (VoiceOver + Safari na macOS): Aktywuj VoiceOver za pomocą Command+F5 i nawiguj po stronie za pomocą VO+Strzałka w prawo. Podobnie jak w przypadku NVDA, tekst, który VoiceOver pomija lub odczytuje nieprawidłowo, może wskazywać na niestandardowe renderowanie tekstu wymagające ręcznej inspekcji kontrastu.
7. Symulacja w skali szarości: Włącz tryb wyświetlania w skali szarości w ustawieniach dostępności systemu operacyjnego (dostępne w Windows, macOS, iOS i Android). Usuwa to wszystkie informacje o kolorze i sprawia, że różnice kontrastu stają się natychmiast widoczne. Tekst, który staje się trudny do odczytania w trybie skali szarości, niemal na pewno nie spełnia wymogu zwiększonego kontrastu.

Jak Naprawić

Tekst główny na jasnym tle — nieprawidłowy

<!-- Fails 1.4.6: #767676 on #ffffff yields approximately 4.54:1,
     which passes AA (1.4.3) but falls far short of the 7:1 AAA requirement -->
<p style='color: #767676; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Tekst główny na jasnym tle — prawidłowy

<!-- Passes 1.4.6: #595959 on #ffffff yields approximately 7.0:1,
     meeting the enhanced contrast requirement for normal-weight body text -->
<p style='color: #595959; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Kolorowy nagłówek na firmowym tle — nieprawidłowy

<!-- Fails 1.4.6: brand blue #4A90D9 on white #ffffff yields approximately 3.0:1.
     Even though this is a heading and may appear large, bold headings at
     common web sizes (e.g. 20px bold) may not qualify as WCAG "large text"
     depending on rendering, and 3.0:1 fails even the large-text 4.5:1 threshold -->
<h2 style='color: #4A90D9; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Kolorowy nagłówek na firmowym tle — prawidłowy

<!-- Passes 1.4.6: dark navy #1A3A5C on white #ffffff yields approximately 12.6:1.
     Exceeds the 7:1 requirement for normal text and comfortably surpasses
     the 4.5:1 large-text requirement. Brand identity is preserved through
     the use of a darker shade within the same hue family. -->
<h2 style='color: #1A3A5C; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Tekst na tle gradientowym — nieprawidłowy

<!-- Fails 1.4.6: The gradient transitions from a dark color that provides
     adequate contrast on the left to a light color that provides insufficient
     contrast on the right. Text spanning the full width will fail at some point. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff;'>Create your account today and get started.</p>
</div>

Tekst na tle gradientowym — prawidłowy

<!-- Passes 1.4.6: A semi-transparent dark overlay behind the text ensures
     that foreground text maintains at least 7:1 contrast regardless of
     the underlying gradient value at any point beneath the text block. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff; background-color: rgba(0,0,0,0.75); padding: 8px 12px; display: inline-block;'>
    Create your account today and get started.
  </p>
</div>

Tekst zastępczy w polu formularza — nieprawidłowy

<!-- Fails 1.4.6: default browser placeholder styling is typically around
     #aaaaaa on white, yielding approximately 2.32:1. If placeholder text
     conveys meaningful information (e.g. format hints), it must meet contrast requirements. -->
<input type='text' placeholder='DD/MM/YYYY' style='background: #ffffff;'>

Tekst zastępczy w polu formularza — prawidłowy

<!-- Passes 1.4.6: Override the default placeholder color to achieve 7:1 contrast.
     Also adds a visible label as best practice, since placeholders disappear on input. -->
<label for='dob'>Date of Birth</label>
<input type='text' id='dob' placeholder='DD/MM/YYYY'
  style='background: #ffffff; color: #000000;'>
<style>
  input::placeholder {
    color: #595959; /* approximately 7.0:1 on white — meets AAA */
  }
</style>

Typowe Błędy

• Poleganie wyłącznie na kombinacjach kolorów spełniających AA bez sprawdzania progów AAA: Wielu projektantów używa popularnego średnioszarego #767676 na białym tle, który spełnia 1.4.3 przy około 4,54:1, ale znacząco nie spełnia 1.4.6. Zawsze weryfikuj względem celu 7:1, a nie tylko 4,5:1.
• Zbyt szerokie zakładanie zastosowania wyjątków dla dużego tekstu: Wyjątek dla dużego tekstu (4,5:1 zamiast 7:1) dotyczy tylko tekstu o rozmiarze co najmniej 18pt (24px) przy normalnej grubości lub co najmniej 14pt (18,67px) przy pogrubieniu. Tekst o rozmiarze 20px przy normalnej grubości nie kwalifikuje się i nadal musi spełniać 7:1.
• Ignorowanie kontrastu w stanach interaktywnych: Zastosowanie jaśniejszego koloru przy najechaniu kursorem w celu stworzenia wizualnej wskazówki bez sprawdzenia, czy stan hover nadal spełnia 7:1. Na przykład przyciemnienie tła przycisku przy zachowaniu białego tekstu może nadal przechodzić, ale rozjaśnianie tekstu przy hover często powoduje błędy.
• Pomijanie łańcuchów niestandardowych właściwości CSS: Zdefiniowanie koloru tekstu jako var(--color-primary), gdzie --color-primary jest ustawiony globalnie, ale nadpisany lokalnie w zakresie komponentu bez ponownej weryfikacji kontrastu. Efektywny renderowany kolor może różnić się od globalnej wartości tokena i powodować nieprawidłowy współczynnik w konkretnych kontekstach komponentu.
• Traktowanie wyjątku dla stanu wyłączonego jako przyzwolenia projektowego: Używanie wyjątku dla nieaktywnego UI jako uzasadnienia dla stylowania wyłączonych elementów z kontrastem 1:1 (niewidoczny tekst), przez co użytkownicy nie są w stanie w ogóle zauważyć istnienia pola. Elementy wyłączone nadal powinny być wizualnie postrzegalne, nawet jeśli są zwolnione z wymogu 7:1.
• Brak testowania tekstu renderowanego na obrazach lub wideo: Umieszczanie tekstu bezpośrednio na obrazie hero lub tle wideo i sprawdzanie kontrastu tylko względem średniego koloru, zamiast najjaśniejszej części obrazu, przez którą przebiega tekst. Minimalny kontrast musi być zachowany dla każdego piksela pod tekstem, a nie średnio.
• Stosowanie poprawek kontrastu tylko w punktach przerwania dla desktopu: Projekty responsywne, które używają różnych kolorów tła w punktach przerwania dla urządzeń mobilnych — na przykład przełączanie z białego tła na desktopie na jasnobeżowe tło karty na urządzeniach mobilnych — mogą wprowadzać nowe błędy kontrastu na mniejszych ekranach, które nie występowały podczas testów na desktopie.
• Zapominanie o kontraście tekstu wskaźnika fokusu: Gdy niestandardowy pierścień fokusu lub stan fokusu zmienia zarówno tło, jak i kolor tekstu elementu w fokusie, nowa kombinacja tekst–tło w stanie fokus musi niezależnie spełniać współczynnik 7:1, niezależnie od tego, co osiąga stan domyślny.
• Zakładanie, że wyjątek dla logo rozciąga się na przyległy tekst opisowy: Umieszczanie sloganu lub opisu produktu w tym samym bloku typograficznym co logo marki i powoływanie się na wyjątek dla logo dla całego bloku. Wyjątek dotyczy ściśle tekstu stanowiącego integralną część samego logo, a nie jakiejkolwiek pobliskiej treści.
• Brak weryfikacji kontrastu po nadpisaniu przez framework CSS: Importowanie zewnętrznej biblioteki komponentów lub frameworka CSS, który resetuje lub nadpisuje kolory tekstu wartościami poniżej 7:1, a następnie publikowanie tych domyślnych ustawień bez audytu. Domyślne ustawienia frameworków prawie nigdy nie są kalibrowane do standardów kontrastu AAA.

Związek z Tureckimi Regulacjami Dotyczącymi Dostępności

Prezydenckie Okrężne Turcji 2025/10, opublikowane w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe wymagania dotyczące dostępności cyfrowej dla szerokiego zakresu instytucji i organizacji działających w Turcji. Okrężne nakazuje zgodność z WCAG 2.2 na poziomie AA jako standard bazowy. Typy podmiotów objętych regulacją obejmują instytucje i agencje publiczne, platformy e-commerce, banki i dostawców usług finansowych, szpitale i organizacje opieki zdrowotnej, firmy telekomunikacyjne z 200 000 lub większą liczbą abonentów, biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE).

WCAG 1.4.6 Kontrast (zwiększony) jest kryterium poziomu AAA, a zatem nie stanowi obowiązkowego wymogu na mocy Prezydenckiego Okrężnego. Organizacje, które osiągają jedynie zgodność na poziomie AA — prawnie wymagany poziom bazowy — nie będą naruszać okrężnego z powodu pominięcia wymogu zwiększonego kontrastu 7:1, pod warunkiem że spełniają próg AA 4,5:1 dla tekstu normalnego zdefiniowany w kryterium 1.4.3.

Jednak osiągnięcie zgodności AAA w zakresie kontrastu stanowi istotne zobowiązanie do projektowania inkluzywnego, wykraczające daleko poza minimalną zgodność prawną. Dla instytucji publicznych, które mają najszerszy obowiązek obsługi wszystkich obywateli niezależnie od niepełnosprawności, dobrowolne przyjęcie standardu zwiększonego kontrastu sygnalizuje autentyczne zaangażowanie w dostęp uniwersalny. Organizacje opieki zdrowotnej i szpitale — sektory, w których pacjenci mogą już znajdować się pod stresem fizycznym lub poznawczym albo wchodzić w interakcje z systemami cyfrowymi w trudnych warunkach, takich jak jasne oświetlenie kliniczne — mają szczególnie silne praktyczne uzasadnienie, by przekraczać minimalny próg kontrastu. Podobnie banki i dostawcy usług finansowych, których klienci coraz częściej obejmują osoby starsze, są w dobrej pozycji, aby skorzystać z wiarygodności i zaufania użytkowników, jakie komunikuje zgodność z kontrastem na poziomie AAA.

Organizacje dążące do certyfikacji ISO 30071-1, dostosowania do europejskiej normy EN 301 549 lub jakiegokolwiek międzynarodowego procesu zamówień publicznych, który ocenia dojrzałość w zakresie dostępności, stwierdzą, że zgodność z kontrastem na poziomie AAA wzmacnia ich pozycję. W miarę dojrzewania egzekwowania dostępności cyfrowej na świecie i w samej Turcji, kryteria obecnie na poziomie AAA historycznie migrowały w kierunku statusu obowiązkowego w kolejnych aktualizacjach regulacyjnych. Przyjęcie zwiększonego kontrastu już teraz stawia organizacje przed prawdopodobnymi przyszłymi wymaganiami i zmniejsza koszt ewentualnej późniejszej naprawy.

Dla organizacji korzystających z Accsible overlay SDK, narzędzia platformy do regulacji kontrastu mogą pomagać użytkownikom w stosowaniu trybów wysokiego kontrastu na poziomie widżetu, zapewniając warstwę kompensacyjną, która pomaga zniwelować lukę między poziomami kontrastu opublikowanego projektu a potrzebami indywidualnego użytkownika. Nie zastępuje to spełnienia kryterium na poziomie kodu źródłowego, ale zapewnia istotne wsparcie w czasie rzeczywistym dla użytkowników, którzy wymagają zwiększonego kontrastu i odwiedzają witryny, które nie osiągnęły jeszcze pełnej zgodności z poziomem AAA.