Sprawdzanie kontrastu WCAG w Figma i Canva

Zarówno Figma, jak i Canva potrafią sprawdzić kontrast kolorów wewnątrz pliku projektu. W Figma otwórz kolor w próbniku kolorów i przełącz się na jego widok dostępności (accessibility view): pokazuje on współczynnik między warstwą a tłem oraz to, czy spełnia WCAG AA i AAA.

Zaktualizowano 14 października 2026 · 4 min czytania · Jak piszemy i sprawdzamy nasze poradniki

W Canva wybierz Plik → Dostępność (File → Accessibility → Check design accessibility). Te sprawdzenia wychwytują zbyt niski kontrast na wczesnym etapie, ale oceniają jedną parę kolorów naraz i pomijają stany takie jak hover i fokus, więc przetestuj też całą paletę. Informacje pochodzą ze stron pomocy Figma i Canva, sprawdzone 14 października 2026 r.

Progi kontrastu WCAG

Co	Poziom AA	Poziom AAA
Zwykły tekst	4,5:1	7:1
Duży tekst (ok. 24 px zwykły lub 18,5 px pogrubiony)	3:1	4,5:1
Ikony, obramowania pól, wskaźniki fokusu i inne elementy interfejsu (WCAG 1.4.11)	3:1	—

Szczegóły i przykłady znajdziesz na stronach WCAG o kontraście (minimum) i kontraście elementów nietekstowych.

Kontrast w Figma

Gdzie: zaznacz warstwę, otwórz jej kolor w próbniku kolorów i przejdź do widoku dostępności. Zaznaczona warstwa jest zawsze pierwszym planem.
Co pokazuje: współczynnik od 1:1 do 21:1 oraz wyniki AA i AAA dla zwykłego tekstu, dużego tekstu lub grafiki; AAA dotyczy tylko tekstu.
Gdy test nie przechodzi: obok AA lub AAA pojawia się ikona ostrzeżenia. Po jej wybraniu kolor przesuwa się do najbliższej wartości, która przechodzi.
Ograniczenia: współczynnik porównuje jasność dwóch kolorów, więc gradienty, obrazy pod tekstem i przezroczyste warstwy wymagają drugiego spojrzenia. Figma oferuje też bezpłatne narzędzie internetowe do sprawdzania dwóch kodów hex.

Kontrast w Canva

Gdzie: w projekcie, który możesz edytować, Plik → Dostępność (File → Accessibility → Check design accessibility). Przy dostępie tylko do komentowania sprawdzanie się nie pojawia.
Co obejmuje: kontrast kolorów i inne częste problemy; narzędzia Canvy pomagają też dodawać teksty alternatywne do obrazów, porządkować nagłówki i ustawiać kolejność czytania.
Ograniczenia: sama Canva zastrzega, że sprawdzenie nie jest gwarancją dostępności. Projekty wyeksportowane do PDF wymagają osobnej kontroli; zobacz jak sprawdzić dostępność PDF.

Czego narzędzia projektowe nie wychwytują

Stany. Hover, fokus, stan wyłączony i błąd to często osobne ramki albo wcale nie są narysowane. Sprawdź, czy wskaźnik fokusu ma 3:1 względem otoczenia.
Tekst na obrazach i gradientach. Współczynnik zmienia się na całym obrazie; przetestuj najjaśniejsze i najciemniejsze miejsce pod tekstem.
Cała paleta. Kolor, który działa na bieli, może nie przejść na jasnej szarości Twojej marki. Przetestuj wszystkie pary naraz naszym sprawdzaniem kontrastu palety.
Rozmiar czcionki. To, czy tekst jest „duży”, zależy od jego rzeczywistego rozmiaru w przeglądarce; zobacz rozmiar czcionki a WCAG.
Wszystko, co nie jest kolorem. Etykiety, nagłówki, kolejność klawiatury i teksty alternatywne rozstrzygają się dopiero przy budowie strony.

Od projektu do działającej strony

Sprawdzaj pojedyncze pary naszym sprawdzaniem kontrastu, które podpowiada też najbliższy kolor spełniający wymagania.
Sprawdź paletę marki sprawdzaniem kontrastu palety i zapisz przechodzące pary w systemie projektowym.
Gdy strona jest gotowa, uruchom sprawdzanie WCAG na stronie testowej lub działającej: mierzy kontrast rzeczywistego tekstu na rzeczywistym tle.
Ciekawi Cię nowsza metoda kontrastu? Przeczytaj APCA a WCAG; WCAG 2.2 nadal używa współczynnika podanego wyżej.

Pandus sprawdza strony internetowe, nie pliki projektowe. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Czy Figma ma narzędzie do sprawdzania kontrastu?

Tak. Próbnik kolorów ma widok dostępności, który pokazuje współczynnik kontrastu między wybraną warstwą a jej tłem i oznacza wyniki AA i AAA dla zwykłego tekstu, dużego tekstu i grafiki. Figma udostępnia też bezpłatne narzędzie internetowe do sprawdzania kontrastu.

Czy Canva ma sprawdzanie dostępności?

Tak. W projekcie, który można edytować, wybierz Plik, potem Dostępność, potem sprawdzenie dostępności projektu. Canva wskazuje problemy, takie jak kontrast kolorów, i pomaga z tekstami alternatywnymi, nagłówkami i kolejnością czytania; według Canvy nie jest to gwarancja dostępności.

Jakiego współczynnika kontrastu wymaga WCAG?

Na poziomie AA: 4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu (ok. 24 px lub 18,5 px pogrubionego) oraz 3:1 dla ikon, obramowań pól formularza i innych elementów interfejsu oraz grafik niosących znaczenie.

Czy Pandus sprawdzi mój plik z Figma lub Canva?

Nie. Pandus sprawdza strony internetowe, gdy są już online lub na stronie testowej. Do plików projektowych użyj wbudowanych narzędzi, naszego sprawdzania kontrastu dla pojedynczych par i narzędzia do palet dla wszystkich kolorów marki.

Źródła

Figma Help Center, Apply paints with the color picker (accessibility view): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
Figma, Color Contrast Checker: https://www.figma.com/color-contrast-checker/
Canva Help Center, Using design accessibility: https://www.canva.com/help/using-design-accessibility/
W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
W3C, Understanding WCAG 2.2 — 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html