色覚シミュレーター - 色覚異常アクセシビリティテスト オンライン

// Color Blindness Simulator - JavaScript Implementation

/**
 * sRGB to Linear RGB conversion
 */
function srgbToLinear(c) {
  const v = c / 255;
  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
}

function linearToSrgb(c) {
  const v = Math.max(0, Math.min(1, c));
  return Math.round(
    (v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255
  );
}

/**
 * CVD simulation matrices (Brettel 1997 / Machado 2009)
 * Each is a 3x3 matrix stored as flat array [row-major]
 */
const CVD_MATRICES = {
  protanopia: [
    0.152286, 1.052583, -0.204868,
    0.114503, 0.786281, 0.099216,
    -0.003882, -0.048116, 1.051998,
  ],
  deuteranopia: [
    0.367322, 0.860646, -0.227968,
    0.280085, 0.672501, 0.047413,
    -0.011820, 0.042940, 0.968881,
  ],
  tritanopia: [
    1.255528, -0.076749, -0.178779,
    -0.078411, 0.930809, 0.147602,
    0.004733, 0.691367, 0.303900,
  ],
  achromatopsia: [
    0.2126, 0.7152, 0.0722,
    0.2126, 0.7152, 0.0722,
    0.2126, 0.7152, 0.0722,
  ],
};

/**
 * Simulate color vision deficiency for a single RGB color
 * @param {number} r - Red (0-255)
 * @param {number} g - Green (0-255)
 * @param {number} b - Blue (0-255)
 * @param {string} cvdType - CVD type key
 * @param {number} severity - 0.0 to 1.0
 * @returns {number[]} Simulated [r, g, b]
 */
function simulateColor(r, g, b, cvdType, severity = 1.0) {
  const matrix = CVD_MATRICES[cvdType];
  if (!matrix) throw new Error(`Unknown CVD type: ${cvdType}`);

  // Convert to linear
  const lr = srgbToLinear(r);
  const lg = srgbToLinear(g);
  const lb = srgbToLinear(b);

  // Apply matrix
  const sr = matrix[0] * lr + matrix[1] * lg + matrix[2] * lb;
  const sg = matrix[3] * lr + matrix[4] * lg + matrix[5] * lb;
  const sb = matrix[6] * lr + matrix[7] * lg + matrix[8] * lb;

  // Lerp with original for severity
  const fr = lr * (1 - severity) + sr * severity;
  const fg = lg * (1 - severity) + sg * severity;
  const fb = lb * (1 - severity) + sb * severity;

  return [linearToSrgb(fr), linearToSrgb(fg), linearToSrgb(fb)];
}

/**
 * Calculate WCAG 2.1 contrast ratio
 */
function getContrastRatio(fg, bg) {
  const lum = (r, g, b) =>
    0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);

  const l1 = lum(...fg);
  const l2 = lum(...bg);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

/**
 * Check WCAG compliance
 */
function checkWCAG(ratio) {
  return {
    aa: { normalText: ratio >= 4.5, largeText: ratio >= 3 },
    aaa: { normalText: ratio >= 7, largeText: ratio >= 4.5 },
  };
}

// Usage
const fg = [255, 102, 0]; // Orange
const bg = [255, 255, 255]; // White

console.log("Original contrast:", getContrastRatio(fg, bg).toFixed(2) + ":1");

const cvdTypes = ["protanopia", "deuteranopia", "tritanopia", "achromatopsia"];
for (const type of cvdTypes) {
  const simFg = simulateColor(...fg, type);
  const simBg = simulateColor(...bg, type);
  const ratio = getContrastRatio(simFg, simBg);
  const wcag = checkWCAG(ratio);
  console.log(`${type}: ${ratio.toFixed(2)}:1 (AA: ${wcag.aa.normalText ? "PASS" : "FAIL"})`);
}