Narzędzie do sprawdzania kontrastu kolorów
Sprawdź kontrast WCAG 2.1 i APCA dwóch kolorów — albo upuść zrzut ekranu i zobacz dokładnie, gdzie cienkie kreski utrudniają czytanie tekstu. Wszystko lokalnie, bez przesyłania.
How to capture solid material
Browser zoom does not increase resolution, and snipping tools on HiDPI displays often capture logical instead of physical pixels. Use Chrome DevTools → Elements panel → right-click the element → "Capture node screenshot", or Firefox's right-click screenshot — both capture at device resolution.
| # | Occurrences | Stroke width | WCAG nominal → effective | APCA nominal → effective |
|---|
Note — the analysis runs entirely locally in your browser; the screenshot never leaves your device. Clicking a table row steps the loupe through that group's occurrences.
Dlaczego zaliczony współczynnik może być nadal trudny do odczytania
Każde narzędzie do sprawdzania kontrastu przyjmuje dwie wartości kolorów i zwraca współczynnik. Ta liczba jest uczciwa wobec kolorów — i ślepa na całą resztę. Para 4,5:1, która zalicza WCAG AA, może być naprawdę trudna do odczytania, gdy krój pisma jest cienki i mały: do oka nie dociera nominalny kolor tekstu, lecz faktycznie narysowana na ekranie mieszanka antyaliasingu między tekstem a tłem. Im cieńsza kreska, tym większa część każdej litery składa się z tych wypłukanych pikseli krawędzi — a efektywny kontrast spada poniżej tego, co obiecywały dwie wartości szesnastkowe. Tę lukę zamyka to narzędzie: obok klasycznego sprawdzania dwóch kolorów analizuje zrzut ekranu prawdziwego interfejsu i mierzy, gdzie kreski są najcieńsze i jaki efektywny kontrast panuje dokładnie w tych miejscach.
Narzędzie zawsze pokazuje oba odniesienia: współczynnik WCAG 2.1, obecny standard zgodności (4,5:1 dla normalnego tekstu, 3:1 dla dużego), oraz Lc z APCA — percepcyjnego modelu kandydującego do WCAG 3, który uwzględnia polaryzację jasne/ciemne. W praktyce Lc 90 jest idealne dla tekstu ciągłego, Lc 75 to cel dla normalnego tekstu, Lc 60 wystarcza dla dużego lub pogrubionego tekstu, a poniżej Lc 45 nie powinno być żadnego tekstu. Gdy obie wartości się przeczą, kieruj się tą bardziej pesymistyczną.
Niski efektywny kontrast to nie przypadek brzegowy: wrażliwość na kontrast maleje z wiekiem i gwałtownie spada przy zaćmie, zwyrodnieniu plamki żółtej czy astygmatyzmie; ostre słońce i słabo podświetlone ekrany pogarszają sprawę, podobnie jak tekst pisany wersalikami. Poprawki wynikają wprost z pomiarów: kreski poniżej 2 px → zwiększ grubość fontu (400 → 500/600); zbyt niski kontrast → przyciemnij kolor tekstu; za mały tekst → najpierw go powiększ. Dla wiarygodnych wartości użyj zrzutu w rozdzielczości 2× (Retina). Analiza działa w całości w Twojej przeglądarce — zrzut nigdy nie opuszcza Twojego urządzenia.
Prywatność od podstaw
Całe przetwarzanie odbywa się w Twojej przeglądarce. Twoje pliki nigdy nie trafiają na serwer — nie ma czego zapisywać, przesyłać ani udostępniać.
Więcej w naszej polityce prywatnościNajczęstsze pytania
Jest darmowe, bez rejestracji, i nic nie jest przesyłane. Zarówno sprawdzanie kolorów, jak i pełna analiza zrzutu działają w Twojej przeglądarce — po załadowaniu strony możesz odłączyć internet i wszystko dalej działa.
Orientacyjnie Lc 90 jest idealne dla tekstu ciągłego, Lc 75 to cel dla normalnego tekstu, Lc 60 jest akceptowalne dla dużego lub pogrubionego tekstu, a poniżej 45 nie powinno być żadnego tekstu. APCA uwzględnia polaryzację — jasny na ciemnym i ciemny na jasnym są oceniane inaczej niż we współczynniku WCAG.
Bo współczynnik opisuje tylko dwa nominalne kolory. Przy cienkich grubościach antyaliasing miesza większość każdej kreski z tłem: kontrast faktycznie wyświetlany jest niższy. Analiza mierzy te prawdziwe piksele w najcieńszych miejscach — to wartość, którą odbierają Twoi czytelnicy.