Sprawdzanie kontrastu kolorów

Sprawdź stosunek kontrastu WCAG AA i AAA między kolorem tekstu a kolorem tła

Wypróbuj przykład

Kolor pierwszego planu (tekstu)

Kolor tła

Przykład dużego tekstu (18px pogrubiony)

Przykład tekstu normalnego — tak będzie wyglądał twój tekst główny na wybranym kolorze tła.

Stosunek kontrastu

14.63:1

Zgodność z WCAG

Spełnia

Normalny AA

Spełnia

Normalny AAA

Spełnia

Duży AA

Spełnia

Duży AAA

WCAG AATekst normalny: 4.5:1, Tekst duży (18px+ lub 14px pogrubiony): 3:1

WCAG AAATekst normalny: 7:1, Tekst duży (18px+ lub 14px pogrubiony): 4.5:1

Czym jest sprawdzanie kontrastu kolorów?

Sprawdzanie kontrastu kolorów mierzy różnicę luminancji między kolorem pierwszego planu (zazwyczaj tekstu) a kolorem tła, a wynik wyraża jako stosunek. Stosunek 1:1 oznacza, że kolory są identyczne; 21:1 to wartość maksymalna, reprezentująca czarny na białym lub odwrotnie. Web Content Accessibility Guidelines (WCAG) opublikowane przez W3C definiują minimalne stosunki kontrastu, które tekst musi spełniać, aby osoby słabowidzące lub z zaburzeniami widzenia kolorów mogły go odczytać.

Wzór na stosunek kontrastu pochodzi z WCAG 2.x i opiera się na luminancji względnej — mierze tego, jak jasny kolor wydaje się ludzkiemu oku. Luminancja względna jest obliczana przez linearyzację każdego kanału sRGB (usunięcie korekcji gamma) i ważenie kanałów zgodnie ze współczynnikami ITU-R BT.709: 0,2126 dla czerwonego, 0,7152 dla zielonego i 0,0722 dla niebieskiego. Zielony wnosi największy wkład, ponieważ ludzkie oko jest najbardziej wrażliwe na zielone światło. Stosunek wynosi (L1 + 0,05) / (L2 + 0,05), gdzie L1 to luminancja jaśniejszego koloru.

WCAG definiuje dwa poziomy zgodności. Poziom AA wymaga stosunku kontrastu co najmniej 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego (18px lub więcej, lub 14px pogrubiony). Poziom AAA podnosi poprzeczkę odpowiednio do 7:1 i 4,5:1. WCAG 2.1 wprowadził również kryterium sukcesu 1.4.11, które wymaga stosunku 3:1 dla nieodwzorowujących elementów interfejsu, takich jak obramowania, ikony i wskaźniki fokusu.

Dlaczego warto użyć tego narzędzia do sprawdzania kontrastu?

Ocenianie kontrastu na oko jest zawodne. Kolory, które wyglądają wyraźnie na skalibrowanym monitorze, mogą zlewać się na ekranie laptopa niskiej jakości, w bezpośrednim świetle słonecznym lub dla osoby z deuteranopią. Numeryczny stosunek eliminuje zgadywanie i daje jednoznaczny werdykt zaliczone/niezaliczone względem standardu WCAG.

Natychmiastowe obliczanie stosunku
Wybierz lub wpisz dwa kolory, a stosunek kontrastu aktualizuje się w czasie rzeczywistym. Bez formularza do wysłania, bez przeładowania strony.
🔒
Przetwarzanie z poszanowaniem prywatności
Obliczenia luminancji są wykonywane wyłącznie w przeglądarce. Żadne wartości kolorów nie opuszczają twojego urządzenia, a żadne pliki cookie ani narzędzia analityczne nie śledzą twoich wyborów.
🎯
Werdykty AA i AAA
Wyniki pokazują status zaliczone/niezaliczone dla WCAG AA i AAA — dla tekstu normalnego i dużego — dzięki czemu dokładnie wiesz, które progi spełniasz.
📋
Bez zakładania konta
Otwórz stronę i zacznij testować. Bez rejestracji, bez limitów. Narzędzie działa offline po załadowaniu strony.

