# WCAG-Kontrast in Figma und Canva prüfen
URL: https://pandus.online/de/figma-canva-kontrast-pruefen
Updated: 2026-10-14

So prüfen Sie den WCAG-Farbkontrast in Figma und Canva mit den eingebauten Werkzeugen, was sie übersehen und wie Sie die ganze Markenpalette testen.

Sowohl **Figma** als auch **Canva** können den Farbkontrast direkt in der Designdatei prüfen. In Figma öffnen Sie eine Farbe im Farbwähler und wechseln zur **Barrierefreiheitsansicht** (accessibility view): Sie zeigt das Verhältnis zwischen Ebene und Hintergrund und ob es WCAG AA und AAA erfüllt. In Canva wählen Sie **Datei → Barrierefreiheit** (File → Accessibility → Check design accessibility). Diese Prüfungen finden zu niedrigen Kontrast früh, sehen aber nur ein Farbpaar auf einmal und übersehen Zustände wie Hover und Fokus; testen Sie deshalb zusätzlich die ganze Palette. Die Angaben stammen aus den Hilfeseiten von Figma und Canva, **geprüft am 14. Oktober 2026**.

## Die WCAG-Kontrastschwellen

| Was | Stufe AA | Stufe AAA |
| --- | --- | --- |
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text (etwa 24 px normal oder 18,5 px fett) | 3:1 | 4,5:1 |
| Icons, Rahmen von Eingabefeldern, Fokusindikatoren und andere Bedienelemente (WCAG 1.4.11) | 3:1 | — |

