🎯 색상 팔레트 & 가독성 검사기

두 색상의 WCAG 2.1 대비율을 계산하고, 디자인 초보자도 실패 없는 색상 조합을 찾아보세요.

색상 선택

배경색 (Background)

글자색 (Text / Foreground)

WCAG 2.1 점수

17.74: 1

3:1

4.5:1

7:1

일반 텍스트 (16px)✓ AAA

큰 텍스트 (18px+)✓ AAA

WCAG 2.1 기준
AA 일반 텍스트: 4.5:1 이상 | AA 큰 텍스트(18px+): 3:1 이상
AAA 일반 텍스트: 7:1 이상 | AAA 큰 텍스트: 4.5:1 이상

실시간 미리보기

Heading (24px)

The quick brown fox jumps over the lazy dog.

Body (16px)

The quick brown fox jumps over the lazy dog.

Small (12px)

The quick brown fox jumps over the lazy dog.

Button (14px)

The quick brown fox jumps over the lazy dog.

Heading (24px)✓ AAA

Body (16px)✓ AAA

Small (12px)✓ AAA

Button (14px)✓ AAA

트렌드 팔레트

클릭하면 색상이 즉시 적용됩니다

색상 팔레트 & WCAG 가독성 검사기란 무엇인가요?

색상 대비 검사기(Color Contrast Checker)는 두 색상 간의 명도 대비(Contrast Ratio)를 WCAG 2.1(Web Content Accessibility Guidelines) 기준으로 즉시 계산해주는 웹 접근성 도구입니다. 텍스트와 배경색의 조합이 시각 장애인, 색맹 사용자, 고령 사용자를 포함한 모든 사람이 읽기에 충분한 대비를 가지는지 AA/AAA 기준으로 판별합니다. 트렌딩 팔레트를 클릭 한 번으로 적용하고, 디자이너·개발자·PM 누구나 쉽게 접근성을 검증할 수 있습니다.

주요 활용 사례

🎨

UI/UX 디자인 시스템 구축

버튼 색상, 폼 레이블, 알림 메시지 등 UI 컴포넌트의 텍스트-배경 조합이 WCAG 기준을 충족하는지 검증합니다.

♿

웹 접근성(Accessibility) 준수

공공기관, 금융, 교육 사이트 등 법적으로 웹 접근성 준수가 필요한 서비스의 색상 대비를 사전에 검토합니다.

📊

프레젠테이션 & 인포그래픽

발표 자료, 대시보드, 차트의 색상 조합을 검사해 빔프로젝터 환경이나 인쇄물에서도 선명하게 보이도록 합니다.

🎯

마케팅 & 브랜드 디자인

브랜드 컬러 기반의 배너, 이메일 뉴스레터, SNS 게시물 디자인 시 텍스트 가독성을 확보합니다.

사용 방법

1
배경색 & 텍스트색 선택
색상 피커에서 배경색과 텍스트(전경)색을 선택하거나 HEX 코드를 직접 입력합니다. ↔ 버튼으로 두 색상을 스왑할 수 있습니다.
2
WCAG 점수 확인
일반 텍스트(16px) AA/AAA, 큰 텍스트(18px+) AA/AAA 기준 4가지 합격/불합격 배지를 즉시 확인합니다.
3
트렌딩 팔레트 적용
하단의 트렌딩 팔레트 카드를 클릭하면 해당 색상 조합이 즉시 적용됩니다. 다양한 팔레트를 빠르게 비교해보세요.

색상 선택

WCAG 2.1 점수

실시간 미리보기

트렌드 팔레트

색상 팔레트 & WCAG 가독성 검사기란 무엇인가요?

주요 활용 사례

사용 방법

자주 묻는 질문 (FAQ)