Zastosowania narzędzia do sprawdzania kontrastu

Rozwój frontendu
Przed wysłaniem zmiany interfejsu wklej kolor tekstu i tła z CSS do narzędzia, aby potwierdzić, że para spełnia WCAG AA. Pozwala to wychwycić błędy kontrastu, zanim trafią do przeglądu kodu lub automatycznych audytów.
Przekazywanie projektów
Projektanci mogą sprawdzić, czy każda para kolorów w pliku Figma spełnia wymagany poziom WCAG, zanim przekażą specyfikacje programistom. Naprawianie kontrastu na etapie projektowania jest o wiele tańsze niż poprawianie go po implementacji.
Audyt dostępności
Inżynierowie QA przeprowadzający audyt WCAG mogą wyrywkowo sprawdzać konkretne kombinacje kolorów oznaczone przez automatyczne narzędzia, takie jak Lighthouse lub axe. Narzędzie potwierdza dokładny stosunek i wskazuje, które poziomy są spełnione lub niespełnione.
Tokeny systemu projektowania
Definiując tokeny kolorów dla systemu projektowania, przetestuj każdą parę pierwszego planu i tła, aby upewnić się, że paleta tokenów spełnia co najmniej poziom AA. Udokumentuj stosunki obok tokenów, aby kolejne zespoły mogły ufać tym wyborom.
Testowanie szablonów e-mail
Klienty pocztowe usuwają funkcje CSS, takie jak krycie i tryby mieszania, więc rzeczywiste renderowane kolory mogą różnić się od źródłowych. Przetestuj końcowe wartości pierwszego planu i tła, które trafiają do skrzynki odbiorczej, aby zweryfikować czytelność.
Nauka standardów dostępności
Studenci uczący się WCAG mogą eksperymentować z różnymi parami kolorów i natychmiast obserwować, jak zmienia się stosunek. Dostosowywanie jednego kanału na raz buduje praktyczne rozumienie tego, jak luminancja wpływa na postrzegany kontrast.

Wymagania dotyczące stosunku kontrastu WCAG

Poniższa tabela podsumowuje minimalne stosunki kontrastu wymagane przez WCAG 2.1 dla różnych typów treści i poziomów zgodności. Tekst duży jest definiowany jako 18px (24 piksele CSS) lub więcej przy normalnej grubości, lub 14px (18,66 pikseli CSS) lub więcej przy grubości pogrubionej.

PoziomMin. stosunekDotyczyUwaga
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminancja, AA i AAA — wyjaśnienie

Obliczanie stosunku kontrastu składa się z trzech etapów: obliczenia luminancji dla każdego koloru, wyprowadzenia stosunku i porównania go z progami WCAG.

