1
Hex- & RGB-Änderungen
Erkennt Änderungen in Hexadezimal- und RGB-Farbwerten, einschließlich Kurzschreibweise und Alphakanal-Variationen.
40 Testfälle
Farben & Themes
Farbe ist eine der bedeutungsschwersten visuellen Eigenschaften einer Oberfläche: Sie trägt das Corporate Design, signalisiert die Hauptaktionen und strukturiert die Lesehierarchie. Eine Farbnuance, die auf einem Conversion-Button um wenige Punkte abdriftet, ist eine visuelle Regression, die funktionalen Tests verborgen bleibt, von Ihren Besuchern aber sofort als Qualitätsverlust wahrgenommen wird. Auf Business-Oberflächen — Banken-Dashboards, ERP-Systeme, Admin-Backoffices — kann ein inkonsistenter Farbcode sogar zu Fehlinterpretationen der Daten führen. In der Praxis treten diese Regressionen fast immer in denselben Kontexten auf: Überarbeitung eines Design Systems, Wechsel des CSS-Frameworks, Aktualisierung einer globalen Variablen wie --brand-primary, Einführung eines schlecht propagierten Dark-Mode-Themes oder stille Konvertierung eines Farbformats in ein anderes während eines Builds. CSS Custom Properties verstärken das Problem: Die Änderung eines einzelnen Tokens betrifft mitunter Dutzende Komponenten auf Hunderten Seiten, und kein Entwickler kann die vollständige Abhängigkeitskartierung im Kopf behalten. Delta-QA löst diese Aufgabe, indem es Referenz-Screenshots und neue Aufnahmen Pixel für Pixel vergleicht und anschließend eine perzeptuelle Analyse anwendet, die Renderrauschen toleriert, aber bei jeder signifikanten Farbtonabweichung Alarm schlägt. Das Werkzeug erkennt RGB-, HSL-, OKLCH-Formate sowie moderne CSS-Variablen und meldet sowohl komplette Paletten-Wechsel als auch subtile Drifts von wenigen Punkten in einer benachbarten Nuance. Der erzeugte Visualbericht lokalisiert die betroffenen Bereiche präzise auf jedem Snapshot, sodass das QA-Team einen Seitenvergleich nach einer Designsystem-Überarbeitung validieren kann, ohne jede Stylesheet-Zeile erneut lesen zu müssen.
Was wir erkennen
2
HSL- & HSLA-Variationen
Erfasst Farbton-, Sättigungs- und Helligkeitsanpassungen, auch wenn der visuelle Unterschied für das menschliche Auge subtil ist.
3
Moderne Farbräume
Unterstützt OKLCH, LCH, Lab und andere Wide-Gamut-Farbräume, die in modernen Design-Systemen verwendet werden.
4
CSS Custom Properties
Verfolgt Änderungen in CSS-Variablen (--brand-color, --bg-primary), die sich durch Ihr gesamtes Design-System kaskadieren.
5
Dark-/Light-Mode-Wechsel
Erkennt Theme-Umschaltungsregressionen, bei denen sich Elemente nicht korrekt zwischen Dark- und Light-Mode anpassen.
6
Verläufe & Alphakanäle
Identifiziert Änderungen in linearen, radialen und konischen Verläufen sowie Transparenz- und Alphakanal-Modifikationen.
Live-Beispiel
Sehen Sie genau, was Delta-QA erkennt. Vergleichen Sie beide Versionen nebeneinander.
Vorher
Nachher
Praxisszenarien
🎯
Die CSS-Variable, die alles verändert
Ein Entwickler aktualisiert das Design System und ändert die Variable --brand-primary, um einen Kontrast im Footer zu korrigieren. Nebeneffekt: Die Farbe aller Buttons, Links und Überschriften der Website wechselt von Dunkelblau zu einem verwaschenen Blau. Der „In den Warenkorb"-Button verschmilzt fast mit dem weißen Hintergrund — Besucher bemerken ihn auf den ersten Blick nicht mehr. Die QA hat den Footer geprüft (den geänderten Bereich), nicht die 40 anderen Seiten, die dieselbe Variable verwenden. Delta-QA vergleicht die Screenshots vorher/nachher und hebt den Farbtonwechsel bei jedem betroffenen Element auf allen Seiten hervor.
⚠️
Der Dark Mode, der eine Komponente vergisst
Ein Entwickler fügt einen neuen Kundenreferenz-Block hinzu. Im hellen Modus sieht alles perfekt aus. Aber im Dark Mode bleibt der Block mit weißem Hintergrund und schwarzem Text — ein blendend weißes Rechteck mitten auf einer dunklen Seite. Ihre Nacht-Besucher werden geblendet. Jede Komponente in jedem Theme manuell zu prüfen ist unrealistisch bei 30 Komponenten und 2 Themes. Delta-QA erfasst die Website im Dark Mode und vergleicht mit der Referenz: Das weiße Rechteck der vergessenen Komponente fällt im Diff sofort auf.
💡
Der Gradient, der verschwindet
Bei einem CSS-Framework-Update wird eine Gradient-Klasse umbenannt. Der Build läuft fehlerfrei durch, aber der Gradient der Startseite ist verschwunden — ersetzt durch einen weißen Hintergrund. Die Seite verliert ihre Tiefe und Markenidentität, sie sieht aus wie ein Standard-Template. Es war ein kleines Framework-Update, niemand hat daran gedacht, die Homepage visuell erneut zu testen. Delta-QA vergleicht die Screenshots und erkennt das Verschwinden des Gradienten — der gesamte Bereich, der von farbig zu weiß wechselt, ist im Diff klar sichtbar.
Bereit, jede visuelle Regression zu erkennen?
Laden Sie Delta-QA herunter und erkennen Sie CSS-Änderungen in Ihren Webseiten — kein Code erforderlich.