Wybrane narzędzia
Kontrast WCAG
Kontrast to podstawa czytelności i typowych audytów dostępności.
Wypróbuj
Kontrast WCAG
Podaj dwa kolory w sRGB (hex). Używamy tego samego wzoru jasności względnej co WCAG 2.x (tekst zwykły: 4.5:1 AA, duży: 3:1; AAA: 7:1 / 4.5:1).
Współczynnik kontrastu
10.94:1
- AA — tekst zwykły (4.5:1) OK
- AA — duży tekst (3:1) OK
- AAA — tekst zwykły (7:1) OK
- AAA — duży tekst (4.5:1) OK
Przykładowy nagłówek
Podgląd tekstu przy tej parze kolorów. Dostosuj kolory powyżej.
Jasność względna
WCAG 2.x wylicza kontrast z jasności względnej kolorów sRGB. Interaktywne narzędzie na tej stronie stosuje ten sam model i progi AA/AAA.
Mierzony jest kontrast tekstu względem bezpośredniego tła. Przy gradientach, zdjęciach lub szkle warto sprawdzić najgorszy przypadek albo komponent na realnym screenshocie.
AA a AAA
AA bywa wymagane dla tekstu (4.5:1 zwykły, 3:1 duży). AAA jest ostrzejsze (7:1 / 4.5:1). Sprawdzaj paletę przed publikacją komponentów.
Co to „duży tekst”?
WCAG definiuje duży tekst jako min. 18pt zwykły lub 14pt pogrubiony (w przybliżeniu 24px / 18,6px CSS przy domyślnych ustawieniach). W razie wątpliwości stosuj surowsze progi dla tekstu zwykłego.
Kontrast poza tekstem
WCAG 2.1 ma też wymagania dla elementów interfejsu i grafiki (obramowania, ikony). To narzędzie dotyczy tekstu; do ikon i focus ringów użyj dodatkowych testów lub design systemu.
Tryb ciemny i motywy
Testuj jasny i ciemny motyw. Para spełniająca normę na jasnym tle może zawieść po przełączeniu użytkownika. Rozważ tokeny kolorów per motyw.
Interpretacja wyników
Wybierz kolory hex zgodne z CSS produkcyjnym (narzędzie jest u góry strony). Porównaj współczynnik z wierszami AA/AAA. Zmiana jednego koloru może rozjeżdżać spójność palety — sprawdzaj kontekst.