색상과 접근성: 모든 사용자가 구분할 수 있는 색상 설계

// RGB를 명도로 변환하는 공식 (WCAG)
function getLuminance(r, g, b) {
  // 0-255 범위를 0-1로 정규화
  r = r / 255;
  g = g / 255;
  b = b / 255;

  // 감마 보정
  if (r <= 0.03928) {
    r = r / 12.92;
  } else {
    r = Math.pow((r + 0.055) / 1.055, 2.4);
  }

  if (g <= 0.03928) {
    g = g / 12.92;
  } else {
    g = Math.pow((g + 0.055) / 1.055, 2.4);
  }

  if (b <= 0.03928) {
    b = b / 12.92;
  } else {
    b = Math.pow((b + 0.055) / 1.055, 2.4);
  }

  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function getContrast(foreground, background) {
  const l1 = getLuminance(...foreground); // RGB 배열
  const l2 = getLuminance(...background);

  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);

  return (lighter + 0.05) / (darker + 0.05);
}

// 예시: 검은 텍스트 #000000 vs 흰 배경 #FFFFFF
const contrast = getContrast([0, 0, 0], [255, 255, 255]);
console.log(contrast); // 21 (아주 좋음!)

/* ✅ 좋은 예 - 4.5:1 이상 */
.good-contrast {
  color: #000000;        /* 검은색 */
  background: #FFFFFF;   /* 흰색 */
  /* 대비: 21:1 */
}

/* ❌ 나쁜 예 - 3:1 미만 */
.bad-contrast {
  color: #777777;        /* 회색 */
  background: #CCCCCC;   /* 밝은 회색 */
  /* 대비: 약 2.79:1 */
}

/* ✅ 다크 모드 예 */
@media (prefers-color-scheme: dark) {
  body {
    color: #EEEEEE;      /* 밝은 회색 텍스트 */
    background: #1a1a1a; /* 어두운 배경 */
    /* 대비: 약 15:1 */
  }
}

<!-- ❌ 나쁜 예 -->
<div>
  <span style="color: red">오류</span>
  <span style="color: green">성공</span>
</div>

<!-- 색각이상자는 둘 다 같은 색으로 보임 -->

<!-- ✅ 좋은 예 1: 텍스트 포함 -->
<div>
  <span style="color: red">❌ 오류</span>
  <span style="color: green">✅ 성공</span>
</div>

<!-- ✅ 좋은 예 2: 아이콘 + 텍스트 -->
<div>
  <span style="color: red" aria-label="오류">
    <i class="icon-error"></i> 오류 메시지
  </span>
</div>

<!-- ✅ 좋은 예 3: 패턴 사용 -->
<svg width="100" height="100">
  <!-- 빨강 + 대각선 패턴 -->
  <rect fill="red" width="50" height="50"/>
  <pattern id="diag" patternUnits="userSpaceOnUse" width="8" height="8">
    <path d="M0,8 l8,-8 M-2,2 l4,-4 M6,10 l4,-4" stroke="black" stroke-width="1"/>
  </pattern>
  <rect fill="url(#diag)" width="50" height="50"/>
</svg>

<!-- ❌ 색상만 사용 -->
<input type="email" style="border: 2px solid red;">

<!-- ✅ 색상 + 아이콘 + 메시지 -->
<div class="form-group">
  <input
    type="email"
    class="form-input has-error"
    aria-describedby="email-error">
  <svg class="error-icon" aria-hidden="true">
    <use xlink:href="#icon-error"></use>
  </svg>
  <p id="email-error" class="error-message">
    유효한 이메일 주소를 입력하세요
  </p>
</div>

.form-input.has-error {
  border: 2px solid #d32f2f; /* 빨강 */
  background-color: #ffebee; /* 연한 빨강 */
}

.error-icon {
  color: #d32f2f; /* 빨강 */
}

.error-message {
  color: #d32f2f;
  /* 텍스트로 문제를 명확하게 설명 */
}

