Analizator WCAG
Przeanalizuj każde zestawienie kolorów w palecie pod kątem kontrastu WCAG AA i AAA i zobacz w jednym widoku, które pary spełniają wymogi, a które trzeba poprawić.
Paleta do analizy
Macierz kontrastu
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Legenda WCAG 2.1
Poziom AAA
Kontrast ≥ 7:1 - Doskonały
Poziom AA
Kontrast ≥ 4,5:1 - Standard
AA duży
Kontrast ≥ 3:1 - Duży tekst
Niezaliczone
Kontrast < 3:1 - Niezgodny
Przeanalizuj każde zestawienie kolorów w palecie pod kątem kontrastu WCAG AA i AAA i zobacz w jednym widoku, które pary spełniają wymogi, a które trzeba poprawić.
Analizator WCAG pokazuje wyłącznie elementy sterujące i wyniki związane z jego funkcją. Dostępne opcje zależą od narzędzia i danych wejściowych.
Obsługiwane formaty
Jak to działa
Krok 1
Otwórz Analizator WCAG i przygotuj dane wymagane przez interfejs
Krok 2
Dostosuj widoczne ustawienia do oczekiwanego wyniku
Krok 3
Sprawdź wynik przed skopiowaniem, eksportem lub ponownym użyciem
Częste błędy, których należy unikać
- Nie zakładaj obsługi formatu lub opcji, jeśli nie ma jej w interfejsie.
- Sprawdź wartości przed użyciem ich w identyfikacji, interfejsie lub pliku produkcyjnym.
- Dla tekstu i UI sprawdź również kontrast.
Wskazówki pro
- Zachowaj wartość źródłową razem z wynikiem, aby porównywać warianty.
- Korzystaj z formatów faktycznie pokazanych przez narzędzie zamiast zgadywać konwersję.
- Na telefonie i tablecie pozwól tekstom i kontrolkom przechodzić do kolejnych wierszy.
Przetwarzanie danych
Sposób przetwarzania zależy od użytej funkcji. Zgoda, analityka i funkcje konta serwisu są oddzielne od operacji na kolorze.
Co robi to narzędzie
Przeanalizuj każde zestawienie kolorów w palecie pod kątem kontrastu WCAG AA i AAA i zobacz w jednym widoku, które pary spełniają wymogi, a które trzeba poprawić. Analizator WCAG skupia się na tym zadaniu i nie sugeruje funkcji, których nie ma w interfejsie. Użyj dostępnych elementów sterujących, aby uzyskać potrzebny wynik, a następnie sprawdź wyświetlane wartości przed przeniesieniem ich do innego narzędzia, arkusza stylów, pliku projektu lub dokumentu.
Przygotowanie danych wejściowych
Zacznij od danych wymaganych przez Analizator WCAG: koloru, wartości, obrazu lub ustawienia zależnie od ekranu. Formaty podane na tej stronie to Palette, HEX, CSS Variables, JSON. Jeśli format lub opcja nie pojawia się w interfejsie, nie traktuj jej jako obsługiwanej przez tę konkretną funkcję.
Odczyt i weryfikacja wyniku
Odczytuj wynik w kontekście wykonanej operacji. Porównaj go z wartością źródłową i sprawdź ustawienia wpływające na obliczenie. W ważnych pracach wizualnych warto również obejrzeć rezultat w docelowym interfejsie zamiast polegać wyłącznie na kodzie.
Użycie na telefonie i tablecie
Analizator WCAG korzysta z responsywnego układu serwisu. Nagłówki, opisy, breadcrumbs i kontrolki mogą przechodzić do kolejnych wierszy na wąskich ekranach, dzięki czemu długie tłumaczenia nie są ucinane. Mimo to sprawdź wynik na urządzeniu i w kontekście, w którym będzie używany.
Ponowne użycie wyniku w projekcie
Po sprawdzeniu wyniku korzystaj tylko z działań rzeczywiście oferowanych przez Analizator WCAG, takich jak kopiowanie lub eksport, jeśli są dostępne. Zachowaj wartość źródłową, jeśli ustawienie będzie trzeba odtworzyć, a przy kolorach UI dokumentuj także ich rolę i wymagany kontrast.
Powiązane narzędzia
Poradniki i tutoriale
Dowiedz się, jak korzystać z naszych narzędzi dzięki szczegółowym poradnikom.
wcag-analyzer: praktyczny przewodnik accessibility
Zlokalizowany przewodnik po wcag-analyzer, dobrych praktykach accessibility i typowych błędach.
wcag-analyzer: praktyczny przewodnik accessibility
Zlokalizowany przewodnik po wcag-analyzer, dobrych praktykach accessibility i typowych błędach.
wcag-analyzer: praktyczny przewodnik export
Zlokalizowany przewodnik po wcag-analyzer, dobrych praktykach export i typowych błędach.
Najczęściej zadawane pytania
Dowiedz się, jak korzystać z naszych narzędzi dzięki szczegółowym poradnikom.