Wpisz kolor tekstu i kolor tła. Sprawdzanie kontrastu kolorów zajmuje chwilę: współczynnik WCAG 2.x pojawia się przy każdej zmianie. Przykładowa para #777777 na bieli daje 4.47:1 i nie spełnia AA dla zwykłego tekstu.
Pięć wierszy z progami
AA wymaga 4,5 dla zwykłego tekstu i 3 dla dużego. AAA wymaga 7 i 4,5. Piąty wiersz, elementy interfejsu i grafiki, wymaga 3. Duży tekst to 18 pt (24 px) lub więcej albo 14 pt (18,67 px) lub więcej w pogrubieniu.
Dlaczego 4,496 nie zalicza 4,5
Narzędzie ucina współczynnik po dwóch miejscach po przecinku. Nie zaokrągla. Wartość 4,496 pokaże się jako 4.49:1 i nie osiągnie 4,5. Zaokrąglenie dałoby 4.50 i zaliczyłoby parę, która jest poniżej progu. W przykładzie prawdziwa wartość to około 4,478, a widzisz 4.47.
Jak użyć narzędzia
- Wpisz Kolor tekstu albo wybierz go próbnikiem. Pole i próbnik pozostają zsynchronizowane.
- Wpisz Kolor tła. Obsługiwane formaty to
#rgb,#rrggbbirgb(r, g, b). Inny zapis pokazuje błąd pod polem. - Odczytaj współczynnik i wiersze. Gdy AA dla zwykłego tekstu nie przechodzi, pojawia się ramka z najbliższym kolorem tekstu, który osiąga 4,5:1.
- Kliknij Użyj tego koloru, aby go zastosować, albo Zamień kolory, aby sprawdzić jasny tekst na ciemnym tle.
Skąd bierze się sugerowany kolor
Odcień i nasycenie zostają bez zmian. Zmienia się tylko jasność, co 0,1 punktu procentowego, w stronę ciemniejszą i jaśniejszą. Pokazany jest wynik bliższy oryginałowi. Dla przykładu to okolice #767676.
Czego narzędzie nie oceni
Porównuje dwa kolory nieprzezroczyste. Kanał alfa, na przykład rgba() lub zapis szesnastkowy z ośmioma cyframi, nie jest przyjmowany. Tekst na zdjęciu albo gradiencie nie ma jednego tła, więc najgorsze miejsce sprawdź sam.
Rozmiar i grubość czcionki
Narzędzie nie wie, jakiej czcionki używa Twoja strona. Wiersze dla dużego tekstu pokazują tylko, jaki próg obowiązywałby, gdyby tekst był duży.
Co dzieje się z kolorami
Obliczenia odbywają się na stronie. Nie jest wysyłane żadne żądanie, a kolory nie są zapisywane. Możesz to sprawdzić w karcie Sieć narzędzi deweloperskich.