• PASS
  • FAIL
  • WARN
  • HUMAN

Design-System-Paletten mit deiner KI prüfen

Verbinde deine Farbpalette mit deinem KI-Client, um sofort Barrierefreiheits-Checks durchzuführen. Die KI übernimmt die Kontrastberechnungen für dich.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich meine Markenfarben auf Barrierefreiheit prüfen?

Deine KI nutzt den Color Contrast Checker, um Farbkombinationen gegen WCAG-Richtlinien für verschiedene Textgrößen und Formate zu testen. Du erhältst eine klare Übersicht, welche Paare bestehen oder durchfallen. Das umfasst alles von Hex-Codes bis hin zu spezifischen UI-Komponenten.

Wo jedes Ergebnis landet.

Die Audit-Ergebnisse

Die KI verarbeitet deine Palette und ordnet die Ergebnisse in diese Kategorien ein.

PASS

Konforme Paare

Die KI identifiziert Farbkombinationen, die die WCAG-Standards sowohl für normalen als auch für großen Text erfüllen. Du erhältst eine Liste sicherer Farbkombinationen.

FAIL

Verstöße gegen Barrierefreiheit

Die KI markiert Kombinationen, die die erforderlichen Kontrastverhältnisse unterschreiten. Sie zeigt genau an, welche Farben das Problem verursachen.

WARN

Warnungen bei Grenzfällen

Die KI hebt Farben hervor, die für großen Text ausreichen, aber für kleinen Fließtext nicht bestanden werden. Das hilft dir, subtile Usability-Probleme zu vermeiden.

HUMAN

Design-Entscheidungen

Die KI zeigt auf, wo Farben knapp an der Grenze liegen. Du entscheidest, ob du die Markenfarben anpasst oder die Schriftstärke änderst.

Der Ablauf

Was deine KI tut, sobald die Palette vorliegt.

Die KI nimmt deine Rohdaten der Farben und führt eine Reihe mathematischer Prüfungen durch.

  1. Farben erfassen

    Deine KI liest die Hex-Codes oder Farbarrays aus, die du in deinem Prompt oder deiner Designdatei angibst.

    check_color_contrast

  2. Verhältnisse berechnen

    Die KI führt die Kontrastberechnung für jede von dir angegebene Vordergrund- und Hintergrundkombination durch.

    check_color_contrast

  3. Größen testen

    Das Tool prüft, ob die Farben für Standard-Fließtext im Vergleich zu großen Überschriften funktionieren.

    check_color_contrast

  4. Ergebnisse melden

    Die KI fasst die bestandenen und nicht bestandenen Paare in einer lesbaren Liste für deine Überprüfung zusammen.

    check_color_contrast

Probieren Sie es

Kopiere diese Vorlagen zum Start.

Nutze diese Prompts, um ein Audit zu starten.

Startpunkte

Ersetze den Text in Klammern durch deine tatsächlichen Hex-Codes oder Dateipfade.

colord Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — colord capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "color-contrast-checker-alternative-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
    }
  }
}
In den Chat kopieren04

  • Prüfe den Kontrast für diese Hex-Codes: #FFFFFF und #000000.

  • Prüfe meine Markenpalette aus dieser Figma-Datei auf WCAG AA Konformität.

  • Teste diese Farben auf Barrierefreiheit für großen Text: #333333 und #F5F5F5.

  • Führe eine Kontrastprüfung für meine primären Markenfarben durch, die in dieser JSON-Datei gelistet sind.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Starten Sie hier

Einmalig mit Color Contrast Checker verbinden, dann fragen.

Klicke einfach, um den MCP mit deinem bevorzugten Client zu verbinden. Deine Zugangsdaten bleiben verschlüsselt und du kannst sofort mit dem Audit beginnen.

Color Contrast Checker mit deiner KI verbinden

FAQ

Verhalten der Aufgabe

  • 01

    Kann die KI meine Farben für mich korrigieren?

    Nein. Die KI identifiziert die Fehler, aber du musst die neuen Farbwerte manuell wählen, um die Markenidentität zu wahren.

  • 02

    Wird auf Farbenblindheit geprüft?

    Das Tool konzentriert sich auf Kontrastverhältnisse. Es simuliert keine spezifischen Arten von Sehschwächen.

  • 03

    Kann ich eine komplette Design-System-Datei hochladen?

    Ja. Wenn dein KI-Client die Datei lesen kann, kann die KI die Farbdaten an das Tool weitergeben.

  • 04

    Wird die KI meine Figma-Dateien ändern?

    Nein. Die KI liest die Farbdaten nur aus, um die Prüfung durchzuführen. Sie kann deine Designdateien weder schreiben noch modifizieren.

  • 05

    Werden RGB oder HSL unterstützt?

    Das Tool arbeitet mit Hex-Codes, aber dein KI-Client kann RGB oder HSL vor der Prüfung in Hex umwandeln.

  • Weitere Fragen zum Color Contrast Checker? Die Connector-Seite liefert Antworten. Alle Funktionen des Color Contrast Checker Connectors ansehen

Verbinde colord mit Claude, Cursor, ChatGPT & mehr