PRAKTYCZNE PORADNIKI · Internet i kody
Sprawdź kontrast tekstu bez zaokrąglania niepowodzenia
Różne kolory mogą tworzyć trudny do odczytania tekst. Zmierz rzeczywistą parę, a potem oceń wielkość liter, składanie tła i stany interfejsu.
1. Ustal rzeczywiste kolory
Sprawdź kolor liter i tło bezpośrednio pod nimi. Ogólna paleta nie wystarcza, gdy tekst pojawia się na różnych powierzchniach.
Narzędzie porównuje dwa nieprzezroczyste kolory szesnastkowe. Nie skanuje strony ani nie odtwarza automatycznie przezroczystości, obrazów czy gradientów.
2. Wybierz właściwe kryterium
WCAG AA wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Kategoria zależy od zdefiniowanej wielkości i grubości, nie od tego, czy element jest nagłówkiem.
Dla pisma łacińskiego duży tekst to przynajmniej 18 punktów zwykłego lub 14 pogrubionego, z odpowiednikami dla innych pism. W razie wątpliwości sprawdź ostrzejszy próg.
Sprawdzanie kontrastu kolorów3. Czytaj współczynnik i ocenę razem
Wprowadź kolory i sprawdź ocenę odpowiedniej kategorii. Dwie wyświetlane cyfry po przecinku mogą ukryć różnicę blisko progu.
Nie zaokrąglaj niewystarczającej wartości w górę. Narzędzie ocenia przed zaokrągleniem wyświetlenia, dlatego czytaj również komunikat wyniku.
WYPRÓBUJ TEN KROK
Sprawdzanie kontrastu kolorów
Użyj tutaj pełnego kalkulatora: wczytaj wartości przykładowe, zmieniaj jedną daną naraz i porównuj wynik z krokami poradnika.
Przykład do samodzielnego odtworzenia
Wczytaj #777777 na #FFFFFF: około 4,48:1, poniżej AA dla zwykłego tekstu. Zmień tylko tekst na #767676: około 4,54:1, powyżej tego progu. Ocena wykorzystuje niezaokrąglony współczynnik.
Wynik
Tutaj pojawi się wynik.
4. Przykład: sąsiednie odcienie szarości
Na białym tle #777777 daje około 4,48:1 i nie spełnia AA zwykłego tekstu. #767676 daje około 4,54:1 i spełnia ten próg. Różnica wizualna jest mała, warunek precyzyjny.
Dwie szarości na tym samym białym tle
- Dane początkowe
- Tło #FFFFFF; tekst #777777 lub #767676
- Wynik
- Około 4,48:1: nie spełnia AA zwykłego tekstu. Około 4,54:1: spełnia.
Próbki są poglądowe. Etykiety podają kolory, współczynniki i wyniki, nie opierając znaczenia wyłącznie na wyglądzie.
-
#777777 na #FFFFFF
Około 4,48:1 — poniżej AA zwykłego tekstu.
-
#767676 na #FFFFFF
Około 4,54:1 — spełnia ten próg.
5. Powtórz dla motywów i stanów
Sprawdź treść, linki, tekst pomocniczy i etykiety przycisków na rzeczywistych tłach. Powtórz dla ciemnego motywu i istotnych stanów; samo odwrócenie kolorów nie zawsze wystarczy.
Zmienne tło wymaga oceny rzeczywistych kombinacji, także najmniej korzystnej. Jeden punkt obrazu nie reprezentuje całej powierzchni.
| Kryterium | Minimalny współczynnik |
|---|---|
| AA zwykły | 4,5:1 |
| AA duży | 3:1 |
| AAA zwykły | 7:1 |
6. Oceń czytelność szerzej
Dobry współczynnik nie dowodzi pełnej dostępności. Rozmiar, grubość, odstępy, znaczenie i poleganie wyłącznie na kolorze wymagają osobnej kontroli.
Przy wyniku tuż nad progiem rozważ większy margines. Gdy kolor przekazuje wynik, tekst lub kształt powinny przekazywać tę samą informację.
To dane przykładowe, nie pomiary rzeczywistego przypadku. Wynik korzysta z tego samego silnika co pełne narzędzie. Porównaj go z krokami obliczeń i zaznacz kontrole po sprawdzeniu.
Źródła i metoda
Najczęstsze pytania
Czy poprawny wynik certyfikuje zgodność z WCAG?
Nie. Dotyczy sprawdzonego kontrastu przy podanych kolorach i warunkach. Inne wymagania potrzebują odrębnej oceny.
Czy można podać kolor półprzezroczysty?
Potrzebny jest kolor wynikowy po złożeniu z tłem. Test dwóch nieprzezroczystych kolorów nie odtwarza całej strony.