1
Hex & RGB Changes
Detects modifications in hexadecimal and RGB color values, including shorthand notation changes and alpha channel variations.
40 test cases
Colors & Themes
Color is one of the most loaded visual properties in any interface: it carries the brand identity, signals primary actions, and structures the visual hierarchy users rely on to read a page. A hue that drifts a few points on a conversion button is a visual regression invisible to functional tests but immediately perceived by visitors as a quality drop. On business interfaces — banking dashboards, ERP systems, admin back-offices — an inconsistent color code can even cause data interpretation errors. In practice, these regressions almost always show up in the same contexts: a design system refactor, a CSS framework upgrade, an update to a global token like --brand-primary, the introduction of a poorly propagated dark mode, or a silent conversion of one color format to another during a build. CSS custom properties amplify the problem: changing a single token can ripple through dozens of components spread across hundreds of pages, and no developer can mentally hold the full dependency map. Delta-QA tackles this by comparing baseline screenshots and new captures pixel by pixel, then applying perceptual analysis that tolerates rendering noise but flags any meaningful hue shift. The tool understands RGB, HSL, OKLCH, and modern CSS variables, and surfaces both full palette swaps and subtle drifts of a few points within a closely related shade. The visual report pinpoints the affected areas on each snapshot, so the QA team can sign off on a redesign without re-reading every stylesheet line by line.
What we detect
2
HSL & HSLA Variations
Catches hue, saturation, and lightness adjustments, even when the visual difference is subtle to the human eye.
3
Modern Color Spaces
Supports OKLCH, LCH, Lab, and other wide-gamut color spaces used in modern design systems.
4
CSS Custom Properties
Tracks changes in CSS variables (--brand-color, --bg-primary) that cascade through your entire design system.
5
Dark / Light Mode Switches
Detects theme toggle regressions where elements fail to adapt correctly between dark and light modes.
6
Gradients & Alpha Channels
Identifies changes in linear, radial, and conic gradients, as well as transparency and alpha channel modifications.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The CSS variable that changes everything
A developer updates the design system and changes the --brand-primary variable to fix a contrast issue on the footer. Side effect: the color of every button, link, and heading across the site shifts from dark blue to a washed-out blue. The "Add to Cart" button nearly blends into the white background — visitors no longer spot it at first glance. QA checked the footer (the area that was modified), not the 40 other pages using that same variable. Delta-QA compares before/after screenshots and highlights the color shift on every affected element, across all pages.
⚠️
The dark mode that forgets a component
A developer adds a new customer testimonials block. In light mode, everything looks great. But in dark mode, the block keeps its white background and black text — a blinding rectangle in the middle of a dark page. Your nighttime visitors get a flash in their eyes. Manually checking every component in every theme is unrealistic when you have 30 components and 2 themes. Delta-QA captures the site in dark mode and compares against the reference: the white rectangle of the forgotten component jumps out immediately in the diff.
💡
The gradient that disappears
During a CSS framework update, a gradient class gets renamed. The build passes without errors, but the homepage gradient disappears — replaced by a flat white background. The page loses its depth and brand identity, looking like a default template. It was a minor framework update, nobody thought to visually retest the homepage. Delta-QA compares screenshots and detects the gradient's disappearance — the entire area going from colorful to white stands out clearly in the diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.