[ Narzędzie online ]
Kalkulator
kontrastuWCAG
Sprawdź kontrast kolorów tekstu i tła zgodnie z wytycznymi WCAG 2.1.
Wybierz kolory
Współczynnik kontrastu
11.50:1
Wyniki WCAG 2.1
Popularne kombinacje dostępne
Podgląd na żywo
Nagłówek strony internetowej
To jest przykładowy tekst treści strony internetowej. Czytelność tekstu zależy od kontrastu między kolorem tekstu a kolorem tła. Profesjonalne projektowanie stron internetowych zawsze uwzględnia dostępność zgodną z WCAG 2.1.
Mały tekst (14px) — np. podpisy, stopka strony, dodatkowe informacje. Wymaga wyższego kontrastu niż duży tekst — minimum 4,5:1 dla WCAG AA.
Tekst
Tło
Doskonały kontrast — spełnia WCAG AAA
[ Dostępność ]
Przewodnikpo
standardachWCAG
Zrozum poziomy dostępności i wymagania kontrastowe dla stron internetowych.
Poziom minimalny
WCAG Level A
Najbardziej podstawowe wymagania dostępności. Dotyczy głównie struktury HTML i nawigacji klawiaturą. Kontrast kolorów nie jest wymagany na tym poziomie, ale brak dostępności jest poważną barierą dla użytkowników z niepełnosprawnościami.
Standard w projektowaniu stron
WCAG Level AA
Poziom AA to standard wymagany w Polsce i UE dla stron publicznych. Wymaga kontrastu min. 4,5:1 dla tekstu normalnego i 3:1 dla dużego tekstu (18px+ lub 14px bold). To minimum przy profesjonalnym tworzeniu stron internetowych.
Nagłówki i elementy UI
AA — Duży tekst
Dla tekstu o rozmiarze 18px lub większego (albo 14px pogrubionego) wymagany kontrast to 3:1. Dotyczy też graficznych elementów interfejsu, takich jak ikony i przyciski, które przekazują informację.
Najwyższa dostępność
WCAG Level AAA
Poziom AAA to najwyższy standard dostępności — kontrast 7:1 dla tekstu normalnego i 4,5:1 dla dużego. Trudny do osiągnięcia dla wszystkich elementów, ale warto do niego dążyć przy tworzeniu stron dla szerokiego grona odbiorców.
Nagłówki z najwyższą dostępnością
AAA — Duży tekst
Dla dużego tekstu (18px+) poziom AAA wymaga kontrastu 4,5:1 — dokładnie tyle, ile dla normalnego tekstu na poziomie AA. Strony spełniające AAA są w pełni dostępne dla osób z najpoważniejszymi dysfunkcjami wzroku.
Przyciski, formularze, ikony
Elementy interfejsu
Grafy, ikonki, obramowania formularzy i inne graficzne elementy UI też podlegają wymogom WCAG AA (3:1). Przy projektowaniu stron internetowych pamiętaj, by przyciski CTA, pola formularzy i ikony miały wystarczający kontrast.
[ Web Accessibility ]
Wskazówki
dostępności
Praktyczne porady dotyczące dostępności przy tworzeniu stron internetowych.
01
Nie polegaj tylko na kolorze
Kolor nie może być jedynym nośnikiem informacji. Przy tworzeniu stron internetowych używaj dodatkowych wskazówek wizualnych: ikon, podkreśleń, tekstu. Błędy formularzy oznaczaj ikoną i tekstem — nie tylko czerwoną obwódką.
02
Testuj w trybie szarości
Sprawdź swoją stronę internetową w trybie skali szarości. Jeśli wszystkie elementy są nadal czytelne i zrozumiałe bez kolorów, dostępność jest dobra. To prosty test, który ujawnia problemy z kontrastem i oznakowaniem.
03
Pamiętaj o focus states
Elementy interaktywne (linki, przyciski, pola formularzy) muszą mieć widoczny stan focus z kontrastem min. 3:1. Projektowanie stron internetowych bez widocznego focusu wyklucza użytkowników nawigujących klawiaturą.
04
Dostosuj rozmiar tekstu
Minimalny rozmiar tekstu na stronie internetowej to 16px dla treści głównej. Tekst powinien dać się powiększyć do 200% bez utraty treści. Zbyt mały tekst wymaga wyższego kontrastu i pogarsza doświadczenie użytkownika.
05
Sprawdź dark mode
Jeśli Twoja strona www wspiera tryb ciemny, pamiętaj o przetestowaniu kontrastu w obu wariantach. Kolory, które działają na jasnym tle, mogą nie spełniać WCAG na ciemnym. Kalkulator kontrastu WCAG pomoże to zweryfikować.
06
Audyt dostępności w Lighthouse
Google Lighthouse (wbudowany w Chrome DevTools) automatycznie sprawdza dostępność strony. Niska ocena accessibility wpływa na ogólną jakość strony i może mieć pośredni wpływ na pozycjonowanie w Google.
Chcesz, żeby Twoja strona internetowa była w pełni dostępna i spełniała standardy WCAG? W Studio Kalmus zajmujemy się projektowaniem stron internetowych z pełną dbałością o dostępność.
Dostępność kolorów w projektowaniu stron internetowych
Kontrast kolorów to jeden z kluczowych elementów dostępności cyfrowej, który powinien być brany pod uwagę już na etapie projektowania stron internetowych. Wytyczne WCAG (Web Content Accessibility Guidelines) w wersji 2.1 zostały opracowane przez W3C i są uznawane za globalny standard dostępności treści cyfrowych. W Polsce i Unii Europejskiej dostępność cyfrowa stron publicznych jest regulowana prawnie przez Dyrektywę UE 2016/2102.
Przy tworzeniu stron internetowych dla firm i instytucji poziom WCAG AA jest standardowym wymogiem. Oznacza to, że tekst normalny musi mieć kontrast min. 4,5:1, a duży tekst (powyżej 18px) i elementy interfejsu — min. 3:1. Spełnienie tych wymogów to nie tylko kwestia prawna, ale też wyraz szacunku do użytkowników — według WHO ok. 2,2 miliarda ludzi ma jakąś dysfunkcję widzenia.
Nasz Kalkulator Kontrastu WCAG pozwala w ułamku sekundy sprawdzić, czy wybrana para kolorów spełnia wymagania poziomu AA lub AAA. Wystarczy wybrać kolor tekstu i tła, by od razu zobaczyć współczynnik kontrastu, podgląd na żywo i szczegółowe wyniki dla wszystkich czterech kryteriów WCAG. Narzędzie korzysta z oficjalnego algorytmu obliczania luminancji względnej zdefiniowanego w standardzie WCAG 2.1 (wzór z korekcją gamma i kanałami sRGB).
W Studio Kalmus dostępność stron internetowych to standard, nie opcja. Każda strona, którą tworzymy, jest testowana pod kątem WCAG AA na etapie projektowania i wdrożenia. Jeśli zależy Ci na stronie internetowej dostępnej dla wszystkich — sprawdź naszą ofertę projektowania stron internetowych i tworzenia stron WordPress.
[ FAQ ]
Częstozadawane
pytania
Odpowiedzi na najczęstsze pytania o kontrast i dostępność stron internetowych.
Zamów stronę spełniającą standardy WCAG AA
W Studio Kalmus tworzymy strony internetowe dostępne dla wszystkich użytkowników. Projektowanie stron z myślą o dostępności to dla nas standard — od doboru kolorów, przez semantyczny HTML, po testy Lighthouse. Daj nam znać o swoim projekcie.