Loading...
Loading...
Testuj dowolną parę kolorów tekstu i tła w odniesieniu do wymagań kontrastowych WCAG 2.2 AA i AAA, z natychmiastową informacją zwrotną o wyniku oraz na żywo podglądem.
Wyższe współczynniki są bardziej czytelne. 21:1 to czysta czerń na białym.
Zobacz swoją parę kolorów na obu rozmiarach tekstu i nagłówka.
Normalny tekst ciała o rozmiarze 16 pikseli. WCAG 2.2 mierzy kontrast między tekstem na pierwszym planie a jego bezpośrednim tłem — ta podgląd pokazuje kombinację, którą wprowadziłeś powyżej, dokładnie tak, jak widziałby to użytkownik.
Narzędzie do sprawdzania kontrastu mierzy różnicę w luminancji między dwoma kolorami i raportuje ją jako stosunek między 1:1 (identyczne) a 21:1 (czysta czerń na czystej bieli). Wytyczne dotyczące dostępności wykorzystują ten stosunek, aby zdecydować, czy tekst jest czytelny dla użytkowników z niską widocznością, daltonizmem lub ekranami oglądanymi w jasnym świetle słonecznym. To narzędzie przestrzega WCAG 2.2 — tego samego standardu, który odnosi się do ADA w USA, Europejskiej Ustawy o Dostępności oraz większości korporacyjnych systemów projektowych. Wprowadź dowolne dwa kolory, a otrzymasz natychmiastowy wynik pass/fail w pięciu progach WCAG, plus na żywo podgląd w obu rozmiarach tekstu i nagłówka. Wszystko działa w twojej przeglądarce — bez przesyłania, bez śledzenia, bez konta.
Wklej kod hex lub użyj narzędzia do wyboru koloru dla koloru na pierwszym planie (tekst). Narzędzie akceptuje również 3-cyfrowe skróty, takie jak #03A.
Zrób to samo dla tła. Jeśli znasz tylko kolor tekstu, pozostaw tło na białym (#FFFFFF) dla domyślnego testu.
Duża liczba stosunku aktualizuje się podczas pisania. Stosunek poniżej 3.0 nie przejdzie nawet najluźniejszego progu WCAG dla normalnego tekstu.
Pięć odznak pokazuje pass/fail dla progów AA normal, AA large, AAA normal, AAA large i UI-components. AA to zwykłe minimalne wymaganie prawne; AAA to ulepszony cel dla kluczowych treści.
Sprawdź, czy podgląd wygląda poprawnie w rozmiarze nagłówka i tekstu, a następnie użyj Kopiuj CSS, aby pobrać deklaracje `color:` i `background-color:` do swojego arkusza stylów.
Dla każdego kanału (R, G, B skalowane do 0–1): c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 Luminancja względna: L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear Stosunek kontrastu: ratio = (L_light + 0.05) / (L_dark + 0.05) gdzie L_light = max(L1, L2) i L_dark = min(L1, L2)
Wzór pochodzi z WCAG 2.x i stosuje krzywą korekcji gamma do każdego kanału sRGB przed obliczeniem luminancji. Wagi (0.2126, 0.7152, 0.0722) odzwierciedlają wrażliwość ludzkich stożków na czerwone, zielone i niebieskie światło. Dodanie 0.05 do obu terminów zapobiega dzieleniu przez zero, gdy jeden kolor jest idealną czernią. Stosunki wahają się od 1:1 (identyczne kolory) do 21:1 (czysta czerń na czystej bieli).
| Para | Stosunek i werdykt |
|---|---|
#000000 na #FFFFFF | 21:1 — przechodzi każdy próg Kanoniczny maksymalny kontrast. Używany do interfejsów użytkownika do długiego czytania. |
#1A73E8 na #FFFFFF | 4.63:1 — przechodzi AA normal, nie przechodzi AAA normal Niebieski Google na białym. Legalny dla tekstu ciała, nieco poniżej AAA. |
#808080 na #FFFFFF | 3.95:1 — nie przechodzi AA normal, przechodzi AA large Średni szary na białym — odpowiedni dla nagłówków, zbyt jasny dla akapitów. |
Konwertuj między HEX, RGB i HSL z na żywo próbkami, suwakami i natychmiastowym kopiowaniem.
Oblicz swój dokładny wiek w latach, miesiącach i dniach od dowolnej daty urodzenia.
Sprawdź wskaźnik masy ciała na podstawie wzrostu i wagi, używając jednostek metrycznych lub imperialnych.
Oblicz procenty, zmiany procentowe i procent całości w kilka sekund.
Ostatnia aktualizacja