Polski
Sprawdzaj kontrast kolorów według WCAG i poprawiaj złe zestawienia jednym kliknięciem.
Ostatnia aktualizacja
Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.
*Contrast checker* to narzędzie, po które projektanci i programiści sięgają przed wdrożeniem ekranu. Oblicza **współczynnik kontrastu** między dwoma kolorami, czyli tekstem i tłem za nim, według wzoru zdefiniowanego w wytycznych Web Content Accessibility Guidelines (WCAG). Im większy współczynnik, tym łatwiej czytać tekst.
WCAG definiuje trzy progi. **3:1** to minimum dla dużych nagłówków (24px+ w zwykłej grubości lub 18.66px+ pogrubione) oraz dla widocznych krawędzi interaktywnych elementów interfejsu, takich jak przyciski, pola formularzy i ikony. **4.5:1** to minimum AA dla zwykłego tekstu, czyli poprzeczka, do której dąży większość zespołów. **7:1** to AAA, najwyższy poziom, który mocno wspiera osoby słabowidzące.
Kontrast to **nie** to samo co wyrazistość kolorów. Dwa mocne kolory marki mogą być trudne do czytania, jeśli ich *luminancja* jest zbliżona. To narzędzie stosuje wzór WCAG na luminancję do każdego kanału, podaje dokładny współczynnik i ocenia każdy kontekst, więc nie musisz zgadywać.
Wpisz lub wklej wartość HEX albo użyj próbnika kolorów. Pierwszy plan to tekst lub ikona, a tło to to, co znajduje się za nimi.
Duża liczba po lewej to współczynnik kontrastu WCAG. Wszystko poniżej 3:1 jest ryzykowne dla każdego interfejsu, a poniżej 4.5:1 nie przechodzi dla zwykłego tekstu.
Trzy wiersze pokazują wynik dla zwykłego tekstu (4.5/7), dużego tekstu (3/4.5) i elementów interfejsu (3:1). Celuj w zielone znaczniki w każdym wierszu, którego faktycznie używa twój projekt.
Gdy AA nie przechodzi, narzędzie może rozjaśnić lub przyciemnić kolor pierwszego planu, zachowując odcień, aż para przejdzie. Kliknij ponownie, aby osiągnąć AAA.
Gdy oba kolory przechodzą w potrzebnych kontekstach, skopiuj fragment CSS (color: + background:) i wklej go do arkusza stylów lub pliku z tokenami projektowymi.
Zestaw to, co stylujesz, z wymaganym poziomem. Źródło: WCAG 2.2 Understanding 1.4.3 i 1.4.11.
| Element | Minimum AA | Minimum AAA | Uwagi |
|---|---|---|---|
| Zwykły tekst (< 18pt w zwykłej grubości) | 4.5 : 1 | 7 : 1 | Domyślna zasada dla akapitów, etykiet i podpisów |
| Duży tekst (≥ 18pt w zwykłej grubości lub ≥ 14pt pogrubiony) | 3 : 1 | 4.5 : 1 | Nagłówki, teksty hero, duże cytaty |
| Elementy interfejsu i obiekty graficzne | 3 : 1 | - | Obramowania przycisków, pola formularzy, ikony, obwódki fokusu |
| Logo lub czysta dekoracja | Zwolnione | Zwolnione | Logotypy i przypadkowy tekst są zwolnione, ale użyteczność wciąż się liczy |
| Stan nieaktywny | Zwolnione | Zwolnione | Nieaktywne kontrolki są zwolnione, ale nie traktuj tego jako wymówki dla domyślnie niskiego kontrastu |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Klasyczny ciemny łupek na prawie białym tle. Przechodzi AAA dla zwykłego tekstu (≥ 7:1) z dużym zapasem. Większość interfejsów produktowych powinna domyślnie celować w te okolice.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Żywe niebieskie na białym często lądują w okolicach 4:1: czytelne dla dużych nagłówków (przechodzą 3:1 AA dla dużego tekstu), ale nie przechodzą progu 4.5:1 dla zwykłego tekstu. Używaj ich do przycisków i etykiet CTA od 18px w górę, a nie do akapitów.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Jaskrawy żółty na białym to słynna pułapka: kolory wyglądają głośno, ale ich luminancja jest zbyt zbliżona. To połączenie nie przechodzi żadnego progu. Zostaw je dla ciemnych teł (np. #facc15 na #1f2937 daje ≈ 12:1).
placeholder i disabled blisko granicy WCAG. Oba są zwolnione z WCAG, ale zwolnione nie znaczy czytelne.