/* 색상 없이 흑백으로 먼저 설계 */
body {
  color: #333333; /* 어두운 회색 텍스트 */
  background: #ffffff; /* 흰 배경 */
}

/* 이 상태에서 이미 4.5:1 이상의 대비 */

/* 명도를 유지하면서 색상 추가 */
.primary {
  color: #0962db; /* 파랑 - 명도 유지 */
  background: #ffffff;
  /* 명도 대비: 약 5.6:1 */
}

.secondary {
  color: #1e7e34; /* 초록 - 명도 유지 */
  background: #ffffff;
  /* 명도 대비: 약 5.1:1 */
}

// Deuteranopia (녹색 맹)를 위한 색상 변환
function simulateDeuteranopia(rgb) {
  const [r, g, b] = rgb;
  return [
    0.625 * r + 0.375 * g,
    0.7 * r + 0.3 * g,
    b
  ];
}

// 테스트
const primary = [9, 98, 219]; // 파랑 #0962db
const simulated = simulateDeuteranopia(primary);
// 결과: [42, 36, 219] - 파랑이 약간 다르게 보이지만 구분 가능
// 참고: 실제 색각이상 시뮬레이션은 LMS 색공간 변환이 필요합니다. 이 함수는 교육용 근사치입니다.

/* 예시 팔레트 (AA 이상을 목표로 설계) */

/* 회색 톤 */
:root {
  --gray-900: #111827; /* 거의 검은색 */
  --gray-700: #374151; /* 어두운 회색 */
  --gray-500: #6b7280; /* 중간 회색 */
  --gray-100: #f3f4f6; /* 밝은 회색 */
  --gray-50: #f9fafb;  /* 거의 흰색 */
}

/* 기능색 (사용 맥락에 따라 대비 재검증 필요) */
:root {
  --success: #065f46;   /* 짙은 초록 */
  --danger: #7f1d1d;    /* 짙은 빨강 */
  --warning: #92400e;   /* 짙은 노랑/갈색 */
  --info: #0c4a6e;      /* 짙은 파랑 */
}

/* 흰 배경 위 사용 */
.success { color: var(--success); background: white; }
.danger { color: var(--danger); background: white; }
.warning { color: var(--warning); background: white; }
.info { color: var(--info); background: white; }

배경:  #FFFFFF (흰색)
텍스트: #4B9DFF (밝은 파랑)
대비:  약 3.0:1 → AA 실패 (일반 텍스트 기준 4.5:1 필요)

/* 기존 브랜드 색 - AA 실패 */
.btn {
  color: #4B9DFF;  /* 대비: 약 3.0:1 ❌ */
  background: #FFFFFF;
}

/* 방법 1: 같은 계열, 더 어둡게 */
.btn {
  color: #0062D1;  /* 대비: 약 5.1:1 ✅ */
  background: #FFFFFF;
}

/* 방법 2: 배경과 텍스트 반전 */
.btn {
  color: #FFFFFF;
  background: #0062D1;  /* 대비: 약 5.1:1 ✅ */
}

.hero-title {
  color: #4B9DFF; /* 브랜드 파랑 */
  /* 어두운 아웃라인으로 배경과의 대비를 확보 */
  text-shadow:
    -1px -1px 0 rgba(0, 30, 80, 0.85),
     1px -1px 0 rgba(0, 30, 80, 0.85),
    -1px  1px 0 rgba(0, 30, 80, 0.85),
     1px  1px 0 rgba(0, 30, 80, 0.85);
}

.display-heading {
  color: #4B9DFF; /* 브랜드 파랑 */
  -webkit-text-stroke: 3px #003380; /* 어두운 파랑 스트로크 */
  paint-order: stroke fill; /* 스트로크를 fill 아래에 렌더링 */
}

.tag {
  /* 브랜드 색상은 테두리로 유지 */
  border: 2px solid #4B9DFF;
  border-radius: 4px;

  /* 텍스트는 충분한 대비 확보 */
  color: #003380;        /* 어두운 파랑: 흰 배경 대비 약 10:1 ✅ */
  background: #FFFFFF;
  padding: 4px 10px;
}