Luminancja względna
Pojedyncza liczba od 0 (czarny) do 1 (biały), która reprezentuje postrzeganą jasność koloru. Uwzględnia nieliniową krzywą korekcji gamma sRGB oraz nierównomierną wrażliwość ludzkiego oka na czerwony, zielony i niebieski. Czysty zielony (#00FF00) ma luminancję 0,7152, podczas gdy czysty niebieski (#0000FF) tylko 0,0722.
WCAG AA
Podstawowy poziom dostępności wymagany przez większość standardów prawnych, w tym europejski Akt o dostępności (EAA) i Section 508 w Stanach Zjednoczonych. AA wymaga stosunku 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego. Większość systemów projektowania przyjmuje AA jako minimum dla wszystkich elementów tekstowych.
WCAG AAA
Rozszerzony poziom przeznaczony dla treści, które muszą być czytelne przez możliwie najszerszą grupę odbiorców, w tym użytkowników z poważnym upośledzeniem wzroku. AAA wymaga 7:1 dla tekstu normalnego i 4,5:1 dla tekstu dużego. Niewiele witryn osiąga AAA na wszystkich stronach, ale kluczowe treści, takie jak powiadomienia prawne i informacje medyczne, często go realizuje.

Przykłady kodu

Oblicz stosunki kontrastu WCAG programowo. Każdy przykład implementuje wzór luminancji względnej z WCAG 2.x oraz obliczanie stosunku kontrastu. Te same pary: czarny na białym i indygo na białym są testowane w celach porównawczych.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Najczęściej zadawane pytania

Jaki stosunek kontrastu jest dobry dla tekstu?
Dla tekstu głównego w internecie cel to co najmniej 4,5:1 (WCAG AA). Stosunki powyżej 7:1 spełniają WCAG AAA i są wygodniejsze przy dłuższym czytaniu. Czarny na białym daje maksymalny stosunek 21:1, ale bardzo ciemna szarość (#1e293b) na białym nadal daje około 12,6:1, czyli znacznie powyżej AAA.
Co liczy się jako duży tekst w WCAG?
WCAG definiuje duży tekst jako 18px (24 piksele CSS) przy normalnej grubości lub 14px (18,66 pikseli CSS) przy grubości pogrubionej. Duży tekst otrzymuje niższy próg kontrastu, ponieważ większe litery są łatwiej postrzegane. W CSS 1px równa się 0,75pt, więc 18pt równa się 24px.
Czy WCAG AA jest wymagane prawnie?
W wielu jurysdykcjach tak. Europejski Akt o dostępności (EAA), który wchodzi w życie w czerwcu 2025 roku, odwołuje się do WCAG 2.1 AA. Section 508 amerykańskiej Ustawy o rehabilitacji wymaga, aby agencje federalne spełniały WCAG 2.0 AA. Americans with Disabilities Act (ADA) był interpretowany przez sądy USA jako wymagający dostępnych witryn internetowych, z WCAG AA jako standardem. Kanada, Australia i Wielka Brytania mają podobne regulacje.
Jak obliczana jest luminancja względna?
Każda wartość kanału sRGB (0–255) jest dzielona przez 255, a następnie linearyzowana: wartości równe lub poniżej 0,04045 są dzielone przez 12,92, a wartości powyżej są przekształcane przez ((c + 0,055) / 1,055) ^ 2,4. Trzy zlinearyzowane kanały są ważone współczynnikami ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) i sumowane. Wynik to liczba z przedziału od 0 do 1.
Dlaczego WCAG używa przesunięcia 0,05 we wzorze na kontrast?
Przesunięcie 0,05 zapobiega dzieleniu przez zero, gdy jeden z kolorów to czysta czerń (luminancja = 0). Uwzględnia również otoczenie świetlne i odbicia od ekranu, które nieznacznie zwiększają postrzeganą luminancję nawet najciemniejszych pikseli. Bez tego przesunięcia czerń na dowolnym ciemnym kolorze dawałaby nieskończony lub mylnie wysoki stosunek.
Czy dwa kolory mogą spełniać AA, a mimo to być trudne do odczytania?
Tak. Stosunki kontrastu WCAG mierzą różnicę luminancji, nie różnicę barwy. Nasycona czerwień na nasyconej zieleni może technicznie spełniać próg stosunku, będąc jednocześnie niekomfortową do odczytu dla niektórych użytkowników — szczególnie tych z zaburzeniami widzenia czerwono-zielonego. Dobieranie kolorów różniących się zarówno luminancją, jak i barwą daje zwykle wygodniejsze rezultaty.
Jaka jest różnica między kontrastem WCAG 2.x a APCA?
WCAG 2.x używa prostego stosunku luminancji, który traktuje symetrycznie pierwszy plan i tło. APCA (Advanced Perceptual Contrast Algorithm), proponowany dla WCAG 3.0, używa modelu postrzeganej jasności uwzględniającego polaryzację: ciemny tekst na jasnym tle ma inny postrzegany kontrast niż jasny tekst na ciemnym tle przy tej samej różnicy luminancji. APCA jest nadal wersją roboczą i nie zastąpił metody WCAG 2.x w żadnych przepisach.