1
Écarts de couleurs quasi-identiques
Détecte des changements de couleur aussi petits que 1-2 valeurs RGB (ex. #666666 vs #626262), invisibles à l'œil nu.
20 cas de test
Changements Subtils
Les régressions visuelles les plus difficiles à diagnostiquer sont celles qui passent sous le seuil de perception consciente : un état hover qui n'apparaît plus, un soulignement de lien qui a disparu dans le corps de texte, une scrollbar dont les styles personnalisés ont été écrasés au profit du rendu par défaut du navigateur, ou un changement d'antialiasing qui rend toute la typographie subtilement plus grasse sur macOS. Personne ne lève la main pour signaler ce type de problème, mais l'expérience utilisateur se dégrade — le site paraît « moins soigné », la confiance baisse, le taux de clic chute sans raison apparente. Sur des interfaces métier, ces drifts s'accumulent sprint après sprint et finissent par éroder la cohérence visuelle du design system au point de nécessiter une refonte complète. Les causes sont souvent des resets CSS introduits pour résoudre un cas précis, des changements de -webkit-font-smoothing, des modifications de styles globaux de liens dans les zones de contenu éditorial, ou des conflits entre feuilles de style qui chargent dans un ordre différent en production qu'en staging. La détection humaine de ces écarts est par définition impossible à passer à l'échelle, parce qu'elle suppose une mémoire visuelle parfaite des centaines de captures de référence. Delta-QA opère au niveau du pixel et applique une analyse perceptuelle calibrée pour ignorer le bruit de rendu acceptable mais alerter sur les écarts significatifs même quand ils sont quasi-imperceptibles à l'œil. Le diff met en évidence les zones touchées, ce qui transforme une régression invisible en information actionnable et permet aux équipes QA de stopper la dérive de finition avant qu'elle ne devienne visible aux utilisateurs.
Ce que nous détectons
2
Différences d'anti-aliasing
Capture les variations d'anti-aliasing des polices et contours qui produisent différents motifs de lissage sous-pixel.
3
Rendu sous-pixel
Surveille le positionnement fractionnaire des pixels et les différences de rendu causées par les transforms ou le dimensionnement en pourcentage.
4
Variations de lissage de police
Détecte les changements de -webkit-font-smoothing et de rendu de police qui affectent la netteté et la perception de graisse.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Après
Scénarios concrets
🎯
Le hover qui disparaît des boutons
Un développeur ajoute un reset CSS global qui supprime les styles hover sur les liens et boutons. Au survol, les boutons ne changent plus de couleur ni d'ombre — ils restent exactement pareils qu'au repos. Les visiteurs n'ont plus aucun feedback visuel pour savoir que c'est cliquable. Le taux de clic baisse et personne ne comprend pourquoi. Le changement faisait partie d'un gros refactoring CSS, personne n'a vérifié les états hover. Delta-QA capture les éléments à l'état hover et compare les captures : les boutons qui ne changent plus d'apparence au survol ressortent immédiatement dans le diff.
⚠️
Les liens qui se fondent dans le texte
Un développeur modifie les styles globaux des liens et, par effet de bord, les liens dans le corps de texte perdent leur soulignement et leur couleur distincte. Ils ressemblent maintenant au texte normal — même couleur, même style. Vos visiteurs ne savent plus où cliquer dans vos articles et pages de contenu. Le développeur a vérifié la navigation principale (qui utilise des classes spécifiques), pas les liens dans le contenu. Delta-QA compare les captures d'écran et met en évidence les liens qui ne se distinguent plus du texte — l'absence de soulignement et de couleur distincte ressort dans le diff.
💡
La scrollbar qui change de style
Un changement CSS écrase les styles personnalisés de la scrollbar. La barre de défilement fine et élégante est remplacée par la scrollbar par défaut du navigateur — épaisse et grise. Le site perd sa finition et la zone de contenu est visuellement rétrécie. C'est le genre de régression que personne ne cherche activement — on la remarque vaguement sans identifier la cause. Delta-QA compare les captures d'écran et met en évidence le changement — la barre épaisse qui remplace le design personnalisé ressort dans la superposition.
💡
L'antialiasing qui change
Un développeur introduit un nouveau CSS reset qui change -webkit-font-smoothing de antialiased à auto. Sur macOS, tout le texte du site paraît plus gras et moins net — comme si quelqu'un avait légèrement flouté la typographie. Vos utilisateurs Mac perçoivent le site comme « moins soigné » sans pouvoir mettre le doigt dessus. En staging ça passait car l'environnement de test tournait sur Linux avec un rendu différent. Delta-QA compare les captures d'écran et détecte le changement de rendu — les caractères plus gras et moins nets ressortent dans la superposition.
Prêt à détecter chaque régression visuelle ?
Téléchargez Delta-QA et détectez les changements CSS dans vos pages web — sans code.