// WCAG 2.x 상대 명도 대비 검사. node tools/contrast.mjs const hex = h => h.replace('#','').match(/../g).map(x => parseInt(x,16)/255) const lin = c => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4) const L = h => { const [r,g,b] = hex(h).map(lin); return 0.2126*r + 0.7152*g + 0.0722*b } const ratio = (a,b) => { const l1 = L(a), l2 = L(b); const [hi,lo] = l1>l2 ? [l1,l2] : [l2,l1]; return (hi+0.05)/(lo+0.05) } const themes = { dark: { surface: '#0D0F12', raised: '#151A20', line: '#262E37', ink: '#E6E8E6', inkMuted: '#9BA6B2', accent: '#7FA6FF', ctaBg: '#E6E8E6', ctaInk: '#0D0F12', ok: '#4FA97A', warn: '#C9A227', fail: '#D46A55', }, light: { surface: '#F7F5F0', raised: '#FDFCF9', line: '#DCD8CF', ink: '#16181A', inkMuted: '#5C646E', accent: '#1B4FD8', ctaBg: '#16181A', ctaInk: '#FAF9F6', ok: '#2F7D57', warn: '#8A6D14', fail: '#A8432E', }, } // [라벨, 전경, 배경키, 최소요구] const checks = [ ['본문 ink / surface', 'ink', 'surface', 4.5], ['본문 ink / raised', 'ink', 'raised', 4.5], ['보조 inkMuted / surface', 'inkMuted', 'surface', 4.5], ['보조 inkMuted / raised', 'inkMuted', 'raised', 4.5], ['링크 accent / surface', 'accent', 'surface', 4.5], ['링크 accent / raised', 'accent', 'raised', 4.5], ['상태 ok / raised', 'ok', 'raised', 4.5], ['상태 warn / raised', 'warn', 'raised', 4.5], ['상태 fail / raised', 'fail', 'raised', 4.5], ] let fail = 0 for (const [name, t] of Object.entries(themes)) { console.log(`\n=== ${name} ===`) for (const [label, fg, bg, min] of checks) { const r = ratio(t[fg], t[bg]) const ok = r >= min if (!ok) fail++ console.log(`${ok ? 'PASS' : 'FAIL'} ${r.toFixed(2)}:1 (min ${min}) ${label} ${t[fg]} on ${t[bg]}`) } const r = ratio(t.ctaInk, t.ctaBg) const ok = r >= 4.5 if (!ok) fail++ console.log(`${ok ? 'PASS' : 'FAIL'} ${r.toFixed(2)}:1 (min 4.5) CTA 글자/버튼 ${t.ctaInk} on ${t.ctaBg}`) // 하드게이트 #7: 버튼 텍스트/배경 대비 const rb = ratio(t.line, t.surface) console.log(`INFO ${rb.toFixed(2)}:1 경계선 line / surface (3:1 미만이면 비필수 장식으로만)`) } console.log(fail === 0 ? '\n전부 통과' : `\n${fail}건 실패`)