HomeCasa Prompts

Barrierefreie Dark-Mode-Farbpalette mit WCAG-Kontrastprüfung

Entwickle aus deinen Markenfarben eine Dark-Mode-Palette mit semantischen Tokens, einer WCAG-Kontrasttabelle für jedes Farbpaar, Korrekturen für Fehler und fertigem CSS. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Text · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Design-System-Designer mit Schwerpunkt Farbe und Barrierefreiheit (WCAG 2.2).

Kontext:
- Markenfarben (Hex): {{markenfarben}}
- Produkt: {{produkt}}
- Basisfläche im Dark Mode: {{flaeche}}
- Angestrebte Konformitätsstufe: {{wcag_stufe}}
- Komponenten, die die Palette abdecken muss: {{komponenten}}

Liefergegenstände:
1. Dark-Mode-Prinzipien für dieses Produkt: warum reines Schwarz außer auf OLED-Displays vermieden wird, wie Elevation über hellere Flächen ausgedrückt wird und wie Markenfarben entsättigt werden, damit sie nicht flimmern.
2. Tabelle semantischer Tokens mit hellem und dunklem Wert: Hintergrund, Flächen 1-3, primärer, sekundärer und deaktivierter Text, Rahmen, Primärfarbe mit Zuständen (Hover, Pressed), Fokusring, Erfolg, Warnung, Fehler, Info und die jeweiligen „On“-Farben (Text auf dieser Farbe).
3. Kontrasttabelle je Paar (Text auf Hintergrund, Text auf Flächen, Text auf Primärfarbe, Rahmen und Fokus auf Hintergrund): Verhältnis nach der WCAG-2.x-Formel für relative Leuchtdichte, geltende Anforderung (4,5:1 normaler Text, 3:1 großer Text und Nicht-Text-Komponenten; 7:1 und 4,5:1 bei AAA) und Ergebnis.
4. Für jedes nicht bestandene Paar ein alternativer Wert, der besteht und die Markenwirkung erhält.
5. Diagrammfarben (4-6 Reihen), die auf dunklem Grund unterscheidbar bleiben und nicht nur über den Farbton funktionieren.
6. Umsetzung: CSS Custom Properties, prefers-color-scheme und manueller Umschalter mit gespeicherter Präferenz.

Einschränkungen:
- Zeige die Formel und die Zwischenwerte. Weise deutlich darauf hin, dass die Werte vor der Freigabe mit einem Kontrastprüfer verifiziert werden müssen.
- Vermittle Informationen nie nur über Farbe; schlage Icons oder Begleittext vor.
- Fehlen wichtige Farben (z. B. eine Fehlerfarbe der Marke), frage mich zuerst; gib erfundene Werte nicht als „offiziell“ aus.

Format: Token- und Kontrasttabellen, Liste der Korrekturen und ein CSS-Codeblock.

So verwenden Sie ihn

  1. Füge deine Markenfarben als Hex-Werte ein. 2. Prüfe die Kontrasttabelle und bestätige jedes Verhältnis mit einem Kontrastprüfer. 3. Übernimm die CSS-Variablen ins Projekt und teste die echte Oberfläche im Dark Mode.

Anwendungsbeispiel

Markenfarben: #1E5EFF Primär, #FF7A00 Akzent · Produkt: Banking-App · Fläche: dunkles Blaugrau · Stufe: AA.

Beispielergebnis

Kontrast auf der dunklen Fläche #141B2B

WCAG-2.x-Formel: Verhältnis = (L1 + 0,05) / (L2 + 0,05), mit L = 0,2126 R + 0,7152 G + 0,0722 B nach Linearisierung jedes Kanals. Luminanz der Fläche: L ≈ 0,0111.

PaarL der FarbeVerhältnisAA-AnforderungErgebnis
Haupttext #E6EAF20,820814,3:14,5:1Bestanden
Sekundärtext #A9B3C60,44758,1:14,5:1Bestanden
Primär #1E5EFF als Text0,15503,4:14,5:1Nicht bestanden
Angepasstes Primär #7FA2FF0,37577,0:14,5:1Bestanden
Erfolg #12B76A0,35046,6:14,5:1Bestanden
Weißer Text auf Button #1E5EFF—5,1:14,5:1Bestanden

Korrektur: #7FA2FF für Links und Markentext im Dark Mode verwenden; #1E5EFF nur als Button-Fläche mit weißem Text. Alle Werte vor der Freigabe mit einem Kontrastprüfer verifizieren.

:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
  }
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }

…

Wichtige Fakten

Kategorie
UI/UX-Design · Barrierefreiheit
Ausgabetyp
Text
Niveau
Experte
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Markenfarben (Hex), Produkt, Basisfläche, WCAG-Stufe und Komponenten
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Kann ich den von der KI berechneten Kontrastwerten vertrauen?

Nutze sie als Entwurf. Sprachmodelle können sich bei Berechnungen irren, daher sollte jedes Paar vor dem Livegang mit einem Kontrast-Tool geprüft werden.

Warum kein reines Schwarz als Hintergrund?

Weißer Text auf reinem Schwarz kann Überstrahlung und schnelle Ermüdung verursachen und erschwert die Darstellung von Elevation. Ein sehr dunkles Grau funktioniert meist besser; reines Schwarz lohnt sich vor allem zum Energiesparen auf OLED-Displays.

Wofür ist dieser Prompt gedacht?

Entwickle aus deinen Markenfarben eine Dark-Mode-Palette mit semantischen Tokens, einer WCAG-Kontrasttabelle für jedes Farbpaar, Korrekturen für Fehler und fertigem CSS.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Markenfarben (Hex), Produkt, Basisfläche, WCAG-Stufe und Komponenten). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts