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.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
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