# współczynnik kontrastu

*Zmierzona różnica między tekstem a jego tłem*

Współczynnik kontrastu to zmierzona różnica jasności między tekstem a tłem, w skali od 1:1 do 21:1. WCAG wymaga co najmniej 4,5:1 dla zwykłego tekstu, 3:1 dla dużego i 3:1 dla tych części kontrolki, które niosą informację o tym, czym ona jest.

**Canonical:** https://spoko.space/pl/slownik/wspolczynnik-kontrastu/  
**Language:** pl  
**Kategoria:** Dostępność  
**Inaczej:** kontrast, kontrast kolorów, kontrast WCAG  
**Published:** 2026-09-22  
**Słownik pojęć:** https://spoko.space/pl/slownik/

---
## Co to jest {#co-to-jest}

Liczba, którą się wylicza, a nie kwestia gustu. Czarne na białym to 21:1; dwie podobne szarości potrafią mieć 1,8:1. Progi, które mają znaczenie, to 4,5:1 dla tekstu podstawowego, 3:1 dla dużego i 3:1 dla elementów interfejsu, takich jak obwódka fokusu czy krawędź pola formularza.

„Duży” ma definicję i jest ostrzejsza, niż się wydaje: co najmniej 24 px albo 18,66 px przy grubości 700 lub większej. Etykieta przycisku w 16 px semibold to tekst zwykły, nie duży, choćby w projekcie wyglądała potężnie.

## Dlaczego to twój problem, jeśli zamawiasz stronę {#dlaczego-to-twój-problem-jeśli-zamawiasz-stronę}

Bo to najczęstsza awaria dostępności w sieci, najłatwiejsza do zmierzenia i ta, którą twoi klienci czują, nie umiejąc jej nazwać. Jasna szarość na bieli wygląda wytwornie na skalibrowanym monitorze w ciemnym biurze i znika na laptopie w pociągu.

To także kryterium najczęściej zderzające się z księgą znaku — i właśnie tam mieszkają ciekawe decyzje.

## Decyzja, którą musiała podjąć ta strona {#decyzja-którą-musiała-podjąć-ta-strona}

Firmowy niebieski to `#0d87cd`. Na białym tle ma **3,9:1** — spokojnie wystarczy na wypełniony przycisk, ikonę albo słowo wielkości nagłówka i nie wystarcza na cokolwiek w rozmiarze tekstu. Czyli jedno z dwojga: zmienić kolor marki albo przestać używać go jako koloru tekstu.

Odpowiedzią były trzy tokeny zamiast jednego. Ciemniejszy niebieski na tekst na stronie, głębszy pod biały tekst na wypełnieniu i trzeci na niebieski tekst na niebieskawym kaflu, gdzie podkład zjada zapas, który ma ten pierwszy. Przyciski zostają przy kolorze marki, linki nie, a różnicy nie widać, dopóki się jej nie szuka.

Z tej samej pracy wyszło drugie odkrycie: **axe nie utrzyma tej linii**. Zawsze, gdy gdziekolwiek nad elementem leży gradient albo pseudoelement, zgłasza kontrast jako *incomplete*, a nie jako błąd — i zestaw testów sprawdzający tylko listę naruszeń przechodzi. Dlatego jest tu osobny skrypt, który liczy współczynniki sam i wywala build na prawdziwym niedoborze.

## Czym współczynnik kontrastu nie jest {#czym-współczynnik-kontrastu-nie-jest}

Sam w sobie nie jest miarą czytelności — strona może spełnić każdy próg i dalej być nie do czytania przez drobny krój, ciasne odstępy albo ruchliwe zdjęcie pod tekstem. Współczynnik jest podłogą, nie przeglądem projektu.

## Powiązane pojęcia {#related-terms}

- [WCAG](https://spoko.space/pl/slownik/wcag/): WCAG to standard W3C opisujący, jak zrobić stronę używalną dla osób z niepełnosprawnościami. Ma trzy poziomy zgodności — A, AA i AAA — a tym, którego realnie żądają przepisy, przetargi i umowy z dużymi firmami, jest AA. — Markdown: https://spoko.space/pl/slownik/wcag.md
- [Europejski Akt o Dostępności](https://spoko.space/pl/slownik/europejski-akt-o-dostepnosci/): Europejski Akt o Dostępności to dyrektywa UE wymagająca, żeby wybrane produkty i usługi — w tym handel elektroniczny — były dostępne dla osób z niepełnosprawnościami. Krajowe przepisy obowiązują od 28 czerwca 2025, a dla stron odniesieniem jest WCAG 2.1 na poziomie AA. — Markdown: https://spoko.space/pl/slownik/europejski-akt-o-dostepnosci.md

## Gdzie o tym piszę {#related-posts}

- [Skuteczna strona www — 10 kluczowych cech](https://spoko.space/pl/blog/skuteczna-strona-www/) — Markdown: https://spoko.space/pl/blog/skuteczna-strona-www.md
  Skuteczna strona to taka, która zamienia odwiedzających w klientów. 10 konkretnych cech, które decydują o wyniku — i jak je zweryfikować na swojej stronie.

## Zobacz też {#see-also}

- [Audyt dostępności WCAG 2.2 AA](https://spoko.space/pl/dostepnosc-wcag/)

## Źródła {#sources}

- [Understanding Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — Kryterium, wyjątki i definicja dużego tekstu.
- [Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) — Reguła 3:1 dla kontrolek, obwódek fokusu i grafik niosących znaczenie.