색
대비 · 접근성
Contrast Ratio
대비는 글자와 배경 사이의 밝기 차이를 하나의 비율로 나타낸 값으로, 가독성과 접근성을 가늠하는 기준입니다.
정의
대비는 글자와 배경 사이의 밝기 차이를 하나의 비율로 나타낸 값입니다. 가장 차이가 작은 같은 색끼리가 1:1이고, 순수한 검정 글자에 순수한 흰 배경처럼 차이가 극단적으로 큰 경우가 21:1입니다. 이 비율이 클수록 글자의 윤곽이 배경에서 또렷하게 떨어져 눈에 잘 들어오고, 작을수록 글자가 배경에 녹아들어 읽기 힘들어집니다. 여기서 말하는 밝기 차이는 눈으로 느끼는 막연한 인상이 아니라 두 색의 밝기를 정해진 공식으로 계산해 하나의 숫자로 뽑아낸 결과입니다. 그래서 대비는 취향의 문제가 아니라 측정할 수 있는 수치이며, 색을 고를 때 감이 아니라 숫자로 검증할 수 있다는 점이 무엇보다 든든합니다.
왜 중요한가
대비가 중요한 이유는 그것이 곧 '누가 이 화면을 읽을 수 있는가'를 결정하기 때문입니다. 시력이 좋은 사람이 밝은 실내에서 보면 웬만한 색도 읽히지만, 저시력 사용자나 밝은 야외에서 화면을 보는 사람, 오래된 화면을 쓰는 사람에게는 조금만 대비가 낮아도 글자가 통째로 사라집니다. 충분한 대비는 특별한 배려가 아니라 모든 사용자가 정보에 접근하기 위한 최소한의 조건입니다. 또한 대비가 확보된 화면은 더 선명하고 신뢰감 있게 느껴져서, 접근성을 지키는 일이 곧 디자인의 완성도를 높이는 일과 자연스럽게 이어집니다. 대비를 챙기는 습관은 결국 더 많은 사람이 읽을 수 있는 화면을 만드는 가장 확실한 투자입니다.
흔한 실수
- 연한 회색 글씨가 세련돼 보인다는 이유로 대비를 희생하는 경우입니다. 흰 배경 위의 옅은 회색(#CCC 같은)은 예뻐 보여도 기준에 한참 못 미쳐, 상당수 사용자에게는 글자가 거의 보이지 않습니다.
- 큰 제목의 대비만 확인하고 본문과 보조 설명, 입력창의 안내 글자를 빠뜨리는 것입니다. 정작 길게 읽어야 하는 작은 글씨일수록 더 높은 대비가 필요하며, 흐린 회색 안내 문구는 특히 놓치기 쉬운 사각지대입니다.
- 배경이 흰색 하나뿐이라고 가정하는 것입니다. 이미지 위 글자나 버튼 호버 색 위에서는 대비가 순식간에 무너질 수 있어, 실제로 겹치는 모든 상태를 함께 확인해야 합니다.
실무 팁
- WCAG 기준을 외워 두고 실무의 최소선으로 삼으세요. 본문 글자는 배경과 4.5:1 이상, 큰 글씨는 3:1 이상이어야 합니다. 슬라이더로 4.5 경계를 직접 넘나들며 어디서부터 글자가 읽히기 시작하는지 눈으로 체감해 두면 감이 정확해집니다.
- 색을 정할 때 대비 검사 도구를 곁에 두고 실시간으로 값을 확인하세요. 눈으로는 통과처럼 보여도 숫자로는 미달인 경우가 흔하므로, 측정을 습관으로 만드는 편이 안전합니다.
- 대비가 아슬아슬하다면 글자 색을 어둡게 하거나 배경을 밝게 해 여유를 두세요. 기준을 겨우 넘긴 값은 다른 화면이나 다른 조명 아래에서 쉽게 무너지므로, 살짝 넉넉하게 잡아 두는 편이 마음이 놓입니다.