블로그로 돌아가기
Guide 2026-04-05

접근성을 위한 색상 대비 가이드: 중요한 대비 비율

WCAG 대비 비율 요구사항과 접근 가능한 UI를 위한 색상 조합 선택 방법을 배우세요.

색상 대비는 미학만의 문제가 아닙니다 — 사용자가 콘텐츠를 읽을 수 있는지에 직접 영향을 미칩니다.

WCAG 대비 요구사항

레벨일반 텍스트큰 텍스트UI 컴포넌트

|------|-------------|-----------|-------------|

AA4.5:13:13:1 AAA7:14.5:14.5:1

대비 비율 계산

function getContrastRatio(rgb1, rgb2) {


  const l1 = getRelativeLuminance(...rgb1);


  const l2 = getRelativeLuminance(...rgb2);


  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);


}

일반적인 접근성 실패

/ 실패: 대비 비율 2.3:1 /


.placeholder { color: #aaaaaa; background: #ffffff; }
/ 통과: 대비 비율 4.6:1 /


.placeholder { color: #767676; background: #ffffff; }

색각 이상 고려

  • 적색맹: 적-녹 조합 피하기
  • 녹색맹: 가장 흔함, 남성의 8%에 영향
  • 청색맹: 청-황 조합 피하기

Color Converter 도구로 대비 비율을 확인하세요.