색상 대비 검사기

이게 뭔가요?

글자색과 배경색을 넣으면 WCAG 대비비를 계산하고, 웹 접근성 기준(AA·AAA)을 통과하는지 판정합니다. 실제 배색 미리보기도 함께 보여줍니다. 팔레트 생성기가 배색 추천이라면, 이쪽은 접근성 검증 전용입니다.

대비 기준 (WCAG 2.1)

큰 글씨는 18pt(약 24px) 이상 또는 14pt(약 18.66px) 굵은 글씨를 말합니다.

언제 쓰나요?

• 웹·앱 디자인에서 글자가 잘 읽히는지 확인할 때
• 공공기관·전자정부 사이트의 웹 접근성 인증(AA) 준비할 때
• 브랜드 색을 배경에 썼을 때 글자색을 흰색·검은색 중 뭘로 할지 정할 때

대비가 중요한 이유

대비가 낮으면 저시력자·고령자만 불편한 게 아닙니다. 밝은 야외에서 화면을 보는 일반 사용자, 저가 디스플레이 사용자도 흐릿한 글씨를 읽기 어렵습니다. 회색 배경에 옅은 회색 글씨(대비 2~3:1)가 대표적인 실패 사례입니다.

주의할 점

• 모든 계산은 브라우저 안에서 이뤄집니다.
• 대비비는 **색상(hue)이 아니라 밝기(휘도)**로 결정됩니다. 빨강과 초록처럼 색은 달라도 밝기가 비슷하면 대비비가 낮습니다.
• 반투명 색이나 그라디언트 배경은 정확히 판정하기 어렵습니다. 실제 렌더링되는 불투명 색으로 확인하세요.

실무에서 — 디자인 시안에서 예뻐 보이던 연회색 본문이 실제 서비스에서 “안 보인다”는 컴플레인을 부르는 경우가 많다. 브랜드 컬러를 정할 때부터 배경 위 대비를 4.5:1 이상으로 잡아 두면, 나중에 색을 전부 갈아엎는 일을 피할 수 있다.