Pruefer fuer Farbseh-Barrierefreiheit

Misst WCAG-Kontrast, simuliert Farbsehstoerungen und markiert optional schwache Bildbereiche.

Dieses Tool bewertet sowohl die Kontrast-Konformitaet als auch, wie sich ein Farbpaar fuer Nutzer mit verschiedenen Farbsehstoerungen verhaelt.

Bedeutung der Badges:

  • AA normal: zeigt, ob das Kontrastverhaeltnis WCAG AA fuer normal grossen Text erfuellt. Der Grenzwert ist 4.5:1.
  • AAA normal: zeigt, ob das Kontrastverhaeltnis WCAG AAA fuer normal grossen Text erfuellt. Der Grenzwert ist 7:1.

Warum das wichtig ist:

  • "Normal" meint normalen Fliesstext, kleine Labels und den meisten ueblichen UI-Text.
  • Grosser Text hat niedrigere WCAG-Schwellen: AA large besteht ab 3:1, AAA large ab 4.5:1.
  • Ein Farbpaar kann also AAA normal verfehlen und dennoch fuer grosse Ueberschriften oder fetten Anzeigetext akzeptabel sein.

Felder:

  • Vordergrundfarbe: Text-, Icon- oder Haupt-UI-Farbe im Vordergrund
  • Hintergrundfarbe: die dahinterliegende Flaechenfarbe
  • Designbild: optionaler Screenshot zur Analyse lokaler Bereiche mit zu wenig Kontrast
  • WCAG-Stufe: bestimmt den Schwellenwert, nach dem Bildbereiche markiert werden

Ergebnis lesen:

  • Die Karten Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia zeigen das Farbpaar unter jeder Simulation.
  • Das Kontrastverhaeltnis wird nach jeder Simulation neu berechnet, damit sichtbar wird, ob ein Paar ausserhalb normaler Sicht problematisch wird.
  • Die Screenshot-Analyse markiert Kacheln, deren lokaler Kontrast unter den gewaehlten WCAG-Schwellenwert faellt.

Beispielergebnisse

1 Beispiele

Button-Palette auf Farbseh-Barrierefreiheit pruefen

Vergleicht Farben per WCAG und Simulationen vor der finalen UI-Themenwahl.

Color vision accessibility report
Eingabeparameter anzeigen
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" }

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/webp

Wichtige Fakten

Kategorie
Design & Farbe
Eingabetypen
color, file, select
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Dieser Prüfer für Farbseh-Barrierefreiheit misst das WCAG-Kontrastverhältnis von Farbkombinationen und simuliert, wie diese für Menschen mit verschiedenen Farbsehschwächen wirken. Zusätzlich können Sie ein Designbild hochladen, um lokale Bereiche mit zu geringem Kontrast automatisch markieren zu lassen und so die Barrierefreiheit Ihrer Benutzeroberflächen sicherzustellen.

Wann verwenden

  • •Wenn Sie neue Farbpaletten für Websites oder Apps auf WCAG-Konformität prüfen möchten.
  • •Wenn Sie sicherstellen müssen, dass Texte und Icons auch für Nutzer mit Farbfehlsichtigkeit (z. B. Rot-Grün-Schwäche) lesbar bleiben.
  • •Wenn Sie Screenshots von Benutzeroberflächen auf lokale Kontrastprobleme untersuchen wollen, bevor das Design in die Entwicklung geht.

So funktioniert es

  • •Geben Sie die gewünschte Vordergrundfarbe (z. B. für Text) und Hintergrundfarbe als Hex-Code ein.
  • •Wählen Sie optional die WCAG-Stufe (AA oder AAA) und laden Sie ein Designbild hoch, um eine detaillierte Bildanalyse durchzuführen.
  • •Das Tool berechnet das Kontrastverhältnis und zeigt eine Vorschau der Farben unter verschiedenen Sehbedingungen wie Protanopie oder Achromatopsie.
  • •Bei hochgeladenen Bildern werden Bereiche, die den gewählten WCAG-Schwellenwert unterschreiten, visuell hervorgehoben.

Anwendungsfälle

Überprüfung von Button-Farben und Texten auf ausreichenden Kontrast für barrierefreies Webdesign.
Analyse von UI-Mockups, um schwer lesbare Bereiche in komplexen Layouts frühzeitig zu erkennen.
Anpassung von Corporate-Design-Farben, um sicherzustellen, dass sie für alle Nutzergruppen zugänglich sind.

