1
Fast identische Farbverschiebungen
Erkennt Farbänderungen von nur 1-2 Werten in RGB (z. B. #666666 vs #626262), die für das bloße Auge unsichtbar sind.
20 Testfälle
Subtile Änderungen
Die am schwersten zu diagnostizierenden visuellen Regressionen sind diejenigen, die unter der Schwelle der bewussten Wahrnehmung liegen: ein Hover-Zustand, der nicht mehr erscheint, eine Link-Unterstreichung, die im Fließtext verschwunden ist, eine Scrollbar, deren Custom-Styles zugunsten des Browser-Standardrenderings überschrieben wurden, oder eine Anti-Aliasing-Änderung, die die gesamte Typografie auf macOS subtil dicker erscheinen lässt. Niemand hebt die Hand, um diese Art von Problem zu melden, aber die Nutzererfahrung verschlechtert sich — die Website wirkt „weniger gepflegt", das Vertrauen sinkt, die Klickrate fällt ohne ersichtlichen Grund. Auf Business-Oberflächen häufen sich diese Drifts Sprint für Sprint und erodieren am Ende die visuelle Konsistenz des Design Systems so stark, dass eine komplette Überarbeitung notwendig wird. Die Ursachen sind oft CSS-Resets, die für einen präzisen Fall eingeführt wurden, Änderungen an -webkit-font-smoothing, Modifikationen globaler Link-Styles in redaktionellen Bereichen oder Konflikte zwischen Stylesheets, die in Produktion in einer anderen Reihenfolge laden als im Staging. Die menschliche Erkennung dieser Abweichungen ist per Definition nicht skalierbar, weil sie ein perfektes visuelles Gedächtnis Hunderter Referenz-Screenshots voraussetzt. Delta-QA arbeitet auf Pixelebene und wendet eine perzeptuelle Analyse an, die so kalibriert ist, dass akzeptables Renderrauschen ignoriert, signifikante Abweichungen aber selbst dann gemeldet werden, wenn sie für das Auge fast unsichtbar sind. Der Diff hebt die betroffenen Bereiche hervor, was eine unsichtbare visuelle Regression in eine handlungsfähige Information per Seitenvergleich verwandelt und QA-Teams ermöglicht, die Finishing-Drift zu stoppen, bevor sie für die Nutzer sichtbar wird.
Was wir erkennen
2
Anti-Aliasing-Unterschiede
Erfasst Schrift- und Kanten-Anti-Aliasing-Variationen, die unterschiedliche Sub-Pixel-Glättungsmuster erzeugen.
3
Sub-Pixel-Rendering
Überwacht fraktionale Pixel-Positionierung und Rendering-Unterschiede, die durch Transform oder prozentbasierte Dimensionierung verursacht werden.
4
Schriftglättungs-Variationen
Erkennt Änderungen in -webkit-font-smoothing und Schrift-Rendering, die die Textschärfe und Gewichtswahrnehmung beeinflussen.
Live-Beispiel
Sehen Sie genau, was Delta-QA erkennt. Vergleichen Sie beide Versionen nebeneinander.
Vorher
Nachher
Praxisszenarien
🎯
Der Hover, der von den Buttons verschwindet
Ein Entwickler fügt einen globalen CSS-Reset hinzu, der die Hover-Styles auf Links und Buttons entfernt. Beim Überfahren ändern die Buttons weder Farbe noch Schatten — sie bleiben exakt gleich wie im Ruhezustand. Die Besucher haben keinerlei visuelles Feedback mehr, um zu wissen, dass es klickbar ist. Die Klickrate sinkt und niemand versteht warum. Die Änderung war Teil eines großen CSS-Refactorings, niemand hat die Hover-Zustände geprüft. Delta-QA erfasst die Elemente im Hover-Zustand und vergleicht die Screenshots: Die Buttons, die beim Überfahren ihr Aussehen nicht mehr ändern, fallen im Diff sofort auf.
⚠️
Die Links, die im Text verschwinden
Ein Entwickler ändert die globalen Link-Styles und als Nebeneffekt verlieren die Links im Fließtext ihre Unterstreichung und ihre eigene Farbe. Sie sehen jetzt aus wie normaler Text — gleiche Farbe, gleicher Stil. Ihre Besucher wissen in Ihren Artikeln und Inhaltsseiten nicht mehr, wo sie klicken sollen. Der Entwickler hat die Hauptnavigation geprüft (die spezifische Klassen verwendet), nicht die Links im Content. Delta-QA vergleicht die Screenshots und hebt die Links hervor, die sich nicht mehr vom Text unterscheiden — das Fehlen von Unterstreichung und eigener Farbe fällt im Diff auf.
💡
Die Scrollbar, die ihren Stil ändert
Eine CSS-Änderung überschreibt die benutzerdefinierten Scrollbar-Styles. Die schlanke, elegante Scrollbar wird durch die Standard-Browser-Scrollbar ersetzt — dick und grau. Die Website verliert ihren Feinschliff und der Inhaltsbereich wirkt visuell schmaler. Das ist die Art von Regression, die niemand aktiv sucht — man bemerkt sie vage, ohne die Ursache zu identifizieren. Delta-QA vergleicht die Screenshots und hebt die Änderung hervor — die dicke Leiste, die das benutzerdefinierte Design ersetzt, fällt in der Überlagerung auf.
💡
Das Antialiasing, das sich ändert
Ein Entwickler führt einen neuen CSS-Reset ein, der -webkit-font-smoothing von antialiased auf auto ändert. Auf macOS erscheint der gesamte Text der Website dicker und weniger scharf — als hätte jemand die Typografie leicht verwischt. Ihre Mac-Nutzer empfinden die Seite als „weniger gepflegt", ohne es benennen zu können. Im Staging war es unauffällig, da die Testumgebung auf Linux lief mit einem anderen Rendering. Delta-QA vergleicht die Screenshots und erkennt die Rendering-Änderung — die dickeren und weniger scharfen Zeichen fallen in der Überlagerung auf.
Bereit, jede visuelle Regression zu erkennen?
Laden Sie Delta-QA herunter und erkennen Sie CSS-Änderungen in Ihren Webseiten — kein Code erforderlich.