Tester kontrastu WCAG
Sprawdź dostępność kolorów tekstu i tła.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Kolory czytelne dla wszystkich, sprawdzone w dwa kliknięcia
Niemal co dwunasta osoba słabo postrzega niektóre kontrasty. WCAG (Web Content Accessibility Guidelines) ustalają minimalne stosunki między tekstem a tłem; ten tester oblicza je na żywo, oficjalnym wzorem na luminancję względną, i pokazuje rzeczywisty podgląd Twojego zestawienia.
-
Wybierz dwa kolory
W selektorze lub wklejając kod szesnastkowy (#rrggbb lub #rgb).
-
Odczytaj współczynnik
Od 1:1 do 21:1, z czterema werdyktami AA/AAA dla tekstu normalnego i dużego.
-
Dostosuj w razie potrzeby
Zmieniaj jasność jednego z kolorów aż do zaliczenia, kierując się podglądem.
Progi WCAG w jednej tabeli
| Poziom | Tekst normalny | Duży tekst |
|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 |
| AAA (wzmocniony) | 7 : 1 | 4,5 : 1 |
| Komponenty interfejsu (2.1) | 3 : 1 | 3 : 1 |
Kontrast trzeba sprawdzać dla każdej pary tekst/tło w interfejsie — pamiętaj o stanach: linki po najechaniu, wyłączone przyciski, placeholdery i tryb ciemny.
Najczęstsze pytania
Czym jest współczynnik kontrastu?
To stosunek luminancji jaśniejszego koloru do ciemniejszego — od 1:1 (identyczne) do 21:1 (czerń na bieli). WCAG używa go, by zagwarantować czytelność tekstu wszystkim, także osobom słabowidzącym.
Jakie progi trzeba osiągnąć?
Poziom AA: 4,5:1 dla tekstu normalnego, 3:1 dla dużego. Poziom AAA, bardziej wymagający: odpowiednio 7:1 i 4,5:1. AA to prawne minimum dla usług publicznych w wielu krajach.
Co liczy się jako „duży tekst”?
Według WCAG: co najmniej 18 pt (24 px) normalną grubością lub 14 pt (18,5 px) pogrubieniem. Duże nagłówki tolerują więc niższy kontrast niż tekst podstawowy.
Czy kontrast dotyczy też elementów nietekstowych?
Tak: od WCAG 2.1 komponenty interfejsu (obramowania pól, ikony informacyjne, stany fokusu) muszą osiągać 3:1 względem sąsiednich kolorów (kryterium 1.4.11).
Mój współczynnik jest za niski: jak to naprawić?
Przyciemnij tekst lub rozjaśnij tło (lub odwrotnie w ciemnym motywie). Często wystarczy kilka kroków jasności — zachowaj ten sam odcień i moduluj jasność, by zachować paletę.