WCAG a rozmiar czcionki: czego wymagają wytyczne, a czego nie

Wiele osób szuka „minimalnego rozmiaru czcionki WCAG”, bo wydaje się, że taki powinien istnieć. WCAG 2.0, 2.1 i 2.2 nie określają minimalnego rozmiaru czcionki. Żadne kryterium sukcesu nie mówi „tekst główny musi mieć co najmniej 16 pikseli”. WCAG wymaga natomiast, aby użytkownik mógł powiększyć tekst, aby układ strony to wytrzymał i aby mały tekst miał wystarczający kontrast. Ta strona porządkuje cztery kryteria, które mają tu znaczenie, a osobno – wyraźnie oddzielone – nasze dodatkowe rekomendacje.

To ogólne informacje, a nie porada prawna.

Krótka odpowiedź

1.4.4 Zmiana rozmiaru tekstu: 200% bez strat

Tekst – z wyjątkiem napisów i obrazów tekstu – można powiększyć do 200% bez technologii wspomagających i bez utraty treści lub funkcjonalności. W praktyce warto sprawdzić to powiększeniem przeglądarki (Ctrl/Cmd i +) lub ustawieniem rozmiaru tekstu w przeglądarce:

• żaden tekst nie jest ucięty ani nie nachodzi na inny tekst;
• przyciski, menu i pola formularzy nadal działają;
• nic ważnego nie znika za przyklejonym nagłówkiem.

Typowe błędy: tekst w polach o stałej wysokości, font-size ustawiony wyłącznie w jednostkach vw oraz maximum-scale=1 lub user-scalable=no w znaczniku meta viewport, które uniemożliwiają powiększanie na telefonie.

1.4.10 Dopasowanie do ekranu: 320 pikseli CSS

Treść musi być czytelna przy szerokości 320 pikseli CSS – tyle samo, co przy powiększeniu okna o szerokości 1280 pikseli do 400% – bez przewijania w dwóch kierunkach. Długi tekst powinien się zawijać; przeczytanie wiersza nie powinno wymagać przewijania w poziomie. Wyjątki dotyczą treści, które wymagają układu dwuwymiarowego, takich jak mapy, tabele danych i złożone diagramy.

1.4.12 Odstępy w tekście

Osoby słabowidzące lub z dysleksją często zmieniają odstępy za pomocą rozszerzenia przeglądarki lub własnego arkusza stylów. WCAG wymaga, aby nic nie ginęło, gdy ustawią:

• wysokość wiersza na co najmniej 1,5-krotność rozmiaru czcionki;
• odstęp po akapitach na co najmniej 2-krotność rozmiaru czcionki;
• odstęp między literami na co najmniej 0,12 rozmiaru czcionki;
• odstęp między wyrazami na co najmniej 0,16 rozmiaru czcionki.

Nie trzeba stosować tych wartości w projekcie. Projekt musi tylko nadal działać, gdy ktoś je zastosuje. Typowe błędy to stała wysokość przycisków i kart oraz tekst ucinany przez overflow: hidden.

1.4.3 i definicja dużego tekstu

Jedyne miejsce, w którym rozmiar czcionki pojawia się w kryterium poziomu AA, to definicja tekstu dużego rozmiaru, z której korzysta wymóg kontrastu:

• Duży tekst: co najmniej 18 punktów (24 piksele CSS) przy zwykłej grubości lub co najmniej 14 punktów pogrubionych (około 18,66 piksela CSS).
• Duży tekst potrzebuje kontrastu co najmniej 3:1; każdy inny tekst – 4,5:1.
• Na poziomie AAA (1.4.6) wartości wynoszą 7:1 i 4,5:1.

Rozmiar zmienia więc wymagany kontrast, a nie to, czy tekst jest dozwolony. Cienka szara cena 13 px to klasyczny błąd sklepów: mała, jasna i o niskim kontraście jednocześnie. Pary kolorów można sprawdzić w naszym narzędziu do sprawdzania kontrastu.

Powiązane kryteria

• 1.4.5 Obrazy tekstu (AA): zamiast tekstu wtopionego w obraz należy używać prawdziwego tekstu, który można powiększyć, przekolorować i odczytać na głos. Banery z tekstem promocji w obrazie to częsty błąd.
• 1.4.8 Prezentacja wizualna (AAA): wymaga m.in. bloków tekstu nie szerszych niż 80 znaków i tekstu, który można powiększyć do 200% bez przewijania w poziomie. To poziom AAA, którego przepisy nie wymagają, ale przydaje się jako wskazówka dla długich tekstów.
• 2.5.8 Rozmiar celu (AA): nie dotyczy tekstu, ale małe linki tekstowe w menu często nie spełniają też wymogu celu 24 × 24 piksele.

Tekst wyjustowany, wyśrodkowany i pogrubiony, czcionki i długość wiersza

