디자이너가 건네준 시안을 퍼블리싱하는데, 연한 회색 배경에 조금 더 연한 회색 텍스트가 올라가 있었습니다. 디자인 자체는 세련되어 보였지만, 실제로 모니터 밝기를 낮추거나 햇빛 아래서 보면 글씨가 거의 안 보이더군요. 이런 경험, 프론트엔드 개발자라면 한 번쯤 해봤을 겁니다.
색상 대비는 단순한 디자인 취향의 문제가 아닙니다. 전 세계 인구의 약 8%가 색각 이상을 가지고 있고, 노안이 진행되면 대비 감도가 떨어집니다. 밝은 야외에서 스마트폰을 쓰는 상황까지 생각하면, 충분한 색상 대비는 모든 사용자의 편의를 위한 기본 요건입니다.
WCAG가 말하는 대비 비율이란
WCAG(Web Content Accessibility Guidelines)는 웹 접근성의 국제 표준입니다. 여기서 색상 대비를 숫자로 규정하고 있는데, 이 숫자가 대비 비율(contrast ratio)입니다.
대비 비율은 1:1에서 21:1 사이의 값을 가집니다. 1:1은 두 색이 완전히 동일한 경우고, 21:1은 순수 검정과 순수 흰색의 조합입니다. 이 숫자가 클수록 대비가 강합니다.
계산은 두 색의 상대 휘도(relative luminance)를 기반으로 합니다. 단순히 색상 코드만 비교하는 게 아니라, 사람의 눈이 느끼는 밝기 차이를 수학적으로 계산하는 거예요. RGB 값에서 감마 보정을 거치고 가중 평균을 내는 과정이 있는데, 직접 계산할 필요는 없습니다. 도구가 다 해줍니다.
AA와 AAA, 어느 수준을 목표로 할까
WCAG는 두 가지 적합성 레벨을 제시합니다.
AA 레벨 (최소 기준): 일반 텍스트는 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게)는 3:1 이상이어야 합니다. 대부분의 웹사이트와 앱이 이 기준을 목표로 합니다. 법적 요구사항으로 적용하는 나라도 많아요.
AAA 레벨 (향상된 기준): 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상. 이 기준을 전체 사이트에 적용하는 건 현실적으로 어렵고, 특히 중요한 콘텐츠에 선택적으로 적용합니다.
개인적으로는 AA를 기본으로 지키되, 본문 텍스트처럼 사용자가 오래 읽어야 하는 영역에서는 AAA에 가까운 대비를 유지하는 것을 추천합니다. 실무에서 자주 겪는 문제가, 디자이너는 "이 정도면 보이잖아요"라고 하는데 실제 다양한 환경에서 테스트해보면 안 보이는 경우가 꽤 있거든요.
자주 실수하는 색상 조합들
밝은 회색 텍스트: #999999 색상의 텍스트를 흰 배경에 쓰는 건 대비 비율이 약 2.85:1밖에 안 됩니다. placeholder 텍스트에 많이 쓰는데, AA 기준에 한참 미달이에요. 최소 #767676 이상으로 어둡게 해야 4.5:1을 충족합니다.
파란색 링크: 흰 배경에 기본 파란색(#0000FF)은 의외로 대비가 괜찮습니다(8.59:1). 하지만 많이 쓰는 밝은 파란색 계열, 예를 들어 #3B82F6 같은 색은 3.13:1로 AA 미달이에요. 링크 색상은 본문과 구분도 되어야 하고 대비도 충족해야 하니 양쪽을 다 신경 써야 합니다.
색상 배경 위의 흰 텍스트: 마케팅 페이지에서 컬러풀한 배경에 흰 글씨를 얹는 디자인이 많은데, 밝은 색 배경에서는 대비가 부족한 경우가 빈번합니다. 노란색, 연두색, 하늘색 배경은 특히 위험해요.
색각 이상 사용자를 위한 고려사항
대비 비율만 지키면 다 되는 건 아닙니다. 색각 이상 중 가장 흔한 적록색맹의 경우, 빨간색과 초록색을 구분하기 어렵습니다. 그래서 "성공은 녹색, 실패는 빨간색"처럼 색상에만 의존하는 UI는 문제가 됩니다.
해결 방법은 색상 외에 추가적인 시각 단서를 제공하는 것입니다. 아이콘, 텍스트 라벨, 패턴, 밑줄 같은 요소를 함께 사용하면 색을 구분하지 못해도 정보를 이해할 수 있어요. 에러 메시지에 빨간색을 쓰되, 옆에 경고 아이콘과 "오류" 텍스트를 같이 표시하는 식입니다.
차트나 그래프를 그릴 때도 주의가 필요합니다. 빨강-초록-파랑 조합 대신, 파랑-주황-보라처럼 명도 차이가 뚜렷한 색 조합을 선택하세요. 선 그래프라면 실선, 점선, 파선 등 선 스타일을 다르게 하는 것도 좋습니다.
다크 모드에서의 색상 대비
다크 모드 지원이 보편화되면서 신경 쓸 게 두 배가 되었습니다. 라이트 모드에서 잘 보이던 색이 다크 모드에서는 배경에 묻힐 수 있고, 그 반대도 마찬가지예요.
가장 확실한 방법은 라이트/다크 모드 각각에 대해 별도의 색상 팔레트를 정의하는 것입니다. CSS 변수를 활용하면 관리가 편합니다. 예를 들어 --text-primary를 라이트에서는 #1F2937, 다크에서는 #F3F4F6으로 설정하는 식이죠.
다크 모드에서 순수 흰색(#FFFFFF) 텍스트를 쓰면 너무 눈이 부시다는 의견도 있습니다. #E5E7EB 정도의 약간 어두운 흰색을 쓰면 읽기가 편하면서도 충분한 대비를 유지할 수 있어요.
디자이너와 협업할 때
색상 대비 문제는 디자인 단계에서 잡는 게 가장 효율적입니다. 개발 중에 "이 색상 대비가 부족해요"라고 하면 디자인 수정이 번거로워지거든요.
디자이너에게 색상 대비 체크 도구를 공유하면 협업이 훨씬 수월합니다. 색상을 정할 때 바로 대비 비율을 확인할 수 있으니까요. 디자인 시스템에 "이 색상 조합은 접근성 AA를 충족합니다"라고 명시해두면, 개발자가 매번 확인하는 수고를 줄일 수 있습니다.
접근성은 출시 전에 체크하는 것보다 처음부터 반영하는 게 비용이 훨씬 적습니다. 나중에 전체 색상 체계를 바꾸는 건 정말 큰 작업이에요.