Sprawdzacz Kontrastu Kolorów
Sprawdź współczynniki kontrastu kolorów dla zgodności z WCAG 2.1. Natychmiast zweryfikuj standardy AA i AAA.
Co to jest współczynnik kontrastu WCAG?
Współczynnik kontrastu WCAG mierzy różnicę luminancji między kolorami pierwszego planu i tła. Od 1:1 do 21:1.
Jakie są wymagania WCAG AA i AAA?
WCAG AA wymaga minimum 4.5:1 dla zwykłego tekstu i 3:1 dla dużego. AAA wymaga 7:1 i 4.5:1.
Co liczy się jako duży tekst?
Duży tekst to 18pt (24px) lub większy, lub 14pt (18.66px) pogrubiony lub większy.
Dlaczego kontrast kolorów jest ważny?
Odpowiedni kontrast zapewnia czytelność tekstu dla osób z wadami wzroku i poprawia czytelność dla wszystkich.
Jak obliczyć współczynnik kontrastu?
Oblicza się go używając względnych wartości luminancji. Wzór to (L1 + 0.05) / (L2 + 0.05).
Jaki jest minimalny kontrast dla elementów UI?
WCAG wymaga minimum 3:1 dla komponentów UI i obiektów graficznych.
Czy mogę używać dowolnych kombinacji kolorów?
Nie wszystkie kombinacje spełniają standardy dostępności. Użyj tego sprawdzacza do walidacji.
Co to jest względna luminancja?
To postrzegana jasność koloru, od 0 (czarny) do 1 (biały). Obliczana przy użyciu przestrzeni kolorów sRGB.
Czy muszę sprawdzać kontrast obrazów?
Tekst w obrazach musi spełniać te same wymagania. Dla obrazów dekoracyjnych nie ma zastosowania.
Jakie narzędzia pomagają w kontrastowaniu?
Użyj narzędzi deweloperskich przeglądarki, wtyczek do projektowania lub sprawdzaczy online, takich jak ten.
Jak korzystać z Sprawdzacz Kontrastu Kolorów
Natychmiast sprawdź, czy kontrast tekstu i interfejsu spełnia progi AA i AAA normy WCAG 2.1 — w całości w przeglądarce. Podaj dwa kolory, a współczynnik zostanie policzony lokalnie; nic nie opuszcza Twojego urządzenia.
- Wpisz lub wklej kolor tekstu w polu Foreground Color, w dowolnym obsługiwanym formacie, np. HEX lub RGB.
- Wypełnij pole Background Color kolorem znajdującym się za tekstem, aby obliczyć współczynnik kontrastu.
- Odczytaj wynikowy współczynnik oraz znaczniki zaliczenia AA i AAA dla tekstu normalnego i dużego.
- Dostosuj jeden z kolorów, aż współczynnik przekroczy 4,5:1 dla tekstu głównego lub 3:1 dla dużego tekstu i elementów interfejsu.
- Zamień wartości Foreground Color i Background Color, aby przetestować odwrotną parę, np. jasny tekst na ciemnym motywie.
AAA (7:1) to szczytny cel dla dłuższych tekstów, lecz 4,5:1 (AA) to minimum wymagane przez większość wytycznych dostępności.
Powiązane narzędzia
- Pobieranie koloru Pobierz dowolny kolor z ekranu za pomocą pipety. Kopiuj kody HEX, RGB, HSL natychmiast. Darmowe narzędzie online.
- Generator palety kolorów Twórz piękne, harmonijne palety kolorów natychmiast za pomocą naszego darmowego generatora online. Obsługuje tryby monochromatyczne, analogowe, komplementarne, triadyczne, split-komplementarne i tetradyczne. Dostosuj kolory za pomocą suwaków HSL, zablokuj ulubione i eksportuj jako CSS, Tailwind, JSON lub SVG. 100% oparte na przeglądarce, Twoje dane nigdy nie opuszczają urządzenia.
- Symulator Daltonizmu Darmowy symulator daltonizmu online. Testuj projekty dla protanopii, deuteranopii, tritanopii i innych typów. 100% prywatne, działa w przeglądarce.
- GIF Rozdziel Klatki Wyodrębnij i pobierz pojedyncze klatki z animacji GIF jako PNG lub sprite sheet. Darmowe narzędzie online z podglądem i eksportem ZIP.
- GIF Odwrócony Odwróć kolejność odtwarzania animacji GIF online za darmo. Prześlij, podglądaj i pobierz natychmiast.
- Zmieniacz Prędkości GIF Zmień prędkość animacji GIF online. Natychmiast przyspiesz lub zwolnij pliki GIF.
- Wideo na GIF Konwertuj wideo na animowany GIF online. Dostosuj jakość, liczbę klatek i rozdzielczość bezpośrednio w przeglądarce bez przesyłania plików.
- Kreator memów Darmowy kreator memów online. Dodaj klasyczne napisy górne i dolne do dowolnego obrazu, przeciągaj je swobodnie i natychmiast pobierz mema w PNG lub JPEG.