Kalkulator kontrastu WCAG

Wpisz kolor tekstu i tła, a od razu zobaczysz współczynnik kontrastu i to, czy para kolorów spełnia wymagania WCAG 2.2 dla zwykłego tekstu, dużego tekstu i elementów interfejsu.

Wpisz kolor w formacie szesnastkowym, np. #1a5fb4 albo #fff.

Zwykły tekst – przykład akapitu.

Duży tekst

Współczynnik kontrastu: –

Zwykły tekst, AA (1.4.3) – 4,5:1
Duży tekst, AA (1.4.3) – 3:1
Elementy interfejsu i grafiki (1.4.11) – 3:1
Zwykły tekst, AAA (1.4.6) – 7:1
Duży tekst, AAA (1.4.6) – 4,5:1

Gotowe, przyjazne zestawy kolorów

Wybierz zestaw, aby sprawdzić go w kalkulatorze. Każdy zapewnia kontrast co najmniej 4,5:1 dla zwykłego tekstu (WCAG AA).

Palety kolorów i propozycje czcionek

Każdy pakiet ma pięć kolorów przypisanych do ról oraz parę tekst/tło i tekst/przycisk sprawdzoną pod kątem WCAG AA. Skopiuj pojedynczy kolor albo cały zestaw CSS.

Nadmorski granat

Spokojny, profesjonalny, do usług i edukacji

Tekst#172B3A
Tło#EAF2F7
Główny#174A7E
Pomocniczy#2E6F65
Akcent#A3442B
Przykładowy nagłówek

Treść na jasnym, spokojnym tle.

Link pomocniczy

Czcionki: nagłówki Atkinson Hyperlegible Next · tekst system-ui, Segoe UI, sans-serif

:root { --color-text: #172B3A; --color-background: #EAF2F7; --color-primary: #174A7E; --color-secondary: #2E6F65; --color-accent: #A3442B; }

Leśna zieleń

Naturalny i łagodny, do zdrowia i organizacji

Tekst#1D2922
Tło#EEF4EE
Główny#245B46
Pomocniczy#3F6673
Akcent#8A3D32
Przykładowy nagłówek

Treść na jasnym, naturalnym tle.

Link pomocniczy

Czcionki: nagłówki system-ui, sans-serif · tekst Atkinson Hyperlegible Next

:root { --color-text: #1D2922; --color-background: #EEF4EE; --color-primary: #245B46; --color-secondary: #3F6673; --color-accent: #8A3D32; }

Lawenda i śliwka

Wyrazisty, ale stonowany, do kultury i kreatywnych usług

Tekst#251D30
Tło#F2EFF8
Główny#563C82
Pomocniczy#245C63
Akcent#8A3A44
Przykładowy nagłówek

Treść na miękkim, jasnym tle.

Link pomocniczy

Czcionki: nagłówki Atkinson Hyperlegible Next · tekst system-ui, Arial, sans-serif

:root { --color-text: #251D30; --color-background: #F2EFF8; --color-primary: #563C82; --color-secondary: #245C63; --color-accent: #8A3A44; }

Nocny ocean

Ciemny wariant z jasnym tekstem, do interfejsów i paneli

Tekst#F4F7FA
Tło#142536
Główny#92C8B6
Pomocniczy#6A9CB0
Akcent#F3C879
Przykładowy nagłówek

Treść na ciemnym, spokojnym tle.

Link pomocniczy

Czcionki: nagłówki system-ui, sans-serif · tekst Atkinson Hyperlegible Next

:root { --color-text: #F4F7FA; --color-background: #142536; --color-primary: #92C8B6; --color-secondary: #6A9CB0; --color-accent: #F3C879; }

Czcionki są propozycjami, nie gwarancją dostępności. Dobierz rozmiar, interlinię i długość wiersza do treści oraz sprawdź układ z powiększeniem. Atkinson Hyperlegible Next jest dostępny lokalnie w serwisie.

Jakie progi kontrastu wymaga WCAG?

  • 4,5:1 – zwykły tekst (kryterium 1.4.3, poziom AA, wymagany prawem).
  • 3:1 – duży tekst: od 24 px, albo od ok. 18,7 px (14 pt) pogrubiony.
  • 3:1 – obramowania pól, ikony, przełączniki, wskaźnik fokusu i istotne części wykresów (kryterium 1.4.11).
  • 7:1 i 4,5:1 – poziom AAA dla zwykłego i dużego tekstu (kryterium 1.4.6).

Współczynnik liczymy według wzoru WCAG na podstawie względnej luminancji kolorów. Wynik obcinamy do dwóch miejsc po przecinku, więc 4,499:1 pokażemy jako 4,49:1 – i słusznie uznamy za niespełniające progu 4,5:1.

Wymagania nie obejmują logotypów, tekstu nieaktywnych (wyłączonych) elementów i czysto dekoracyjnych napisów.

Kryteria WCAG związane z kolorem

1.4.3

Kontrast (minimum)

Poziom AA Wymagane prawem

Tekst musi mieć kontrast z tłem co najmniej 4,5:1. Duży tekst (od 24 px, albo od ok. 18,7 px pogrubiony) – co najmniej 3:1.

1.4.6

Kontrast (wzmocniony)

Poziom AAA

Wyższy próg kontrastu: 7:1 dla zwykłego tekstu i 4,5:1 dla dużego.

1.4.11

Kontrast elementów nietekstowych

Poziom AA Wymagane prawem

Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.

1.4.1

Użycie koloru

Poziom A Wymagane prawem

Kolor nie może być jedynym sposobem przekazania informacji – np. zaznaczenia błędu, wyróżnienia linku w tekście czy serii na wykresie.