Beispiele

1. Button-Palette auf Farbseh-Barrierefreiheit prüfen

UI-Designer
Hintergrund
Ein Designer möchte eine neue primäre Button-Farbe für einen Webshop festlegen.
Problem
Es muss sichergestellt werden, dass der weiße Text auf dem dunkelgrauen Button auch für Nutzer mit Farbsehschwäche gut lesbar ist und WCAG AA erfüllt.
Verwendung
Geben Sie `#ffffff` als Vordergrundfarbe und `#1f2937` als Hintergrundfarbe ein und wählen Sie die WCAG-Stufe 'AA'.
Beispielkonfiguration
Vordergrundfarbe: #ffffff
Hintergrundfarbe: #1f2937
WCAG-Stufe: AA
Ergebnis
Das Tool bestätigt, dass der Kontrast für normalen Text ausreicht und zeigt, wie der Button bei verschiedenen Farbsehstörungen aussieht.

2. Dashboard-Screenshot auf Kontrastprobleme analysieren

Frontend-Entwickler
Hintergrund
Ein Entwickler hat ein neues Dashboard-Layout umgesetzt und möchte es vor dem Release auf Barrierefreiheit testen.
Problem
In komplexen Dashboards können bestimmte Text-Hintergrund-Kombinationen unbemerkt zu wenig Kontrast aufweisen.
Verwendung
Laden Sie den Screenshot des Dashboards hoch und setzen Sie die WCAG-Stufe auf 'AA'.
Beispielkonfiguration
Designbild: dashboard.png
WCAG-Stufe: AA
Ergebnis
Das Tool analysiert das Bild und markiert automatisch alle Kacheln und Bereiche, deren lokaler Kontrast den Wert von 4,5:1 unterschreitet.

Mit Samples testen

image, png, jpg
Windows C++ Bildverarbeitung Beispiele
Windows C++ Bildverarbeitungsbeispiele einschließlich Bild-Laden/Speichern, Größenänderung und Formatkonvertierung mit Windows Imaging Component
preferred input family image
image
Web Rust Bildverarbeitungsbeispiele
Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
preferred input family image
image
Bildverarbeitung macOS Objective-C - Beispiele
macOS Objective-C Bildverarbeitungsbeispiele einschließlich Bild-Lesen/Schreiben, Bild-Skalierung und Formatkonvertierung
preferred input family image
image
Web Python Bildverarbeitung Beispiele
Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung
preferred input family image
image

Verwandte Hubs

Image-Convert-Tools
Entdecken Sie 100 image-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Tools
Entdecken Sie 40 image-Tools für utility-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-Stufen AA und AAA?

WCAG AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text, während AAA strenger ist und 7:1 verlangt. Für großen Text gelten niedrigere Schwellenwerte (3:1 bzw. 4,5:1).

Welche Arten von Farbfehlsichtigkeit werden simuliert?

Das Tool simuliert Protanopie (Rotschwäche), Deuteranopie (Grünschwäche), Tritanopie (Blauschwäche) und Achromatopsie (vollständige Farbenblindheit).

Warum ändert sich das Kontrastverhältnis bei den Simulationen?

Farben wirken für Menschen mit Farbsehschwächen anders, was den wahrgenommenen Kontrast verringern kann. Das Tool berechnet den Kontrast für jede Simulation neu, um diese Effekte aufzuzeigen.

Welche Bildformate werden für die Design-Analyse unterstützt?

Sie können Screenshots oder Mockups in den Formaten PNG, JPEG und WebP hochladen.

Was bedeutet 'Normal' bei der Textgröße?

'Normal' bezieht sich auf Standard-Fließtext, kleine Labels und die meisten üblichen UI-Texte, für die strengere Kontrastregeln gelten als für große Überschriften.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/color-vision-accessibility-checker

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
foreground color Ja -
background color Ja -
designImage file (Upload erforderlich) Nein -
wcagLevel select Nein -

Dateitypparameter müssen erst über POST /upload/color-vision-accessibility-checker hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

MCP-Dokumentation

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

{
  "mcpServers": {
    "elysiatools-color-vision-accessibility-checker": {
      "name": "color-vision-accessibility-checker",
      "description": "Misst WCAG-Kontrast, simuliert Farbsehstoerungen und markiert optional schwache Bildbereiche.",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-vision-accessibility-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.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

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