/* 또는 브랜드 색 배경 위에 흰 텍스트 */
.tag-filled {
  background: #4B9DFF;
  color: #FFFFFF;
  /* 대비: 약 3.0:1 → 큰 텍스트 기준은 충족, 본문 기준은 아직 부족 */
  /* 폰트를 14pt bold 이상으로 설정하면 AA 기준 통과 */
  font-size: 1rem;
  font-weight: 700;
}

.card-text-area {
  /* 텍스트 영역에 반투명 어두운 배경 */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 24px 16px 16px;
}

.card-title {
  color: #FFFFFF; /* 흰 텍스트 */
  /* 스크림 덕분에 충분한 대비 확보 */
}

/* ❌ 라이트 모드 색상을 다크 모드에 그대로 사용 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #0066cc; /* 라이트 모드의 파랑 */
    /* 대비: 약 3.1:1 - 일반 텍스트에는 부족 */
  }
}

/* ✅ 다크 모드에 맞게 조정 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #66b2ff; /* 밝은 파랑 */
    /* 대비: 약 7.8:1 - 충분함 */
  }
}

:root {
  /* 라이트 모드 */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --background-primary: #ffffff;
  --background-secondary: #f3f4f6;

  --accent-primary: #0962db;
  --accent-danger: #7f1d1d;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드 - 명도를 고려해 조정 */
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --background-primary: #1a1a1a;
    --background-secondary: #374151;

    --accent-primary: #66b2ff;
    --accent-danger: #fca5a5;
  }
}

body {
  color: var(--text-primary);
  background: var(--background-primary);
}

.button-primary {
  color: white;
  background: var(--accent-primary);
}

## 색상 접근성 체크리스트

### 명도 대비
- [ ] 텍스트와 배경 대비가 4.5:1 이상?
- [ ] 큰 텍스트(18pt+)도 3:1 이상?
- [ ] 버튼과 배경 대비도 확인했나?

### 색상 의존성
- [ ] 색상만으로 정보를 표현하지 않았나?
- [ ] 형태/패턴/텍스트로도 구분되나?
- [ ] 에러 메시지가 색상+텍스트로 표현되나?

### 색각이상 테스트
- [ ] 페이지를 색맹 시뮬레이터로 확인했나?
- [ ] 빨강-초록 구분이 중요한가?
- [ ] 다른 색상 조합도 테스트했나?

### 다크 모드
- [ ] 다크 모드에서도 대비가 충분한가?
- [ ] 색상이 자동으로 조정되나?

// axe DevTools 검사 (브라우저 확장)
// https://www.deque.com/axe/devtools/

// 또는 프로그래매틱하게
async function checkContrast() {
  const { axe } = window;
  const results = await axe.run({
    rules: ['color-contrast']
  });

  results.violations.forEach(violation => {
    console.log('색상 대비 문제:', violation);
  });
}

/* ❌ 회색 텍스트는 저시력 사용자가 못 읽을 수 있음 */
.secondary-text {
  color: #999999; /* 회색 */
  background: #ffffff;
  /* 대비: 약 2.85:1 - AA 미달 */
}

/* ✅ 어두운 회색 사용 */
.secondary-text {
  color: #666666; /* 어두운 회색 */
  background: #ffffff;
  /* 대비: 약 5.74:1 - AA 만족 */
}

/* ❌ 포커스 아웃라인이 옅음 */
button:focus {
  outline: 1px solid #cccccc;
  outline-offset: 1px;
}

/* ✅ 명확한 포커스 스타일 */
button:focus-visible {
  outline: 3px solid #0962db;
  outline-offset: 2px;
}

/* ❌ 둘 다 파랑 #0066cc 사용 */
.primary-color {
  color: #0066cc;
}

/* ✅ 모드별로 조정 */
:root {
  --primary: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #66b2ff;
  }
}

.primary-color {
  color: var(--primary);
}