웹 접근성 · WCAG 대비 · 컬러 체크

색상 대비 검사기

텍스트 색상과 배경색을 입력하면 명도 대비 비율을 계산하고 WCAG AA, AAA 기준 통과 여부를 바로 확인합니다. 블로그 글, 버튼, 배너, 상세페이지 문구 색상을 정할 때 빠르게 점검해보세요.

텍스트 색상

배경색

대비 비율

17.74:1

AAA

일반 텍스트까지 AAA 기준을 통과하는 높은 대비입니다.

일반 텍스트 AA 4.5:1

통과

일반 텍스트 AAA 7:1

통과

큰 텍스트 AA 3:1

통과

큰 텍스트 AAA 4.5:1

통과

텍스트 미리보기

실제 화면에서 보이는 느낌을 확인하세요.

텍스트 미리보기

작은 본문, 굵은 제목, 버튼 문구처럼 크기가 다른 텍스트에서 색상이 충분히 읽히는지 함께 확인할 수 있습니다.

WCAG 기준에서 일반 텍스트는 AA 4.5:1 이상, AAA 7:1 이상을 권장합니다. 큰 텍스트는 AA 3:1 이상, AAA 4.5:1 이상이면 통과로 봅니다. 큰 텍스트는 보통 18pt 이상 또는 14pt 이상 굵은 글씨를 의미합니다.

대비가 낮으면 시력이 약한 사용자, 밝은 야외에서 모바일을 보는 사용자, 저품질 화면을 쓰는 사용자에게 문구가 흐리게 보일 수 있습니다. 특히 버튼, 가격, 경고 문구, 폼 에러 메시지는 배경과 충분한 차이를 두는 것이 좋습니다.

BlueShareHub는 계산기, 생산성 도구, 간단한 게임 등 일상에 바로 쓸 수 있는 기능을 모아 제공하는 무료 웹 도구 모음입니다.

각 페이지에서 입력값을 바꾸어 결과를 즉시 확인할 수 있고, 모바일과 데스크톱 모두에서 빠르게 동작하도록 설계했습니다.