WCAG 명암비 검사기
텍스트와 배경색을 입력하면 명암비와 WCAG 2.x 접근성 준수 여부를 즉시 확인할 수 있습니다.
HEX 색상 입력을 지원하며 실시간 미리보기, AA/AAA 준수 확인, 색상 개선 제안을 제공합니다.
| 준수 등급 | 일반 텍스트 | 큰 텍스트 |
|---|---|---|
|
WCAG AA
일반 4.5:1 / 큰 3:1
|
— | — |
|
WCAG AAA
일반 7:1 / 큰 4.5:1
|
— | — |
- "텍스트 색상" 칸에 글자 색 HEX 코드(예: #333333)를 입력합니다.
- "배경 색상" 칸에 배경 색 HEX 코드(예: #FFFFFF)를 입력합니다.
- 대비 비율과 WCAG 2.x AA/AAA 적합 결과가 표에 실시간으로 표시됩니다.
- "색상 개선 제안"에서 목표 등급을 만족하는 대체 색을 확인하고 클릭해 적용할 수 있습니다.
팁:본문 텍스트는 최소 4.5:1(AA), 중요한 안내문은 7:1(AAA) 이상을 권장합니다.
언제 쓰면 좋나요?
- 웹사이트, 슬라이드, 관리자 화면, 앱 화면에서 글자와 배경이 충분히 읽히는지 빠르게 확인하고 싶을 때.
- 브랜드 컬러나 UI 색상은 정해졌지만 접근성 기준을 만족하는지 점검해야 할 때.
- 디자인이나 프런트엔드 결과물을 넘기기 전에 읽기 어려운 조합을 미리 찾고 싶을 때.
왜 4.5:1 과 7:1 이야기가 자주 나오나요?
4.5:1 은 일반 텍스트에 대한 대표적인 WCAG AA 기준이고, 7:1 은 더 엄격한 AAA 목표입니다. 전경과 배경 사이의 밝기 차이를 뜻하며, 보통 숫자가 높을수록 읽기 쉬워집니다.
큰 글자와 일반 글자의 기준이 다른 이유는 무엇인가요?
큰 글자나 굵은 글자는 원래 인식하기 쉬워서 WCAG 에서 더 낮은 대비 기준을 허용합니다. 그래도 중요한 내용이라면 가능한 한 높은 대비를 유지하는 편이 안전합니다.
AA 만 통과하면 충분한가요?
대부분의 제품에서는 AA 가 실용적인 기준이지만 항상 충분한 것은 아닙니다. 정보 밀도가 높거나 보기 어려운 환경에서 쓰이거나 저시력 사용자가 많은 경우에는 AAA 를 목표로 하는 편이 좋습니다.
제안된 색상을 바로 사용해도 되나요?
빠른 수정 방향으로는 좋지만 실제 화면에서 다시 확인해야 합니다. 브랜드 톤, 시각적 위계, hover, disabled, 다크 모드 같은 상태까지 보고 최종 판단하는 것이 안전합니다.
좋은 비율이면 가독성이 완전히 보장되나요?
완전히 그렇지는 않습니다. 대비 비율은 중요한 기준이지만 글자 크기, 굵기, 줄간격, 배경 질감, 실제 표시 환경도 가독성에 영향을 줍니다. 수치와 실제 화면 확인을 함께 보세요.
소셜 콘텐츠 이미지 편집 가이드: 규격, 비주얼 일관성, 내보내기 설정
소셜 콘텐츠의 완성도는 아이디어만으로 결정되지 않습니다. 이미지 크기, 구도, 브랜드 일관성, 출력 설정까지 재사용 가능한 편집 워크플로를 정리했습니다.
색상 코드 완전 가이드：RGB·HEX·HSL 변환 원리와 디자인 활용
RGB, HEX, HSL은 모두 같은 색을 표현하지만 방식이 전혀 다릅니다. 각 색상 모델의 설계 논리, 변환 수학, 사용 기준부터 WCAG 접근성 대응까지 완벽하게 정리합니다.