🌓색상 대비 미달 시 최소 조정값 계산기

WCAG 미달 색상에서 최소 조정값 자동 제안

🌓 대비가 부족할 때, 얼마나 바꿔야 통과할까?

WCAG 대비 검사에서 불합격이 나오면 막상 어느 정도까지 색을 바꿔야 할지 감이 안 잡히는 경우가 많습니다. 무작정 진하게 바꾸면 브랜드 컬러 느낌이 사라지고, 조금만 바꾸면 여전히 기준을 통과하지 못합니다. 이 도구는 배경색은 그대로 두고, 전경색(텍스트)의 밝기만 최소한으로 조정해 목표 대비를 통과하는 정확한 값을 계산합니다.

전경색과 배경색의 상대 휘도를 계산한 뒤, 현재 대비가 이미 목표(AA 4.5:1, AA 큰 텍스트 3:1, AAA 7:1)를 만족하는지 먼저 확인합니다. 만족하지 않는다면 전경색의 색조(Hue)와 채도(Saturation)는 그대로 유지한 채 밝기(Lightness)만 이분 탐색으로 조정해, 색감을 최대한 보존하면서 가장 적은 변화로 기준을 통과하는 지점을 찾습니다.

결과에는 조정 전·후 색상을 실제 텍스트 미리보기로 함께 보여주므로 브랜드 톤이 얼마나 유지되는지 바로 확인할 수 있습니다. 만약 전경색을 순백색·순검정으로 바꿔도 기준에 도달하지 못한다면, 배경색의 밝기도 함께 조정해야 하는 상황이라는 뜻입니다.

자주 묻는 질문

왜 전경색만 조정하나요? 배경색을 바꾸면 안 되나요?

배경색을 바꿔도 됩니다. 이 도구는 텍스트 색상만 조정해 배경 브랜드 컬러를 유지하는 상황을 가정했습니다. 배경색 조정이 더 쉬운 경우라면 두 색을 바꿔 입력해 반대로 계산해 보세요.

조정이 불가능하다고 나오면 어떻게 해야 하나요?

전경색을 순백색이나 순검정으로 바꿔도 목표 대비에 도달하지 못하는 경우입니다. 이때는 배경색의 밝기도 함께 조정해야 목표 기준을 만족시킬 수 있습니다.

AA와 AAA 기준 중 어느 것을 맞춰야 하나요?

대부분의 웹 서비스는 AA 기준(4.5:1)을 최소 목표로 삼습니다. 공공기관, 금융처럼 접근성이 특히 중요한 서비스라면 AAA 기준(7:1)까지 맞추는 것을 권장합니다.