Color Analysis

/**
 * Calculate WCAG relative luminosity (0-1 scale)
 * 0 represents black, 1 represents white
 * @returns Luminosity value between 0 and 1
 */
luminosity(): number;

import Color from "color";

// Calculate luminosity for various colors
Color('black').luminosity();    // 0
Color('white').luminosity();    // 1
Color('red').luminosity();      // ~0.213
Color('green').luminosity();    // ~0.715
Color('blue').luminosity();     // ~0.072

// Use for relative brightness comparison
const darkBlue = Color('#000080');
const lightBlue = Color('#ADD8E6');
console.log(darkBlue.luminosity());   // 0.039
console.log(lightBlue.luminosity());  // 0.749

/**
 * Calculate WCAG contrast ratio with another color
 * Range: 1 (identical colors) to 21 (black vs white)
 * @param color2 - Color to compare against
 * @returns Contrast ratio between 1 and 21
 */
contrast(color2: ColorInstance): number;

const background = Color('#FFFFFF');
const text = Color('#000000');

// Maximum contrast (black on white)
background.contrast(text);        // 21

// Test various text colors on white background
Color('white').contrast(Color('black'));     // 21
Color('white').contrast(Color('red'));       // 5.25
Color('white').contrast(Color('blue'));      // 8.59
Color('white').contrast(Color('gray'));      // 5.31

// Test on colored backgrounds
const blueBackground = Color('#0066CC');
blueBackground.contrast(Color('white'));     // 4.56
blueBackground.contrast(Color('yellow'));    // 6.28

/**
 * Get WCAG accessibility level for contrast with another color
 * @param color2 - Color to test contrast against
 * @returns 'AAA' (7:1+), 'AA' (4.5:1+), or '' (below standards)
 */
level(color2: ColorInstance): 'AAA' | 'AA' | '';

const white = Color('white');
const darkGray = Color('#555555');
const lightGray = Color('#AAAAAA');
const veryLightGray = Color('#EEEEEE');

// Test accessibility levels
white.level(darkGray);       // 'AAA' (high contrast)
white.level(lightGray);      // 'AA' (medium contrast)  
white.level(veryLightGray);  // '' (insufficient contrast)

// Practical accessibility testing
function testTextAccessibility(bgColor, textColor) {
  const contrast = bgColor.contrast(textColor);
  const level = bgColor.level(textColor);
  
  console.log(`Contrast: ${contrast.toFixed(2)}:1`);
  console.log(`WCAG Level: ${level || 'Fails AA/AAA'}`);
  
  return {
    contrast,
    level,
    passesAA: contrast >= 4.5,
    passesAAA: contrast >= 7
  };
}

testTextAccessibility(Color('#0066CC'), Color('white'));

/**
 * Determine if color is perceptually dark
 * Uses YIQ color space calculation
 * @returns true if color appears dark
 */
isDark(): boolean;

/**
 * Determine if color is perceptually light  
 * Inverse of isDark()
 * @returns true if color appears light
 */
isLight(): boolean;

// Test various colors for darkness/lightness
Color('black').isDark();        // true
Color('white').isLight();       // true
Color('red').isDark();          // true
Color('yellow').isLight();      // true
Color('navy').isDark();         // true
Color('pink').isLight();        // true

// Practical usage for text color selection
function getTextColor(backgroundColor) {
  return backgroundColor.isDark() ? 'white' : 'black';
}

const bg1 = Color('#333333');
const bg2 = Color('#CCCCCC');

console.log(getTextColor(bg1)); // 'white'
console.log(getTextColor(bg2)); // 'black'

// Dynamic contrast selection
function ensureReadableText(bgColor) {
  const white = Color('white');
  const black = Color('black');
  
  const whiteContrast = bgColor.contrast(white);
  const blackContrast = bgColor.contrast(black);
  
  return whiteContrast > blackContrast ? white : black;
}

// Color palette accessibility checker
function checkPaletteAccessibility(colors) {
  const results = [];
  
  for (let i = 0; i < colors.length; i++) {
    for (let j = i + 1; j < colors.length; j++) {
      const color1 = Color(colors[i]);
      const color2 = Color(colors[j]);
      const contrast = color1.contrast(color2);
      const level = color1.level(color2);
      
      results.push({
        color1: colors[i],
        color2: colors[j],
        contrast: contrast.toFixed(2),
        level: level || 'Insufficient',
        suitable: contrast >= 4.5
      });
    }
  }
  
  return results;
}

// Test a design palette
const palette = ['#FFFFFF', '#000000', '#FF0000', '#00FF00', '#0000FF'];
const accessibilityReport = checkPaletteAccessibility(palette);

// Auto-adjust colors for accessibility
function adjustForAccessibility(bgColor, textColor, targetLevel = 'AA') {
  const minContrast = targetLevel === 'AAA' ? 7 : 4.5;
  let adjustedText = Color(textColor);
  
  while (bgColor.contrast(adjustedText) < minContrast) {
    if (adjustedText.isDark()) {
      adjustedText = adjustedText.darken(0.1);
    } else {
      adjustedText = adjustedText.lighten(0.1);
    }
  }
  
  return adjustedText;
}