ui-visual-validator

Visual verification requires analyzing screenshots objectively without inferring results from code changes. Describe what you observe, measure rotations, positions, and sizes, then actively search for evidence the modification failed before declaring success.

Common visual regression 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 testing.

WCAG contrast validation measures the ratio between foreground and background colors against 2.1/2.2 thresholds. The assessment also covers focus indicator visibility, text scaling, and high contrast mode behavior.

No, visual validation only confirms what is visible on screen and cannot verify underlying logic, data flow, or behavior. It complements functional and unit testing as a final gate for design and accessibility quality.

A visible difference does not prove the intended goal was met; the change may be incomplete, misaligned, or applied to the wrong element. Validation must compare each visual element against the stated objective and check edge cases and error states.