- Poziom
- AA
- Od wersji
- WCAG 2.0
- Pozycje
- 99 / 193
1.4.3 Kontrast (minimum)
Tekst musi odcinać się od tła: co najmniej 4,5:1, a w przypadku dużego tekstu 3:1.
/ Czego wymaga
Tekst musi dać się przeczytać na tle, na którym stoi. Miarą jest współczynnik kontrastu między kolorem tekstu a kolorem tła: od 1:1 dla identycznych kolorów do 21:1 dla czerni na bieli. Jasnoszary tekst na białym tle, biały na jasnym kolorze firmowym i napis na zdjęciu są trudne do odczytania dla osób słabowidzących lub o obniżonej wrażliwości na kontrast, a także dla każdego, kto trzyma telefon w pełnym słońcu.
Zwykły tekst wymaga co najmniej 4,5:1. Duży tekst, czyli co najmniej 18 punktów albo 14 punktów z pogrubieniem (około 24 i 18,66 piksela CSS), wymaga co najmniej 3:1. Obrazy tekstu podlegają tym samym progom, a wartości się nie zaokrągla: 4,499:1 nie przechodzi. Kryterium wyłącza tekst w nieaktywnych kontrolkach, czystą dekorację, tekst dla nikogo niewidoczny, tekst będący przypadkowym fragmentem zdjęcia oraz logo i nazwy marek.
/ Jak strony go nie spełniają
- Tekst główny lub podpisy są jasnoszare na białym tle, a takie połączenie często wypada poniżej 4,5:1.
- Tekst podpowiedzi placeholder w polach formularza jest bledszy niż tekst wpisywany i spada poniżej progu.
- Biały tekst stoi na jasnym kolorze firmowym w przyciskach, plakietkach i banerach.
- Tekst leży na zdjęciu lub gradiencie bez jednolitej warstwy pod spodem, więc jego fragmenty znikają.
- Półprzezroczysty panel albo obniżona właściwość opacity tekstu zmniejsza współczynnik, na który wskazywałyby kolory z arkusza stylów.
/ Jak sprawdzić samodzielnie
- W Chrome lub Edge zbadaj element z tekstem i kliknij próbkę koloru obok właściwości color w panelu Styles. Próbnik pokaże współczynnik kontrastu i to, czy spełnia poziom AA.
- Do tekstu na obrazach użyj darmowego narzędzia z pipetą, na przykład Colour Contrast Analyser, i pobierz najjaśniejszy oraz najciemniejszy punkt za literami.
- Sprawdź też stany: linki, kolory po najechaniu i przy fokusie, podpowiedzi w polach, komunikaty o błędach i tekst na przyciskach.
- Zanim zastosujesz próg 3:1, potwierdź rozmiar. Tekst poniżej 24 pikseli, a pogrubiony poniżej 18,66 piksela, liczy się jako zwykły.
/ Jak to naprawić
- Przyciemnij wartość color albo zmień background-color, aż para osiągnie 4,5:1. Na białym tle #767676 to mniej więcej najjaśniejszy szary, który przechodzi dla zwykłego tekstu.
- Nadaj podpowiedziom styl wprost selektorem ::placeholder i kolorem, który osiąga 4,5:1 względem pola.
- Pod tekstem leżącym na obrazie umieść jednolity lub półprzezroczysty background-color albo przyciemnij sam obraz nakładką.
- Nie wyciszaj tekstu właściwością opacity. Wybierz kolor, który przechodzi sam, bo opacity miesza tekst z tym, co jest pod spodem.
- Zapisz sprawdzone pary kolorów jako zmienne CSS, żeby każdy komponent korzystał z tej samej palety.
/ Co sprawdza nasz skaner
Skan na wyrenderowanej stronie bierze każdy widoczny element z tekstem, składa wszystkie półprzezroczyste warstwy tła i przezroczystość przodków w kolor, który faktycznie jest pod tekstem, i porównuje go z kolorem tekstu. Tekst wpisywany w pola i podpowiedzi są mierzone osobno, a HTML_CodeSniffer dodaje własne obliczenie na podstawie CSS. Tekst na obrazie lub gradiencie trafia do oceny człowieka, a kolory po najechaniu i przy fokusie nie są mierzone.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Jakiego kontrastu wymaga WCAG na poziomie AA?
Co najmniej 4,5:1 między zwykłym tekstem a tłem i co najmniej 3:1 dla dużego tekstu. Te same progi dotyczą tekstu w obrazach. Współczynników się nie zaokrągla, więc 4,499:1 nie przechodzi. Poziom AAA podnosi poprzeczkę dla zwykłego tekstu do 7:1 w kryterium 1.4.6, a części kontrolek i grafik, które nie są tekstem, obejmuje osobno kryterium 1.4.11.
Co WCAG uznaje za duży tekst?
Tekst o rozmiarze co najmniej 18 punktów albo co najmniej 14 punktów, jeśli jest pogrubiony. Przy zwykłym przeliczeniu to około 24 piksele CSS albo 18,66 piksela CSS dla pogrubienia. Tekst tej wielkości wymaga kontrastu 3:1 zamiast 4,5:1. Wszystko, co mniejsze, to zwykły tekst, nawet jeśli jest zapisane wersalikami albo ciężkim krojem pisma.
Czy logo i nieaktywne przyciski muszą spełniać wymóg kontrastu?
Nie. Kryterium nie stawia wymogu kontrastu tekstowi będącemu częścią logo lub nazwy marki, tekstowi w nieaktywnym komponencie interfejsu, czystej dekoracji ani tekstowi, który jest przypadkowym fragmentem zdjęcia z inną istotną treścią. Wszystko inne, co odwiedzający ma przeczytać, musi go spełniać, w tym tekst podpowiedzi w polach i tekst na aktywnych przyciskach.