Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu
Poznaj minimalne współczynniki dla tekstu podstawowego i dużego
Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Osiągnij poziom AA
Większość zespołów przyjmuje poziom Level AA WCAG dla kontrastu. Jest wystarczająco rygorystyczny, aby pomagać rzeczywistym użytkownikom, i wystarczająco realistyczny, aby dało się go wdrożyć.
Zwykły tekst: 4,5 do 1
W przypadku tekstu podstawowego poziom AA wymaga co najmniej 4.5:1. Dotyczy to akapitów, etykiet i większości słów na stronie.
Co uznaje się za duży tekst
Duży tekst oznacza 24 px przy zwykłej grubości lub 18,66 px przy pogrubieniu. Litery w tym rozmiarze są łatwiejsze do odczytania, więc zasady są łagodniejsze.
Duży tekst: 3 do 1
Duży tekst potrzebuje zaledwie 3:1. Większe kształty mają większą wagę wizualną, więc mniejsza różnica jasności nadal zapewnia czytelność.
Pogrubienie obniża próg rozmiaru
Grubość ma znaczenie: tekst pogrubiony kwalifikuje się jako duży już przy 18,66 px, ponieważ grubsze kreski łatwiej wychwycić wzrokiem.
Punkty a piksele
WCAG definiuje duży tekst jako 18 pt lub 14 pt pogrubionego tekstu, co w CSS odpowiada wartościom 24px i 18.66px. Narzędzia zwykle wykonują to przeliczenie za Ciebie.
Komponenty interfejsu: 3 do 1
Przyciski, pola wejściowe i wskaźniki fokusu muszą osiągać 3:1 względem otoczenia zgodnie z kryterium 1.4.11, aby elementy sterujące pozostały widoczne.
AAA idzie dalej
Potrzebujesz mocniejszych gwarancji? AAA podnosi wymagania dla zwykłego tekstu do 7:1, a dla dużego tekstu do 4.5:1, jednak większość produktów przyjmuje AA jako podstawę.
Elementy wyłączone i logo są zwolnione
Kilka elementów nie podlega tej zasadzie: elementy sterujące wyłączone, czysta dekoracja oraz logotypy marki nie mają minimalnego wymogu kontrastu.
Tekst placeholder również się liczy
Ten bladoszary placeholder jest prawdziwym tekstem, więc również musi spełniać wartość 4.5:1. Większość wartości domyślnych nie spełnia tego wymogu, dlatego należy je celowo przyciemnić.
Ustawianie dużego tekstu w CSS
Ten nagłówek osiąga rozmiar large-text, więc aby spełnić AA, wystarczy współczynnik 3:1.
h2 {
font-size: 24px;
font-weight: 400;
}Szybki test
Ustal wartości AA dla różnych rodzajów tekstu.
Podsumowanie: osiąganie AA
Zapamiętaj te wartości: 4.5:1 dla zwykłego tekstu oraz 3:1 dla dużego tekstu lub elementów interfejsu. Spełnij je, a Twój kontrast będzie zgodny z AA. Dalej: nie polegaj wyłącznie na kolorze. 🎯
Często zadawane pytania
Czy lekcja „Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu” jest bezpłatna?
Tak — pełny tekst „Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu”?
Poznaj minimalne współczynniki dla tekstu podstawowego i dużego Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dlaczego istnieją współczynniki kontrastu
- Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu
- Nigdy nie polegaj wyłącznie na kolorze
- Sprawdzanie kontrastu za pomocą bezpłatnych narzędzi