Frontend und Mobile

Farb- und Barrierefreiheits-Tools

Farbarbeit im Web teilt sich in zwei Aufgaben: zusammenpassende Farben wählen und sicherstellen, dass sie für alle Betrachter funktionieren. Eine Designfarbe zwischen Formaten umrechnen, aus einer Basisfarbe eine Palette aus Tönen und Harmonien bauen und prüfen, ob Text vor seinem Hintergrund lesbar bleibt, sind einzelne Aufgaben, die in fast jeder Oberfläche vorkommen – und ein Fehler dabei zeigt sich sofort nach dem Launch.

Farbraum-Konverter zeigt eine Farbe gleichzeitig in sieben Formaten, darunter HEX, RGB, HSL, HSV, CMYK, Lab und OKLCH, sodass du beim Umrechnen zwischen Design-Tools nicht rätst. Für Barrierefreiheit prüft Kontrast-Checker Vordergrund-Hintergrund-Paare gegen WCAG-Schwellenwerte, während APCA Kontrastrechner das neuere APCA-Modell für eine genauere Einschätzung der Lesbarkeit anwendet. Farbenblindheit-Simulator vergleicht Farben und Bilder nebeneinander unter simulierten Sehmodellen und findet Palettenentscheidungen, die für farbenblinde Nutzer scheitern.

5 Tools

Alle Color & Accessibility-Tools

FAQ zu Color & Accessibility-Tools

Was unterscheidet WCAG-Kontrast von APCA?

Der WCAG-Kontrastwert ist eine einfache Luminanzformel, die helle und dunkle Schrift ungleich behandelt und die Wahrnehmung nicht gut abbildet. APCA modelliert wahrgenommenen Kontrast genauer. Kontrast-Checker deckt die WCAG-Schwellenwerte ab, und APCA Kontrastrechner wendet das neuere APCA-Modell auf dasselbe Farbpaar an.

Wie prüfe ich, ob meine Farbpalette für farbenblinde Nutzer funktioniert?

Das Simulieren von Sehschwächen ist der einzige zuverlässige Weg, da Farbenblindheit die Farbwahrnehmung auf eine Weise verändert, die am Original selbst nicht sichtbar ist. Farbenblindheit-Simulator vergleicht Farben und ganze Bilder nebeneinander unter mehreren simulierten Sehmodellen, statt nur einzelne Werte zu prüfen.

Wann sollte ich OKLCH statt HSL verwenden?

OKLCH ist auf wahrnehmungsgleiche Abstände ausgelegt, eine Änderung der Helligkeit verschiebt also nicht die wahrgenommene Sättigung, wie es bei HSL manchmal passiert. Farbraum-Konverter zeigt dieselbe Farbe in OKLCH neben HEX, RGB, HSL, HSV, CMYK und Lab, sodass du direkt vergleichen kannst.