Kategorien

← View All Tools

Barrierefreier Farbkontrast-Pruefer

Prueft Farbpaare nach WCAG 2.1 AA und AAA und macht Anpassungsvorschlaege

Gut fuer Designsysteme, Markenpaletten und UI-Themen mit automatischen Kontrastbewertungen.

Beispielergebnisse

1 Beispiele

Eine Markenpalette fuer WCAG AA pruefen

Prueft alle Vordergrund-Hintergrund-Kombinationen und zeigt, welche Markenfarben angepasst werden muessen

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
Eingabeparameter anzeigen
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

Wichtige Fakten

Kategorie
Design
Eingabetypen
textarea, select, checkbox
Ausgabetyp
json
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der barrierefreie Farbkontrast-Prüfer analysiert komplette Farbpaletten und Designsysteme auf ihre Konformität mit den WCAG 2.1 Richtlinien. Durch die automatische Prüfung aller möglichen Farbkombinationen auf AA- oder AAA-Standards identifizieren Sie schnell problematische Kontraste und erhalten konkrete Anpassungsvorschläge für ein inklusives Design.

Wann verwenden

  • •Beim Erstellen oder Überarbeiten von Corporate-Design-Richtlinien und Markenpaletten.
  • •Vor dem Launch einer neuen Website oder App, um die digitale Barrierefreiheit (Accessibility) sicherzustellen.
  • •Bei der Definition von UI-Themes (z. B. Light und Dark Mode) innerhalb eines Designsystems.

So funktioniert es

  • •Fügen Sie Ihre Farbpalette im Format 'Name: #Hexcode' zeilenweise in das Textfeld ein.
  • •Wählen Sie das gewünschte WCAG-Ziel aus (z. B. AA für normalen Text mit einem Mindestkontrast von 4,5:1).
  • •Entscheiden Sie optional, ob auch Kombinationen der gleichen Farbe geprüft werden sollen.
  • •Das Tool berechnet alle Kontrastwerte und gibt einen JSON-Bericht mit bestandenen Paaren und Verbesserungsvorschlägen aus.

Anwendungsfälle

Auditierung einer bestehenden Website-Farbpalette auf gesetzliche Barrierefreiheitsstandards.
Automatisierte Überprüfung von Vordergrund- und Hintergrundfarben in neuen UI-Komponenten.
Generierung eines Kontrast-Reports für Kundenpräsentationen im Webdesign.

Beispiele

1. Überprüfung einer neuen Markenpalette auf WCAG AA

UI/UX Designer
Hintergrund
Ein Designteam hat neue Markenfarben definiert und muss sicherstellen, dass diese im Web barrierefrei einsetzbar sind.
Problem
Die manuelle Prüfung aller möglichen Farbkombinationen ist fehleranfällig und zeitaufwendig.
Verwendung
Fügen Sie die Markenfarben in das Textfeld ein und setzen Sie das WCAG-Ziel auf 'AA Normal Text (4.5:1)'.
Beispielkonfiguration
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
Ergebnis
Ein JSON-Bericht zeigt, dass 4 von 12 Kombinationen durchfallen (z. B. brand-secondary auf surface), sodass das Team diese gezielt anpassen kann.

2. Audit eines Dark Mode Themes für AAA-Konformität

Frontend-Entwickler
Hintergrund
Eine Behörden-Website muss höchste Barrierefreiheitsstandards (WCAG AAA) für ihren neuen Dark Mode erfüllen.
Problem
Es muss sichergestellt werden, dass der helle Text auf den dunklen Hintergrundflächen einen Kontrast von mindestens 7:1 aufweist.
Verwendung
Geben Sie die Dark-Mode-Farbwerte ein und wählen Sie 'AAA Normal Text (7:1)' als Ziel.
Beispielkonfiguration
dark-bg: #121212
card-bg: #1E1E1E
primary-text: #E0E0E0
accent: #BB86FC
Ergebnis
Das Tool bestätigt, welche Text-Hintergrund-Paare den strengen 7:1 Kontrast erreichen und warnt bei zu schwachen Akzentfarben.

Mit Samples testen

design
Farbcode-Beispiele
Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests
title token color
sample
Storybook Beispiele
Umfassende Storybook Beispiele für Komponentenentwicklung, Testing, Dokumentation und Design-System-Management
keywords design,system
sample
Pfad-Analyzer-Beispiele
Umfassende Sammlung von Dateisystempfaden aus Windows, Linux und macOS für Pfadanalyse und -tests
task analyze
sample
SVG Beispiele
Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren
keywords design
sample

Verwandte Hubs

Design-Convert-Tools
Entdecken Sie 98 design-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Design-Generate-Tools
Entdecken Sie 19 design-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Validation-Validate-Tools
Entdecken Sie 16 validation-Tools für validate-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

Was bedeuten die WCAG-Level AA und AAA?

WCAG steht für Web Content Accessibility Guidelines. Das Level AA erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text, während das strengere AAA-Level 7:1 verlangt.

Welches Format muss ich für die Eingabe der Farben verwenden?

Geben Sie die Farben zeilenweise im Format 'Name: #Hexcode' ein, zum Beispiel 'Hintergrund: #FFFFFF' oder 'Primär: #1D4ED8'.

Warum sollte ich meine Farbpalette auf Kontrast prüfen?

Ein ausreichender Farbkontrast stellt sicher, dass Texte für Menschen mit Sehschwächen gut lesbar sind und erfüllt gesetzliche Anforderungen zur digitalen Barrierefreiheit.

Was passiert, wenn eine Farbkombination durchfällt?

Das Tool listet die fehlgeschlagenen Paare im JSON-Ergebnis auf und gibt Hinweise, welche Farben angepasst werden müssen, um den Zielwert zu erreichen.

Kann ich auch große Texte (Large Text) prüfen?

Ja, Sie können im Dropdown-Menü spezielle Ziele für großen Text auswählen, da hier geringere Kontrastanforderungen gelten (z. B. 3:1 für AA Large Text).

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/accessible-color-palette-contrast-checker

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
paletteInput textarea Ja -
minimumTarget select Nein -
includeSelfPairs checkbox Nein -

Antwortformat

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON-Daten: JSON-Daten

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "Prueft Farbpaare nach WCAG 2.1 AA und AAA und macht Anpassungsvorschlaege",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]