Co mierzy narzędzie do sprawdzania kontrastu?
Narzędzie do sprawdzania kontrastu porównuje względną luminancję koloru pierwszoplanowego i tła. Wynik pokazany jest jako stosunek od 1:1, gdy kolory są wizualnie identyczne, do 21:1, gdy czerń i biel mają maksymalny kontrast.
To narzędzie raportuje wskaźniki zaliczenia i niezaliczenia zgodne ze stylem WCAG dla tekstu normalnego i dużego. Jest przydatne do wczesnych decyzji projektowych, stanów komponentów, tokenów motywu oraz szybkich kontroli przed bardziej kompleksowym przeglądem dostępności.
Jak odczytywać wyniki
| Check | Minimalny stosunek | Meaning |
|---|---|---|
| AA — tekst normalny | 4.5:1 | Typowy cel dla zwykłego tekstu akapitowego. |
| AA — tekst duży | 3:1 | Dotyczy większego lub cięższego tekstu, gdzie kształty liter są łatwiejsze do odczytania. |
| AAA — tekst normalny | 7:1 | Bardziej rygorystyczny cel dla zwykłego tekstu w kontekstach o wysokiej dostępności. |
| AAA — tekst duży | 4.5:1 | Bardziej rygorystyczny cel dla dużego tekstu. |
Czego to narzędzie nie udowadnia
Stosunek jest silnym wskaźnikiem, ale nie stanowi pełnego audytu dostępności. Rzeczywista czytelność zależy również od typografii, grubości czcionki, stanów hover/focus, wyłączonych stanów, otaczających kolorów, jakości wyświetlacza oraz tego, czy tekst pojawia się na obrazach lub gradientach.
- Przezroczystość i gradienty wymagają osobnej weryfikacji.
- Małe ikony i cienkie kreski mogą wymagać silniejszego kontrastu niż pobliski tekst.
- Kolory marki mogą zaliczać w jednej parze, a nie zaliczać w innej.
- Kontrast skanowania QR i kontrast czytelności tekstu są powiązane, ale to nie to samo sprawdzenie.
Sposoby poprawy słabego kontrastu
Przyciemnij pierwszy plan
Dla jasnych teł przyciemnij kolor tekstu, zbliżając go do ciemniejszego neutralnego lub mocniejszego odcienia marki.
Rozjaśnij tło
Niewielkie przesunięcia tła mogą sprawić, że kolor marki zaliczy test bez zmiany tokenu pierwszoplanowego.
Zwiększ rozmiar lub wagę tekstu
Tekst większy lub o cięższej grubości ma niższy próg AA, ale nadal wymaga wystarczającego oddzielenia wizualnego.
Sprawdź każdy stan
Stany hover, focus, disabled, selected i error często używają różnych par kolorów.
Najczęściej zadawane pytania
Czy to pełny audyt zgodności z WCAG?
Nie. Oblicza progi kontrastu w stylu WCAG dla par kolorów. Pełny przegląd obejmuje również układ, obsługę klawiatury, semantykę, stany fokusu, alternatywy tekstowe i rzeczywistą wyrenderowaną typografię.
Co liczy się jako duży tekst?
Wytyczne WCAG traktują duży tekst jako około 18 pt zwykłego tekstu lub 14 pt pogrubionego i powyżej. W pracy webowej zweryfikuj rzeczywisty wyrenderowany rozmiar i wagę, nie tylko nazwę w projekcie.
Czy mogę używać tego dla kolorów przezroczystych?
Ten kompaktowy checker używa nieprzezroczystych kolorów sRGB. Jeśli Twoje UI używa przezroczystości, najpierw zmieszaj ostateczny wyrenderowany kolor pierwszoplanowy i tła, a następnie sprawdź otrzymaną parę.
Czy zaliczenie AA oznacza, że projekt zawsze jest czytelny?
Nie zawsze. Bardzo cienkie kroje pisma, małe etykiety UI, zajęte tła i niskiej jakości wyświetlacze nadal mogą utrudniać czytanie. Traktuj stosunek jako jedno ważne wskazanie.
Czy to to samo co kontrast kodu QR?
Nie. Kontrast kodu QR wpływa na niezawodność skanera, podczas gdy to narzędzie skupia się na progach czytelności tekstu. Matematyka jest powiązana, ale praktyczna decyzja jest inna.