WCAG 명암비 검사기

텍스트와 배경색을 입력하면 명암비와 WCAG 2.x 접근성 준수 여부를 즉시 확인할 수 있습니다.

HEX 색상 입력을 지원하며 실시간 미리보기, AA/AAA 준수 확인, 색상 개선 제안을 제공합니다.

제보
색상 입력
미리보기
일반 텍스트 — 보통 크기 샘플 텍스트(16px)
큰 텍스트 — 제목 샘플(24px)
굵은 텍스트 — 소제목 샘플(18.67px bold)
명암비
:1
1:1 3:1 4.5:1 7:1 21:1
WCAG 2.x 준수 여부
준수 등급 일반 텍스트 큰 텍스트
WCAG AA
일반 4.5:1 / 큰 3:1
WCAG AAA
일반 7:1 / 큰 4.5:1
일반 텍스트: 18pt 미만 또는 굵은 14pt 미만
큰 텍스트: 18pt 이상 또는 굵은 14pt 이상
색상 개선 제안
디자인 팁
명암비가 낮으면 저시력 사용자가 읽기 어렵고 밝은 환경에서도 가독성이 떨어집니다. 본문은 최소 4.5:1을 목표로 하세요.
큰 텍스트(18pt 이상, 굵은 14pt 이상)는 3:1의 완화된 기준이 적용됩니다. 큰 글자가 기본적으로 읽기 쉽기 때문입니다.
WCAG AAA는 가장 엄격한 기준입니다. 중요한 본문과 설명 텍스트에서 7:1 이상을 목표로 하세요.
텍스트·배경 색 지정
왼쪽 컬러 피커나 HEX 입력으로 지정합니다. 도구 모음의 「색상 교체」로 전경과 배경을 바꾸거나 빠른 프리셋으로 조합을 시험해 보세요.
미리보기와 명암비 확인
오른쪽 패널에 샘플 문구, 명암비 수치, 적합 라벨, 1:1~21:1 눈금 위치가 실시간으로 표시됩니다.
WCAG 대조 후 제안 적용
아래 표에서 AA/AAA가 일반·큰 텍스트에 대해 충족되는지 확인하고, 오른쪽 제안에서 한 번에 더 안전한 색으로 바꿀 수 있습니다.
언제 이 도구를 쓰면 좋나요?
웹·슬라이드·관리 화면·앱 UI에서 글자와 배경이 충분히 읽히는지 빠르게 확인하고 싶을 때, 또는 브랜드 컬러는 정해졌지만 접근성 목표와의 대략적인 부합을 점검하고 싶을 때 유용합니다.
왜 4.5:1 과 7:1 이야기가 자주 나오나요?
4.5:1 은 본문에 흔히 쓰이는 WCAG AA 기준이고, 7:1 은 더 엄격한 AAA 목표입니다. 전경과 배경 사이 밝기 차이를 나타내며, 보통 숫자가 높을수록 읽기 쉬워집니다.
큰 글자와 일반 글자의 기준이 다른 이유는 무엇인가요?
큰 글자나 굵은 글자는 원래 인식하기 쉬워서 WCAG 에서 더 낮은 대비 기준을 허용합니다. 그래도 중요한 내용이라면 가능한 한 높은 대비를 유지하는 편이 안전합니다.
AA 만 통과하면 충분한가요?
대부분의 제품에서는 AA 가 실용적인 기준이지만 항상 충분한 것은 아닙니다. 정보 밀도가 높거나 보기 어려운 환경, 저시력 사용자가 많은 경우에는 AAA 를 목표로 하는 편이 좋습니다.
제안된 색상을 바로 본격 사용해도 되나요?
빠른 수정 방향으로는 좋지만 실제 화면에서 다시 확인해야 합니다. 브랜드 톤, 시각적 위계, hover·비활성·다크 모드 같은 상태까지 보고 최종 판단하는 것이 안전합니다.
색상 이론 프론트엔드 디자인 도구
2026-03-22

색상 코드 완전 가이드:RGB·HEX·HSL 변환 원리와 디자인 활용

RGB, HEX, HSL은 모두 같은 색을 표현하지만 방식이 전혀 다릅니다. 각 색상 모델의 설계 논리, 변환 수학, 사용 기준부터 WCAG 접근성 대응까지 완벽하게 정리합니다.

데이터 시각화 차트 디자인 Y축 절단
2026-05-14

그래프도 거짓말을 한다:Y축 절단·3D 파이 차트·시각 디자인 함정 완전 해설

잘못 설계된 그래프 하나가 5% 성장을 폭발적 성장처럼 보이게 만들고, 거의 같은 수치를 하늘과 땅 차이처럼 보이게 합니다. Y축 절단, 3D 효과, 파이 차트 분할 방식 등 가장 흔한 그래프 조작 기법과, 직접 그래프를 만들 때 독자를 오해시키지 않는 방법을 분석합니다.

색상 대비 접근성 WCAG
2026-04-07

색상 대비와 접근성: WCAG 기준·대비율 계산 원리와 개선 기법

색상 대비율은 접근 가능한 웹 디자인의 핵심 지표로, 저시력·색맹·일반 사용자의 다양한 환경에서의 가독성에 영향을 미칩니다. WCAG 2.1 AA/AAA 등급, 상대적 휘도 계산 공식, 흔한 디자인 실수와 수정 전략을 설명합니다.

이미지 처리 이미지 압축 색상 공간
2026-06-04

디지털 이미지 처리: 색상 공간 및 압축 기술 성능 가이드

디지털 이미지의 색상 형식 선택, 압축 알고리즘의 차이, 그리고 화질과 파일 크기의 균형을 맞추기 위한 최적화 전략을 깊이 있게 다룹니다.

캐러셀 정보게시판 Carousel
2026-04-27

정보 게시판 완전 가이드:캐러셀 전시·공지 디자인·이벤트 홍보의 시각적 기법

공지사항, 이벤트 이미지, 브랜드 메시지를 하나의 화면에 담고 싶나요? 슬라이드쇼형 정보 게시판이 공간 효율이 가장 높은 해결책입니다. 세 가지 콘텐츠 모드, 전환 속도 설정 원칙, 텍스트 가독성 팁과 함께 무료 온라인 도구로 코딩 없이 5분 만에 전문가 수준의 게시판을 만드는 방법을 안내합니다.

색채 심리학 색상과 감정 디자인 심리
2026-04-18

색채 심리학: 색상이 감정, 결정, 행동에 미치는 영향

색상은 단순한 시각적 요소가 아니라 우리의 감정, 주의력, 소비 결정에 직접적인 영향을 미칩니다. 빨간색이 긴박감을 유발하고, 파란색이 신뢰를 구축하며, 초록색이 건강을 전달하는 심리적 메커니즘을 심층 분석하고, 문화적 차이와 디자이너가 색채 심리학을 활용하는 방법을 소개합니다.