색상, 대비, 모션

대비 비율 = (밝은 색의 상대 휘도 + 0.05) / (어두운 색의 상대 휘도 + 0.05)

예) 흰색(#fff)과 회색(#767676)
  L_white = 1.0, L_gray = 0.176
  비율 = (1.0 + 0.05) / (0.176 + 0.05) = 4.54:1 → AA 통과

/* ❌ 색상만으로 링크 구분 */
a { color: blue; text-decoration: none; }

/* ✅ 밑줄 + 색상으로 구분 */
a { color: blue; text-decoration: underline; }

// 프로그래밍 방식으로 대비 비율 계산
function relativeLuminance(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => {
    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
    return c <= 0.04045
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrastRatio(hex1, hex2) {
  const l1 = relativeLuminance(hex1);
  const l2 = relativeLuminance(hex2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

contrastRatio("#ffffff", "#767676"); // 4.54 → AA 통과

/* 기본: 애니메이션 적용 */
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

/* 모션 줄이기 설정 시: 애니메이션 제거 또는 대체 */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
    /* 대신 opacity 변경 같은 부드러운 대안 사용 */
    opacity: 0.9;
  }
}

// JS에서 모션 감소 설정 감지
const motionQuery = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);

if (motionQuery.matches) {
  // 애니메이션을 비활성화하거나 간소화
  document.documentElement.classList.add("reduce-motion");
}

// 설정 변경 감지
motionQuery.addEventListener("change", (e) => {
  if (e.matches) {
    // 모션 감소 활성화됨
    cancelAllAnimations();
  }
});

:root {
  --text: #1a1a1a;        /* 라이트: 거의 검정 */
  --bg: #ffffff;           /* 라이트: 흰색 */
  /* 대비 비율: 약 17.4:1 ✅ */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #e5e5e5;       /* 다크: 밝은 회색 */
    --bg: #171717;         /* 다크: 거의 검정 */
    /* 대비 비율: 약 15.4:1 ✅ */
  }
}

/* ❌ 다크 모드에서 흔한 실수 */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #888888;       /* 너무 어두운 텍스트 */
    --bg: #333333;         /* 너무 밝은 배경 */
    /* 대비 비율: 약 2.4:1 ❌ */
  }
}

/* ❌ 고정 px, 사용자 설정 무시 */
body { font-size: 14px; }

/* ✅ rem, 사용자 브라우저 설정에 반응 */
body { font-size: 1rem; } /* 기본 16px */
h1   { font-size: 2rem; } /* 32px */

/* 줄 길이 제한으로 가독성 향상 */
article { max-width: 70ch; }