Te pytania pojawiają się często. Większość odpowiedzi mieści się w jednym kryterium poziomu AAA, 1.4.8 Prezentacja wizualna. AAA nie jest wymagane ani przez przepisy, ani przez deklarację poziomu AA, więc wszystko od 1.4.8 w dół należy traktować jako rekomendację.

Tekst wyjustowany

1.4.8 wymaga, aby dostępny był mechanizm, dzięki któremu bloki tekstu nie są wyjustowane (wyrównane jednocześnie do lewego i prawego marginesu). W3C wyjaśnia dlaczego: justowanie nierówno rozciąga odstępy między wyrazami i może tworzyć „rzeki bieli” przebiegające przez stronę, co utrudnia, a czasem uniemożliwia czytanie niektórym osobom z niepełnosprawnościami poznawczymi. Na poziomie AA tekst wyjustowany nie jest błędem. Nasza rekomendacja: wyrównywać tekst główny do lewej (w językach pisanych od prawej do lewej – do prawej), zwłaszcza na wąskich ekranach, gdzie justowanie daje największe przerwy.

Długość wiersza

1.4.8 wymaga też, aby szerokość bloków tekstu dało się ograniczyć do nie więcej niż 80 znaków lub glifów (40 dla chińskiego, japońskiego i koreańskiego). To samo kryterium wymaga odstępu między wierszami co najmniej półtorakrotnego w akapitach, odstępu między akapitami co najmniej 1,5 razy większego niż odstęp między wierszami, kolorów pierwszego planu i tła wybieranych przez użytkownika oraz tekstu, który można powiększyć do 200% bez przewijania w poziomie w oknie pełnoekranowym. Mechanizm może zapewniać przeglądarka; strona nie musi budować własnych kontrolek.

Tekst wyśrodkowany

Żadne kryterium WCAG nie wspomina o tekście wyśrodkowanym. Nasza rekomendacja: krótkie nagłówki i przyciski można wyśrodkować, ale akapity, listy i etykiety formularzy warto zostawić wyrównane do lewej. Długi tekst wyśrodkowany ma poszarpaną lewą krawędź, więc czytelnicy muszą szukać początku każdego wiersza, co jest trudniejsze przy powiększeniu 200% i dla osób z dysleksją.

Tekst pogrubiony

Pogrubienie pojawia się w WCAG w dwóch miejscach:

• Duży tekst: 14 punktów pogrubionych (około 18,66 piksela CSS) już jest dużym tekstem i na poziomie AA wymaga kontrastu tylko 3:1 zamiast 4,5:1 (1.4.3).
• Znaczenie: jeśli pogrubienie lub inny styl tekstu niesie znaczenie – „pola pogrubione są wymagane”, pogrubione słowo oznaczające ostrzeżenie – to znaczenie musi być dostępne także w znacznikach lub w tekście. W3C wymienia używanie zmian prezentacji tekstu do przekazywania informacji bez odpowiednich znaczników lub tekstu jako niezgodność F2 kryterium 1.3.1 Informacje i relacje. Do wyróżnień służą <strong> lub <em>, a słowo „wymagane” należy napisać słowami.

WCAG nie ogranicza, ile pogrubienia można użyć. Długie fragmenty pogrubione trudniej przeglądać; warto zostawić pogrubienie na wyróżnienia.

„Zwykły” rozmiar tekstu

WCAG nie definiuje „zwykłego tekstu”. Definiuje tekst dużego rozmiaru, a wszystko mniejsze to to, co kontrolki nazywają tekstem zwykłym: cokolwiek poniżej 18 punktów (24 piksele CSS) przy zwykłej grubości lub poniżej 14 punktów pogrubionych. Zwykły tekst wymaga kontrastu co najmniej 4,5:1 na poziomie AA, duży 3:1. Nadal nie ma minimalnego rozmiaru zwykłego tekstu; zob. tabelę na początku.

Czcionki i sprawdzanie czcionek

WCAG nie wymienia ani nie zakazuje żadnej czcionki i nie stawia wymagań dotyczących kroju. Liczy się to, by Państwa czcionka działała z powyższymi kryteriami: dała się powiększyć do 200%, nadal działała po zwiększeniu odstępów (1.4.12) i miała wystarczający kontrast przy swojej grubości – cienkie czcionki mogą wyglądać słabiej, niż wynika z koloru, co W3C zauważa w Understanding 1.4.3. Nasza rekomendacja: wybrać krój o wyraźnie odróżnialnych znakach (I, l i 1; O i 0), zwykłej grubości, która nie jest włosowato cienka, oraz z pełną obsługą języków serwisu.

„Narzędzie do sprawdzania czcionek WCAG” nie może zatwierdzić czcionki, bo nie ma listy dozwolonych czcionek. Kontrola automatyczna może natomiast – i robi to nasz WCAG checker – sprawdzić kontrast każdego tekstu względem reguły dużego tekstu i zgłosić viewport blokujący powiększanie. Długość wiersza, justowanie i zachowanie tekstu przy 200% wymagają spojrzenia człowieka.

