색상 대비 검사기
색상
전경색과 배경색을 고르면 정확한 WCAG 대비비를 보여주고, 일반·큰 글자 크기에서 AA·AAA 통과 여부를 즉시 표시합니다. 실시간 미리보기로 실제 조합이 어떻게 보이는지 확인할 수 있습니다. 모든 처리는 브라우저에서 이루어집니다.
—
전경색(글자)
배경색
대비비
14.68:1
AA 일반✓ 통과
AA 큰 글자✓ 통과
AAA 일반✓ 통과
AAA 큰 글자✓ 통과
미리보기
다람쥐 헌 쳇바퀴에 타고파
다람쥐 헌 쳇바퀴에 타고파
사용법
- 전경색(글자색)을 고르세요.
- 배경색을 고르세요.
- 대비비와 AA/AAA 결과를 확인하세요.
- 실시간 미리보기로 가독성을 확인하세요.
자주 묻는 질문
- AA와 AAA는 어떤 대비비가 필요한가요?
- AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1; AAA는 각각 7:1, 4.5:1이 필요합니다.
- 큰 텍스트 기준은?
- 대략 18pt(24px) 이상, 또는 14pt(18.66px) 굵게 이상입니다.
- 대비비는 어떻게 계산하나요?
- 각 색의 상대 휘도를 공식 WCAG 2 공식으로 계산합니다.
- 투명도(알파)를 지원하나요?
- 아니요, 불투명 색을 비교합니다. 투명도가 있으면 실제 배경과 먼저 합성하세요.
관련 도구
이미지에서 컬러 팔레트 추출
이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.
색상00
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00