색상 대비·조화 시뮬레이터 메뉴얼

이 시뮬레이터는 두 가지 색상을 선택해 WCAG 대비율(Contrast Ratio)과 색상 조화(Harmony) 방법(보색, 유사색, 삼각형 배색)을 확인하도록 도와줍니다. 색채 디자인, 웹 접근성, UI/UX 설계 등에 활용할 수 있습니다.

1. 핵심 기능

1. 색상 선택

   • 기준 색상(baseColor)과 비교 색상(secondColor)을 ColorPicker로 선택
   • HEX 형식으로 표시 (#RRGGBB), 실시간 반영

2. 색상 대비율(Contrast Ratio)

   • 선택된 두 색상의 루미넌스(luminance)를 비교해 (밝은색 + 0.05) / (어두운색 + 0.05)
   • 소수점 2자리 표시와 함께 WCAG 등급(A, AA, AAA)을 간단히 평가

3. 가독성 미리보기

   • 두 컬러를 배경/텍스트로 교차해 간단한 “텍스트 예시” 제공
   • 실제 화면에서 어느 정도 가독성이 있는지 확인 가능

4. 색상 조화 방법

   • 보색(Complementary): 색상환 180도 반대
   • 유사색(Analogous): 색상환에서 ±30도 주변
   • 삼각형 배색(Triadic): 120도 간격의 3색
   • 자동 계산된 결과를 견본(ColorSwatch)으로 시각화

2. 사용 방법

1. 기준 색상 & 비교 색상 선택

   • 왼쪽 박스: 기준 색상, 오른쪽 박스: 비교 색상
   • 기본값: #FF0000 / #00FF00

2. 대비율/가독성 확인

   • “색상 대비” 섹션에서 대비율(예: 4.78)과 등급(AA/AAA)을 표시
   • 아래 미리보기에서 두 컬러를 교차 배치한 텍스트 예시

3. 색상 조화(보색·유사색·삼각형 배색)

   • 기준색의 HSL 값에서 Hue를 180도(보색), ±30도(유사), +120/240도(삼각형)로 계산
   • 결과 색상을 표준 HEX로 변환하여 여러 조합을 제안
   • 디자인할 때 빠른 아이디어 참고 가능

3. 내부 계산 로직 요약

3.1 대비율(Contrast Ratio)

• RGB → 루미넌스(luminance)
  • sRGB를 선형으로 변환 (밝기 2.4 제곱 적용)
  • 루미넌스 = 0.2126 × R + 0.7152 × G + 0.0722 × B (R, G, B 각각 0~1)
• 대비율
  • (밝은색 루미넌스 + 0.05) / (어두운색 루미넌스 + 0.05)

3.2 색상 조화

• 보색(Complementary)
  • Hue + 180도
• 유사색(Analogous)
  • Hue ± 30도
• 삼각형 배색(Triadic)
  • Hue + 120, + 240

4. 활용 예시

• 웹 접근성
  • 배경색, 텍스트 색 간 WCAG AA(4.5:1 이상), AAA(7:1 이상) 충족 여부 확인
• 로고/브랜드 디자인
  • 기준 색상에 어울리는 보색/유사/삼각형 배색으로 시각적 아이디어 발굴
• UI/UX
  • 버튼, 배경, 텍스트, 강조 요소의 조합을 빠르게 테스트

5. 주의 사항

• 모니터 편차: 기기의 컬러 프로파일, 감마 설정 등에 따라 약간 다를 수 있음
• 색각 이상: 높은 대비율이라도 특정 색각 결핍에는 구분이 어려울 수 있음
• 디자인 맥락: 수치상 대비가 좋아도 실제 디자인 컨셉과 어긋날 수 있으므로 적절히 조정

결론

색상 대비·조화 시뮬레이터는

1. WCAG 대비율로 가독성을 평가하고,
2. 색상 조화(보색·유사색·삼각형) 아이디어를 자동 제안함으로써, 접근성과 디자인 모두를 고려한 색 선택을 도와줍니다.
   색상을 자유롭게 바꿔보며 창의적 배색과 명확한 가독성을 동시에 추구해 보세요!