WCAG 색상 대비 검사기 - 색상 접근성 검사 온라인

// WCAG Color Contrast Checker

function sRGBtoLinear(channel) {
  const c = channel / 255;
  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

function getRelativeLuminance(r, g, b) {
  return (
    0.2126 * sRGBtoLinear(r) +
    0.7152 * sRGBtoLinear(g) +
    0.0722 * sRGBtoLinear(b)
  );
}

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

function checkWCAG(ratio) {
  return {
    ratio: parseFloat(ratio.toFixed(2)),
    aa: {
      normalText: ratio >= 4.5,
      largeText: ratio >= 3,
      uiComponents: ratio >= 3,
    },
    aaa: {
      normalText: ratio >= 7,
      largeText: ratio >= 4.5,
    },
  };
}

// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);

const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');