1:1 to 21:1 · AA · AAA
Sprawdzanie kontrastu kolorów
Czerń na bieli ma współczynnik kontrastu WCAG 21:1, najwyższy możliwy, a biel na #0060fd ma 5.13:1. Wpisz kolor tekstu i tła, aby sprawdzić własne.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Współczynnik i pięć testów aktualizują się w trakcie pisania. Współczynnik jest ucinany do dwóch miejsc po przecinku, nigdy zaokrąglany w górę, więc 4.499 pokaże się jako 4.49:1 i nie przejdzie testu 4.5:1.
Scanned by 
NortonTM Safe Web
W skrócie
- Cena
- Bez opłat
- Konto
- Niepotrzebne
- Wysyłanie plików
- Nie dotyczy — wpisujesz kolory, nic nie jest nigdzie wysyłane
- Wzór
- (luminancja jaśniejsza + 0.05) ÷ (luminancja ciemniejsza + 0.05)
- Progi
- AA 4.5:1 zwykły i 3:1 duży tekst; AAA 7:1 zwykły i 4.5:1 duży tekst; 3:1 dla elementów interfejsu
- Norma
- Definicje luminancji względnej i współczynnika kontrastu z WCAG 2.2
Współczynniki kontrastu znanych par
Te wiersze wygenerował ten sam kod co narzędzie. Znacznik wyboru oznacza, że para spełnia wymóg; krzyżyk oznacza, że go nie spełnia.
| Kolor tekstu | Tło | Współczynnik | AA zwykły | AA duży | AAA zwykły | AAA duży | Elementy interfejsu |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Test | Minimalny współczynnik |
|---|---|
| AA, zwykły tekst | 4.5:1 |
| AA, duży tekst | 3:1 |
| AAA, zwykły tekst | 7:1 |
| AAA, duży tekst | 4.5:1 |
| AA, elementy interfejsu i grafika | 3:1 |
Jak sprawdzić parę kolorów
Wpisz oba kolory
Wpisz kolor tekstu i kolor tła w dowolnym zapisie CSS albo użyj próbników. Przycisk zamiany zamienia je miejscami, co przydaje się przy jasnym tekście na ciemnym tle.
Odczytaj współczynnik
Współczynnik mieści się od 1:1 (identyczne kolory) do 21:1 (czerń na bieli). Przykład pod polami pokazuje parę w 16 px i w 24 px, więc wynik możesz ocenić własnym okiem.
Zobacz pięć testów
Każdy kafelek mówi, czy dany wymóg WCAG jest spełniony: AA i AAA dla zwykłego tekstu, AA i AAA dla dużego tekstu oraz AA dla elementów interfejsu. Jeśli zwykły tekst nie spełnia AA, strona proponuje najbliższy kolor tekstu, który go spełnia.
Jak liczony jest współczynnik kontrastu
WCAG mierzy kontrast przez luminancję względną, czyli jasność koloru od 0 (czerń) do 1 (biel). Każdy kanał czerwony, zielony i niebieski dzieli się przez 255; wartość do 0.04045 dzieli się przez 12.92, a większą podnosi się do potęgi: (wartość + 0.055) podzielone przez 1.055, a potem do potęgi 2.4. Luminancja to wtedy 0.2126 razy czerwony plus 0.7152 razy zielony plus 0.0722 razy niebieski, co odzwierciedla, jak silnie oko reaguje na każdy z nich. Współczynnik kontrastu to luminancja jaśniejszego koloru plus 0.05, podzielona przez luminancję ciemniejszego plus 0.05.
WCAG 2 wymaga na poziomie AA co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego, a na poziomie AAA 7:1 i 4.5:1. Duży tekst to co najmniej 18 punktów, czyli 24 piksele CSS, albo co najmniej 14 punktów pogrubionego, około 18.66 piksela. Kryterium sukcesu 1.4.11 wymaga 3:1 dla elementów interfejsu i grafik, które czytelnik musi widzieć, takich jak obramowanie pola lub linia wykresu. Współczynnik jest porównywany z każdym progiem bez zaokrąglania. Jeśli kolor ma przezroczystość, przezroczyste tło jest kładzione na biel, a przezroczysty kolor tekstu na tło, zanim nastąpi pomiar. Ta strona implementuje wyłącznie WCAG 2.x; nie liczy APCA, który jest omawiany dla późniejszej wersji wytycznych.
Pytania o kontrast
Jakiego współczynnika kontrastu WCAG wymaga dla tekstu?
Na poziomie AA zwykły tekst potrzebuje co najmniej 4.5:1, a duży tekst co najmniej 3:1. Na poziomie AAA wartości to 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. Współczynnik mierzy się między kolorem tekstu a kolorem bezpośrednio za nim.
Co uznaje się za duży tekst?
WCAG definiuje duży tekst jako co najmniej 18 punktów, czyli 24 piksele CSS, albo co najmniej 14 punktów pogrubionego, czyli około 18.66 piksela CSS. Wszystko mniejsze to zwykły tekst i wymaga wyższego współczynnika.
Jaki jest najjaśniejszy szary, który spełnia AA na bieli?
#767676 na bieli ma współczynnik 4.54:1 i spełnia test 4.5:1 dla zwykłego tekstu. Następny jaśniejszy szary, #777777, ma 4.47:1 i go nie spełnia. Dla 7:1 (AAA) najjaśniejszy szary to #595959, który ma 7.00:1.
Dlaczego 4.49 nie przechodzi, choć wygląda jak 4.5?
Testy porównują dokładny współczynnik z progiem. Współczynnik 4.499 jest poniżej 4.5, więc nie przechodzi, a strona wypisuje go jako 4.49:1 zamiast zaokrąglić w górę. Prawdziwy przykład to czysta czerwień na bieli: 3.99:1 nie spełnia testu 4.5:1 dla zwykłego tekstu, choć jest blisko.
Jakiego kontrastu potrzebują ikony, obramowania i pola formularzy?
Kryterium sukcesu 1.4.11 Kontrast elementów nietekstowych, dodane w WCAG 2.1, wymaga co najmniej 3:1 między elementami interfejsu lub grafiką, które czytelnik musi widzieć, takimi jak obramowanie pola, obwódka fokusu lub linia wykresu, a sąsiadującymi kolorami. Wyłączone kontrolki i czysto dekoracyjna grafika są zwolnione.
Czy zaliczony współczynnik oznacza, że strona jest dostępna?
Nie. Kontrast to jeden wymóg z wielu. Znaczenie mają też rozmiar i grubość czcionki, interlinia, znaczenie przekazywane samym kolorem, widoczność fokusu, tekst na obrazach i gradientach oraz to, jak stronę widzą osoby z różnym widzeniem barw. Traktuj ten wynik jako jedną z danych i testuj stronę z prawdziwą treścią.