Rekomendacje, a nie wymagania

Poniższe wartości to nasze rekomendacje dla czytelnych stron sklepów i usług. Nie są wymaganiami WCAG, a strona nie przestaje spełniać WCAG, gdy używa innych wartości.

• Tekst główny około 16 px. To domyślny rozmiar tekstu w popularnych przeglądarkach. Znacznie mniejszy tekst główny sprawia, że powiększenie 200% ma więcej do nadrobienia.
• Jednostki względne (rem, em) dla rozmiarów czcionek i wysokości wierszy, aby szanować rozmiar tekstu ustawiony przez użytkownika w przeglądarce.
• Wysokość wiersza 1,4–1,6 dla tekstu głównego i długość wiersza około 50–80 znaków.
• Bez stałych wysokości elementów zawierających tekst; niech rosną razem z nim.
• Bez blokowania powiększenia w znaczniku meta viewport.
• Ostrożnie z drobnym drukiem. Informacje prawne, ceny jednostkowe i podpowiedzi w formularzach czytają wszyscy, więc powinny mieć taki sam kontrast jak tekst główny.

Jak sprawdzić rozmiar czcionki i problemy z powiększeniem

1. Automatyczna kontrola. Nasz bezpłatny WCAG checker znajduje niski kontrast, z uwzględnieniem reguły dużego tekstu, oraz viewport blokujący powiększanie. Nie oceni, czy powiększony układ nadal działa.
2. Powiększenie do 200%. Za pomocą powiększenia przeglądarki warto przejść stronę główną, kartę produktu, koszyk i zamówienie.
3. Wąskie okno lub powiększenie 400%. Tekst powinien się zawijać i nic nie powinno wymagać przewijania w poziomie.
4. Odstępy w tekście. Wartości z 1.4.12 można zastosować bookmarkletem lub narzędziem do odstępów w naszym rozszerzeniu do przeglądarki i poszukać uciętego tekstu.

Pełną procedurę opisuje poradnik jak testować WCAG. Nasze testy to automatyczna kontrola, a nie pełny audyt, i nie stanowią porady prawnej.

Najczęstsze pytania

Jaki jest minimalny rozmiar czcionki według WCAG?

Nie ma takiego. Żadne kryterium sukcesu WCAG 2.0, 2.1 ani 2.2 nie określa minimalnego rozmiaru czcionki. WCAG wymaga natomiast, aby tekst dało się powiększyć do 200% (1.4.4), aby dopasowywał się do wąskiego ekranu (1.4.10), wytrzymywał większe odstępy (1.4.12) i miał wystarczający kontrast (1.4.3).

Jaki rozmiar czcionki WCAG uznaje za duży tekst?

Co najmniej 18 punktów, czyli 24 piksele CSS, przy zwykłej grubości lub co najmniej 14 punktów pogrubionych, czyli około 18,66 piksela CSS. Duży tekst potrzebuje na poziomie AA kontrastu 3:1 zamiast 4,5:1.

Czy WCAG wymaga czcionki 16 px?

Nie. 16 pikseli to domyślny rozmiar tekstu w popularnych przeglądarkach i rozsądna rekomendacja dla tekstu głównego, ale WCAG tego nie wymaga. Tekst 16 px, którego nie da się powiększyć, nie spełnia wymagań; mniejszy tekst, który dobrze się powiększa, może je spełniać.

Jakiego powiększenia wymaga WCAG?

Tekst musi dać się powiększyć do 200% bez utraty treści lub funkcjonalności (1.4.4). Treść musi też dopasować się do szerokości 320 pikseli CSS, co odpowiada powiększeniu 400% w oknie o szerokości 1280 pikseli, bez przewijania w dwóch kierunkach (1.4.10).

Czy używać px, em czy rem dla rozmiaru czcionki?

WCAG nie narzuca jednostek. Jednostki względne, takie jak rem i em, ułatwiają uszanowanie rozmiaru tekstu ustawionego przez użytkownika w przeglądarce, dlatego je polecamy, ale samo użycie px nie jest błędem.

Czy WCAG dopuszcza tekst wyjustowany?

Na poziomie AA tak. Dopiero kryterium AAA 1.4.8 Prezentacja wizualna wymaga mechanizmu, dzięki któremu bloki tekstu nie są wyjustowane, bo nierówne odstępy między wyrazami tworzą „rzeki” białej przestrzeni. AAA jest zaleceniem, a nie wymogiem prawnym.

Źródła

• W3C, WCAG 2.2 (1.4.3, 1.4.4, 1.4.10, 1.4.12 i definicja tekstu dużego rozmiaru): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
• W3C, Understanding 1.4.8 Visual Presentation: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
• W3C, Understanding 1.3.1 Info and Relationships: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html