색상 대비 검사기

색상 대비 검사기란?

전경색(텍스트)과 배경색의 대비율(contrast ratio) 을 계산하고, 해당 색상 조합이 WCAG 2.0 접근성 가이드라인의 AA 및 AAA 수준을 충족하는지 확인하는 도구입니다. 색맹 시뮬레이션, 자동 수정 제안, 다양한 프레임워크용 코드 출력 기능도 제공합니다.

색상 대비 확인 방법

색상 선택

• Color A (전경/텍스트)와 Color B (배경) 각각에 hex 입력 필드와 컬러 피커가 있습니다.
• Shade Scale로 명도를 미세 조정할 수 있습니다. shade를 클릭하면 즉시 적용됩니다.
• Color Wheel로 Color A의 색상(hue)을 시각적으로 조정합니다. 아래에 표시되는 보색을 클릭하면 Color B로 적용됩니다.
• Swap 버튼으로 Color A와 Color B를 교체합니다.

결과 해석

결과	의미
대비율	1:1(동일)부터 21:1(흑백)까지의 수치. 높을수록 좋습니다.
A11y Score	대비율 기반 접근성 점수 (100점 만점).
WCAG AA / AAA	일반 텍스트와 큰 텍스트 각각의 통과/실패 여부.
미리보기	선택한 색상으로 제목, 본문, 버튼, 뱃지, 입력 필드, 카드를 실제로 보여줍니다.
수정 제안	AA 기준 미달 시, 가장 가까운 통과 shade를 클릭 가능한 카드로 제안합니다. 클릭하면 즉시 적용.

WCAG 기준

수준	일반 텍스트	큰 텍스트
AA	4.5:1 이상	3:1 이상
AAA	7:1 이상	4.5:1 이상

• 일반 텍스트: 18pt 미만 (또는 14pt 볼드 미만)
• 큰 텍스트: 18pt 이상 (또는 14pt 볼드 이상)

추가 기능

• Undo / Redo — 색상 변경 이력을 단계별로 되돌리거나 다시 적용합니다.
• Share Result — 현재 색상이 포함된 URL을 복사합니다. 링크를 열면 동일한 색상 조합을 볼 수 있습니다.
• Pin — 최대 8개 색상 조합을 저장하여 나란히 비교합니다. 저장된 조합을 클릭하면 다시 불러옵니다.
• Brand Colors — Spotify, Slack, GitHub 등 8개 브랜드의 실제 색상 팔레트와 대비율을 표시합니다. 클릭하면 해당 색상을 불러옵니다.
• A11y Check — 4종 색맹(적색맹, 녹색맹, 청색맹, 전색맹)에서의 색상 변환과 실질 대비율을 시뮬레이션합니다.
• Code Output — CSS, Tailwind 4, Tailwind 3, Flutter, React 형식의 코드를 생성합니다. 접을 수 있으며 기본 펼침 상태입니다.
• Randomize / Clear All — 랜덤 접근성 통과 색상 조합을 생성하거나, 기본값으로 초기화합니다.

활용 예시

예시 1: 흔한 실수 — 흰 배경에 회색 텍스트

밝은 회색 텍스트는 세련돼 보이지만 접근성에 실패합니다.

• Color A: #999999, Color B: #ffffff
• 대비율: 2.85:1 — AA 실패
• 수정 제안이 shade 600 (#595959)을 추천합니다 — 4.9:1로 AA 통과. 카드를 클릭하면 즉시 적용.

예시 2: 브랜드 팔레트 검증

Brand Colors에서 Spotify를 클릭합니다.

• Color A: #191414 (검정), Color B: #1DB954 (초록)
• 대비율: 4.9:1 — AA 통과, AAA 실패
• Pin으로 저장한 뒤, LinkedIn (#ffffff on #0A66C2, 4.7:1)도 저장해서 비교합니다.

예시 3: 다크 모드 설계

어두운 네이비 배경에서 읽기 좋은 텍스트 색상 찾기.

• Color A: #e0e0e0, Color B: #1a1a2e
• 대비율: 12.4:1 — AA/AAA 모두 통과
• A11y Check를 열어 4가지 색맹 유형 모두 통과하는지 확인합니다.

예시 4: 개발자 워크플로 — 코드 내보내기

적절한 색상 조합을 찾은 후 Code Output을 펼치고 프레임워크를 선택합니다:

• CSS: --fg, --bg 커스텀 속성
• Tailwind 4: 임의 색상값
• React: 인라인 스타일 객체

코드 스니펫을 프로젝트에 바로 붙여 넣으세요.

핵심 팁

• Brand Colors부터 시작하세요. 기존 브랜드 색상을 검사한다면 hex를 직접 입력하지 말고 프리셋에서 클릭하세요.
• 수정 제안을 활용하세요. 대비 실패 시 직접 값을 조정하지 말고, 제안 카드를 클릭하면 가장 가까운 통과 shade로 자동 이동합니다.
• Pin으로 비교하세요. 여러 색상 후보를 검토할 때 각각 Pin에 저장하면 나란히 비교하고 다시 불러올 수 있습니다.
• 색맹도 확인하세요. WCAG를 통과해도 색맹 사용자에게는 구분이 어려울 수 있습니다. A11y Check 섹션에서 확인하세요.
• 결정을 공유하세요. Share Result로 색상 조합 URL을 디자이너나 리뷰어에게 보낼 수 있습니다.

공식

WCAG 2.0에서 정의하는 상대 휘도(relative luminance) 기반 대비율:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

변수	의미
$CR$	대비율 (Contrast Ratio)
$L_1$	더 밝은 색의 상대 휘도
$L_2$	더 어두운 색의 상대 휘도

상대 휘도는 sRGB 색공간에서 선형 변환 후 가중합으로 계산됩니다: $L = 0.2126R + 0.7152G + 0.0722B$

자주 묻는 질문

AA와 AAA 중 어떤 것을 목표로 해야 하나요?

AA는 대부분의 국가에서 법적 최소 기준입니다. AAA는 가독성이 더 좋지만 모든 디자인 요소에서 달성하기 어렵습니다. 현실적인 접근: 본문은 AA, 경고나 오류 같은 중요 정보는 AAA를 목표로 하세요.

WCAG 통과가 색맹 사용자에 대한 접근성을 보장하나요?

WCAG 대비율은 휘도를 확인하지, 색상 구별을 확인하지 않습니다. 통과한 조합도 색맹 사용자에게는 동일하게 보일 수 있습니다. A11y Check 섹션에서 확인하고, 색상 외에 아이콘이나 텍스트 라벨도 함께 사용하세요.

어떤 코드 형식을 지원하나요?

CSS 커스텀 속성, Tailwind CSS v3/v4 (임의 값), Flutter Color() 객체, React 인라인 스타일을 지원합니다. Code Output 섹션의 토글에서 형식을 선택하세요.

색상 조합을 저장하고 공유할 수 있나요?

네. Pin은 최대 8개 조합을 로컬에 저장하여 비교할 수 있습니다. Share Result는 색상이 포함된 URL을 복사합니다 — 링크를 열면 동일한 조합을 볼 수 있습니다.