Details und Beispiele finden Sie auf den WCAG-Seiten zu [Kontrast (Minimum)](https://pandus.online/de/wcag/1-4-3-contrast-minimum) und [Nicht-Text-Kontrast](https://pandus.online/de/wcag/1-4-11-non-text-contrast).

## Kontrast in Figma

- **Wo:** Ebene auswählen, ihre Farbe im Farbwähler öffnen und die **Barrierefreiheitsansicht** aufrufen. Die gewählte Ebene ist immer der Vordergrund.
- **Was sie zeigt:** das Verhältnis von 1:1 bis 21:1 sowie AA- und AAA-Ergebnisse für normalen Text, großen Text oder Grafiken; AAA gilt nur für Text.
- **Bei Durchfall:** Neben AA oder AAA erscheint ein Warnsymbol. Wenn Sie es auswählen, springt die Farbe auf den nächstgelegenen Wert, der besteht.
- **Grenzen:** Das Verhältnis vergleicht die Helligkeit zweier Farben; Verläufe, Bilder hinter Text und transparente Ebenen brauchen daher einen zweiten Blick. Figma bietet außerdem einen kostenlosen Kontrastprüfer im Web für zwei Hex-Codes.

## Kontrast in Canva

- **Wo:** In einem Design, das Sie bearbeiten können, unter **Datei → Barrierefreiheit** (File → Accessibility → Check design accessibility). Mit reinem Kommentarzugriff erscheint die Prüfung nicht.
- **Was sie abdeckt:** Farbkontrast und andere häufige Probleme; die Werkzeuge von Canva helfen außerdem bei Alternativtexten für Bilder, Überschriftenstruktur und Lesereihenfolge.
- **Grenzen:** Canva selbst sagt, die Prüfung sei keine Garantie für Barrierefreiheit. Als PDF exportierte Designs brauchen eine eigene Prüfung; siehe [PDF auf Barrierefreiheit prüfen](https://pandus.online/de/pdf-barrierefreiheit-pruefen).

## Was Designwerkzeuge nicht erkennen

- **Zustände.** Hover, Fokus, deaktiviert und Fehler sind oft eigene Frames oder gar nicht gezeichnet. Prüfen Sie, ob der Fokusindikator gegenüber seiner Umgebung 3:1 erreicht.
- **Text auf Bildern und Verläufen.** Das Verhältnis ändert sich über das Bild; testen Sie die hellste und die dunkelste Stelle hinter dem Text.
- **Die ganze Palette.** Eine Farbe, die auf Weiß funktioniert, kann auf dem hellen Grau Ihrer Marke durchfallen. Testen Sie alle Paare auf einmal mit unserem [Paletten-Kontrastprüfer](https://pandus.online/de/farbpalette-kontrast-pruefen).
- **Schriftgröße.** Ob Text als „groß“ zählt, hängt von der tatsächlichen Größe im Browser ab; siehe [Schriftgröße und WCAG](https://pandus.online/de/wcag-schriftgroesse).
- **Alles, was nicht Farbe ist.** Beschriftungen, Überschriften, Tastaturreihenfolge und Alternativtexte werden erst beim Bauen der Seite entschieden.

## Vom Design zur Live-Seite

1. Prüfen Sie einzelne Paare mit unserem [Kontrastrechner](https://pandus.online/de/kontrast-pruefen-wcag), der auch die nächstliegende bestehende Farbe vorschlägt.
2. Prüfen Sie die Markenpalette mit dem [Paletten-Kontrastprüfer](https://pandus.online/de/farbpalette-kontrast-pruefen) und tragen Sie die bestehenden Paare ins Designsystem ein.
3. Sobald die Seite gebaut ist, lassen Sie den [WCAG-Checker](https://pandus.online/de/wcag-check) auf der Staging- oder Live-Seite laufen: Er misst den Kontrast des echten Textes auf dem echten Hintergrund.
4. Interessiert Sie die neuere Kontrastmethode? Lesen Sie [APCA vs. WCAG](https://pandus.online/de/apca-oder-wcag-kontrast); WCAG 2.2 nutzt weiterhin das Verhältnis oben.

Pandus prüft Webseiten, keine Designdateien. Es ist eine automatische Prüfung, kein vollständiges Audit.

## Häufige Fragen

### Hat Figma eine Kontrastprüfung?

Ja. Der Farbwähler hat eine Barrierefreiheitsansicht, die das Kontrastverhältnis zwischen der gewählten Ebene und ihrem Hintergrund zeigt und AA- und AAA-Ergebnisse für normalen Text, großen Text und Grafiken markiert. Außerdem gibt es einen kostenlosen Kontrastprüfer im Web.

### Hat Canva eine Barrierefreiheitsprüfung?

Ja. In einem Design, das Sie bearbeiten können, öffnen Sie Datei, dann Barrierefreiheit, dann die Prüfung der Barrierefreiheit des Designs. Canva meldet Probleme wie den Farbkontrast und hilft bei Alternativtexten, Überschriften und Lesereihenfolge; laut Canva ist das keine Garantie für Barrierefreiheit.

### Welches Kontrastverhältnis verlangt WCAG?

Auf Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text (etwa 24 px oder 18,5 px fett) und 3:1 für Icons, Rahmen von Eingabefeldern und andere Bedienelemente und Grafiken mit Bedeutung.

### Kann Pandus meine Figma- oder Canva-Datei prüfen?

Nein. Pandus prüft Webseiten, sobald sie live oder auf einer Staging-Seite erreichbar sind. Für Designdateien nutzen Sie die eingebauten Werkzeuge, unseren Kontrastrechner für einzelne Paare und den Paletten-Prüfer für alle Markenfarben.

## Quellen

- 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: Hat Figma eine Kontrastprüfung?
A: Ja. Der Farbwähler hat eine Barrierefreiheitsansicht, die das Kontrastverhältnis zwischen der gewählten Ebene und ihrem Hintergrund zeigt und AA- und AAA-Ergebnisse für normalen Text, großen Text und Grafiken markiert. Außerdem gibt es einen kostenlosen Kontrastprüfer im Web.

Q: Hat Canva eine Barrierefreiheitsprüfung?
A: Ja. In einem Design, das Sie bearbeiten können, öffnen Sie Datei, dann Barrierefreiheit, dann die Prüfung der Barrierefreiheit des Designs. Canva meldet Probleme wie den Farbkontrast und hilft bei Alternativtexten, Überschriften und Lesereihenfolge; laut Canva ist das keine Garantie für Barrierefreiheit.

Q: Welches Kontrastverhältnis verlangt WCAG?
A: Auf Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text (etwa 24 px oder 18,5 px fett) und 3:1 für Icons, Rahmen von Eingabefeldern und andere Bedienelemente und Grafiken mit Bedeutung.

Q: Kann Pandus meine Figma- oder Canva-Datei prüfen?
A: Nein. Pandus prüft Webseiten, sobald sie live oder auf einer Staging-Seite erreichbar sind. Für Designdateien nutzen Sie die eingebauten Werkzeuge, unseren Kontrastrechner für einzelne Paare und den Paletten-Prüfer für alle Markenfarben.