Color Change Validator

Build a color change validation tool that determines whether visual changes between two images are perceptually significant to human observers.

Background

When comparing images, raw pixel differences don't always reflect what humans actually perceive. For example, a subtle hue shift might have large RGB differences but be barely noticeable to the human eye, while a brightness change might have smaller RGB differences but be very obvious.

Your task is to build a validator that uses perceptual color difference algorithms to determine if changes between two images would be noticeable to human viewers.

Requirements

Input Handling

The validator should accept:

• Two image buffers (Uint8Array or Uint8ClampedArray) in RGBA format
• Image dimensions (width and height in pixels)
• A sensitivity level that controls what constitutes a "noticeable" difference

Perceptual Comparison

The validator must use perceptual color difference detection that accounts for how humans actually perceive color changes, rather than raw RGB differences. This should be based on color space algorithms that model human vision.

Output

The validator should return an object containing:

• totalPixels: total number of pixels in the image
• changedPixels: number of pixels with perceptually noticeable differences
• changePercentage: percentage of changed pixels (0-100)
• isSignificant: boolean indicating if the change is significant (>1% of pixels changed)

Sensitivity Control

The sensitivity parameter should allow users to tune how strict the comparison is:

• Lower values should detect smaller, more subtle changes
• Higher values should only detect major differences
• The default sensitivity should be appropriate for typical visual validation scenarios

Test Cases

• Given two identical images, the validator returns 0 changed pixels and isSignificant: false @test
• Given images with a subtle color shift affecting 50 pixels in a 100x100 image with default sensitivity, the validator correctly counts the changed pixels @test
• Given images with major differences affecting 5% of pixels, the validator returns isSignificant: true @test
• The validator correctly handles transparent pixels in images @test

Implementation

@generates

API

/**
 * Validates whether color changes between two images are perceptually significant.
 *
 * @param {Uint8Array|Uint8ClampedArray} img1 - First image buffer in RGBA format
 * @param {Uint8Array|Uint8ClampedArray} img2 - Second image buffer in RGBA format
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @param {Object} options - Configuration options
 * @param {number} [options.sensitivity=0.1] - Sensitivity level (0-1, lower = more sensitive)
 * @returns {Object} Validation result with totalPixels, changedPixels, changePercentage, and isSignificant
 */
function validateColorChanges(img1, img2, width, height, options = {}) {
  // IMPLEMENTATION HERE
}

module.exports = { validateColorChanges };

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides perceptual color difference detection using YIQ color space algorithm for human-vision-accurate image comparison.