웹이나 앱을 디자인할 때 색이 예쁜 것만큼 중요한 게 '읽히는가'입니다. 아무리 세련된 배색이라도 글자와 배경의 명도 대비가 부족하면 눈이 피로해지고, 시력이 약한 사용자는 콘텐츠 자체를 읽지 못할 수도 있습니다. 이 기준을 정량적으로 제시한 것이 바로 WCAG(웹 콘텐츠 접근성 지침)의 명도 대비 기준입니다.
1. 명도 대비가 생각보다 중요한 이유
대비가 낮으면 은은해 보이는 게 아니라, 모든 사용자의 눈이 글자와 배경을 구분하기 위해 더 애써야 한다는 뜻입니다. 저시력이나 색각 이상이 있는 사용자에게는 그 차이가 '읽을 수 있다'와 '포기한다'를 가르는 기준이 되기도 합니다. 접근성은 일부 사용자만을 위한 배려가 아니라, 모든 사용자의 경험을 끌어올리는 기본기입니다.
2. AA vs AAA, 정확한 수치
WCAG는 대비율을 숫자로 규정합니다. 일반 텍스트 기준으로 AA 등급은 최소 4.5:1, AAA 등급은 7:1 이상을 요구합니다. 18pt 이상의 큰 텍스트나 굵은 14pt 텍스트는 기준이 조금 완화되어 AA는 3:1, AAA는 4.5:1이면 통과입니다. 버튼 테두리나 아이콘처럼 텍스트가 아닌 요소는 AA 기준 3:1이 적용됩니다.
숫자만 보면 복잡해 보이지만, 실무에서는 "본문 텍스트는 4.5:1을 넘겨라"라는 한 가지 원칙만 기억해도 대부분의 상황에 대응할 수 있습니다.
3. 대비 체크 도구로 빠르게 검증하기
실전에서는 이 대비율을 매번 직접 계산하기보다 대비 체크 도구를 활용하는 게 훨씬 효율적입니다. 전경색과 배경색 HEX 코드를 입력하면 대비율이 즉시 계산되고, AA·AAA 통과 여부까지 한눈에 보여주기 때문에 디자인 시안을 확정하기 전에 빠르게 검증할 수 있습니다.
4. 실무 체크리스트 4가지
- 그라데이션이나 이미지 위에 텍스트를 올릴 때는 평균이 아니라 가장 밝은 지점과 가장 어두운 지점 양쪽 모두에서 대비를 확인하세요.
- 다크모드를 함께 지원한다면 라이트모드와 다크모드 각각의 대비를 별도로 검증해야 합니다. 색이 반전됐다고 대비율이 자동으로 유지되는 게 아닙니다.
- 버튼의 비활성 상태처럼 의도적으로 흐리게 표현하는 요소는 AA 기준에서 예외로 허용되는 경우가 많지만, 완전히 무시하기보다는 최소한의 구분은 남겨두세요.
- 초기 목업 색이 아니라 실제 최종 색으로 테스트하세요. 프로젝트 후반의 작은 색상 조정이야말로 대비가 조용히 깨지는 지점입니다.
5. 다크모드에서 특히 주의할 점
다크모드는 단순히 밝기를 뒤집는 것이 아닙니다. 순수 검정 배경에 순수 흰색 텍스트를 올리면 오히려 일부 사용자에게 '헤일레이션'이라는 눈부심 효과를 일으킬 수 있어서, 많은 접근성 좋은 다크 테마는 흰색 대신 오프화이트 텍스트와 완전한 검정 대신 짙은 회색 배경을 의도적으로 사용합니다. 라이트모드와 다크모드의 대비를 각각 따로 확인하고, 라이트모드에서 통과한 조합이 반전됐다고 자동으로 괜찮을 거라 가정하지 마세요.