Contrast Checker
WCAG contrast check
WCAG contrast check Działa lokalnie w Twojej przeglądarce
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Narzędzie do sprawdzania kontrastu mierzy współczynnik kontrastu między kolorem tekstu a kolorem tła przy użyciu wzoru na luminancję WCAG i informuje, jakie poziomy dostępności spełnia dana para. To jest kontrola, która decyduje, czy tekst podstawowy jest rzeczywiście czytelny: stosunek 4,5 do 1 to minimum w przypadku zwykłego tekstu, 3 do 1 w przypadku dużego tekstu i granic interfejsu oraz 7 do 1 w przypadku zwiększonej zgodności. Ocenianie kontrastu na podstawie wzroku jest zawodne, ponieważ oko jest znacznie bardziej wrażliwe na kolor zielony niż na niebieski, dlatego żółty, który wygląda jasno, i niebieski, który wygląda na ciemny, mogą uzyskać niemal identyczne wyniki.
Where people use the
- Sprawdzenie, czy tekst na kolorowym tle spełnia wymagania AA.
- Wybór pomiędzy czarnym i białym tekstem dla koloru przycisku.
- Audyt istniejącej palety przed przeprojektowaniem.
- Dokumentowanie decyzji dotyczącej dostępności w bilecie.
How to use the
- 1
Ustaw kolor tekstu
Wpisz wartość szesnastkową, np. 1a1a1a, lub użyj próbnika kolorów. Akceptowany jest trzycyfrowy skrót, taki jak f0a.
- 2
Ustaw kolor tła
To samo z tłem. Podgląd jest aktualizowany po zmianie któregokolwiek z nich.
- 3
Przeczytaj stosunek
Liczba ta waha się od 1:1 w przypadku identycznych kolorów do 21:1 w przypadku czerni na białym. Wyższy oznacza bardziej czytelny.
- 4
Sprawdź poziom, jakiego potrzebujesz
Normalny tekst podstawowy wymaga 4,5 do 1 dla AA i 7 do 1 dla AAA. Nagłówki pogrubione o wartości 18 lub 14 punktów oraz obramowania interfejsu użytkownika wymagają proporcji 3 do 1.
- 5
Spójrz na podgląd i liczbę
Para może przejść na papierze i nadal wyglądać słabo przy małym rozmiarze lub na ekranie niskiej jakości. Jeśli coś wydaje się trudne do odczytania, oznacza to, że jest trudne do odczytania.
Wskazówki i najlepsze praktyki
- Przyciemnij kolor tekstu, zachowaj jaśniejszą wersję dla wypełnień.
- Sprawdź najmniejszy rozmiar, w jakim tekst będzie faktycznie używany.
- Obramowania i ikony również wymagają proporcji 3 do 1, a nie tylko tekstu.
Często zadawane pytania
Jaki jest wzór na współczynnik kontrastu?
Każdy kolor jest konwertowany na względną luminancję przy użyciu standardowych wag, 0,2126 dla czerwieni, 0,7152 dla zieleni i 0,0722 dla błękitu, po korekcji gamma. Stosunek stanowi wówczas jaśniejsza luminancja plus 0,05 podzielona przez ciemniejszą plus 0,05. Wynik waha się od 1:1 do 21:1.
Dlaczego kolor mojej marki nie działa?
Ponieważ większość nasyconych kolorów półtonowych nie może osiągnąć współczynnika 4,5 do 1 w stosunku do bieli. Typową poprawką jest przyciemnienie koloru w przypadku tekstu przy jednoczesnym zachowaniu jaśniejszej wersji w przypadku dużych wypełnień, co jest dokładnie tym, co większość systemów projektowych robi z kolorem podstawowym.
Czy przejście współczynnika wystarczy, aby być dostępnym?
Jest to konieczne, ale niewystarczające. Bardzo duży lub bardzo mały tekst, cienka czcionka, tekst na obrazach i pewne formy zaburzeń widzenia kolorów wpływają na czytelność w sposób wykraczający poza proporcje. Testuj z prawdziwymi użytkownikami, gdzie tylko możesz.
Czy kierunek ma znaczenie, światło w ciemności czy ciemność w świetle?
Nie. Stosunek jest symetryczny, więc wynik czerni na białym i bieli na czarnym wynosi 21:1. To, co różni się w praktyce, to odblaski i postrzegana waga, co jest oceną projektu, a nie zgodności.
Co liczy się jako duży tekst?
W terminologii WCAG: 18 punktów lub więcej lub 14 punktów lub więcej w przypadku pogrubienia. W pikselach CSS wynosi to około 24 pikseli lub około 18,66 pikseli w przypadku pogrubienia.
Gdzie odbywa się obliczenie?
Całość w Twojej przeglądarce. Nic nie jest przesyłane, więc możesz sprawdzić kolory na podstawie wytycznych marki, które nie są jeszcze publiczne.