Wo KI beim Design danebenliegt

Modul 1: Was KI in deinem Job schon macht

Kursübersicht

Kurzer Check

Rate zuerst, ohne Punktabzug. Ein KI-Banner hat eine hellgraue Überschrift (#AAAAAA) auf Weiß. Es wirkt aufgeräumt. Besteht es die WCAG-Kontrastregel für normalen Text?

WCAG (die Web Content Accessibility Guidelines, Richtlinien für barrierefreie Webinhalte) legt die Kontrastregel fest: Normaler Text braucht „ein Kontrastverhältnis von mindestens 4,5:1“, großer Text 3:1 (W3C). Das Kontrastverhältnis vergleicht die Helligkeit von Text und Hintergrund. #AAAAAA auf Weiß ergibt etwa 2,3:1.

KI-Designs scheitern immer wieder auf dieselben Arten: zu wenig Kontrast, Buchstabensalat in Bildern, zusätzliche Finger und seltsame Details, Farben, die von der Marke abdriften, und „Kundenzitate“, die niemand gesagt hat. Jeder dieser Fehler sieht in Vorschaugröße gut aus.

Ein Beispiel

Vorher und nachher

Eine Zeile aus einer KI-Banner-Spezifikation, vor und nach deiner Prüfung.

KI-Banner

Überschriftfarbe: #AAAAAA auf Weiß (etwa 2,3:1)

Jetzt prüf dieses KI-Banner selbst.

Finde die Fehler

Tipp auf die drei Dinge, die du korrigieren würdest, bevor das rausgeht. Tippst du auf etwas, das stimmt, bekommst du einen Hinweis.

KI-Banner für einen Software-Launch

0 von 3 gefunden

Lücken füllen

Füll die Lücken in deiner Prüfung.

Bevor ein KI-Design rausgeht

Ich prüfe den Textkontrast . Ich lese jedes Wort im Bild . Jedes Zitat muss .

Probier es aus

Deine Schritte, etwa 2 Minuten

0 von 1
  1. 1.Schreib diese Prüfungen auf deine KI-Briefing-Karte: Kontrast, Text bei 100 %, Details, Marke, Zitate. Dann wende sie auf ein KI-Design an.2 Min.

Übung

Frage 1 von 3

Welches Kontrastverhältnis braucht normaler Fließtext nach WCAG-Stufe AA?

KI-Tutor

Stell Fragen zu dieser Lektion und lass dich durch die Aufgabe „Probier es aus“ begleiten. Der Tutor ist Teil von Learn Pro.

Learn Pro ansehen