# Sprawdzanie kontrastu WCAG w Figma i Canva
URL: https://pandus.online/pl/kontrast-figma-canva
Updated: 2026-10-14

Jak sprawdzić kontrast kolorów WCAG w Figma i Canva wbudowanymi narzędziami, czego nie wychwytują i jak przetestować całą paletę marki przed startem.

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. 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)](https://pandus.online/pl/wcag/1-4-3-contrast-minimum) i [kontraście elementów nietekstowych](https://pandus.online/pl/wcag/1-4-11-non-text-contrast).

## 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](https://pandus.online/pl/sprawdzanie-dostepnosci-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](https://pandus.online/pl/sprawdzanie-kontrastu-palety).
- **Rozmiar czcionki.** To, czy tekst jest „duży”, zależy od jego rzeczywistego rozmiaru w przeglądarce; zobacz [rozmiar czcionki a WCAG](https://pandus.online/pl/wcag-czcionka-minimalny-rozmiar).
- **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

1. Sprawdzaj pojedyncze pary naszym [sprawdzaniem kontrastu](https://pandus.online/pl/sprawdzanie-kontrastu-kolorow), które podpowiada też najbliższy kolor spełniający wymagania.
2. Sprawdź paletę marki [sprawdzaniem kontrastu palety](https://pandus.online/pl/sprawdzanie-kontrastu-palety) i zapisz przechodzące pary w systemie projektowym.
3. Gdy strona jest gotowa, uruchom [sprawdzanie WCAG](https://pandus.online/pl/wcag-checker) na stronie testowej lub działającej: mierzy kontrast rzeczywistego tekstu na rzeczywistym tle.
4. Ciekawi Cię nowsza metoda kontrastu? Przeczytaj [APCA a WCAG](https://pandus.online/pl/apca-czy-wcag-kontrast); 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

Q: Czy Figma ma narzędzie do sprawdzania kontrastu?
A: 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.

Q: Czy Canva ma sprawdzanie dostępności?
A: 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.

Q: Jakiego współczynnika kontrastu wymaga WCAG?
A: 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.

Q: Czy Pandus sprawdzi mój plik z Figma lub Canva?
A: 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.