ui-visual-validator

Visual validation compares screenshots against stated modification goals using pixel-level diff analysis. Describe what you observe objectively, verify measurements for position and size changes, and only accept clear visual evidence that goals were met.

Common tools include Chromatic for Storybook components, Percy for cross-browser screenshots, Applitools for AI-powered comparison, BackstopJS for automated regression, and Playwright or Cypress visual comparisons for end-to-end flows.

Measure the contrast ratio between text and background colors and compare against WCAG 2.1 thresholds: 4.5:1 for normal text and 3:1 for large text. Also verify focus indicators remain visible and text stays readable when scaled.

Yes, capture screenshots at each target breakpoint and verify layout behavior such as navigation collapse, element stacking, and spacing. Confirm consistency across mobile, tablet, and desktop viewports rather than assuming code media queries work.

Code changes do not guarantee visual results due to font loading issues, animation timing, caching, or browser rendering differences. Always base conclusions on direct screenshot observation, never on implementation details.