빨강과 초록이 같은 색으로 보인다면 — 색각 이상을 고려한 게임 UI 설계

남성 약 8%는 빨강과 초록을 구분하지 못합니다. 체력바·에러 표시를 색으로만 구분하면 정보가 사라집니다. 명암비 4.5:1과 3:1 기준, 다중 인코딩, 피해야 할 색 조합을 실무 기준으로 정리했습니다.

2026년 3월 10일에버스톤10분 분량디자인 · UX게임 개발 · 퍼블리싱

빨강과 초록이 같은 색으로 보인다면 — 색각 이상을 고려한 게임 UI 설계 대표 이미지

빨간 체력바와 초록 체력바를 나란히 놓으면 누구나 적과 아군을 구분할 수 있다고 생각하기 쉽습니다. 그런데 남성 약 8%에게는 두 막대가 같은 갈색으로 보입니다. 이 글은 색에만 의존한 UI가 어떻게 정보를 잃는지 보고, 실무에서 바로 쓸 수 있는 기준을 정리합니다.

이 문서는 NotebookLM(노트북 LM)으로 자료를 조사해 만든 문서입니다.

전 세계 색각 이상자는 약 3억 명, 남성의 약 8%와 여성의 0.5% 수준입니다
가장 흔한 적록색맹에게는 빨강·초록이 비슷한 갈색으로 보입니다. 피아 식별, 에러 표시가 무너집니다
기준은 두 가지입니다. 본문 텍스트 4.5:1, 큰 글자와 UI 요소 3:1 (WCAG AA)
색만 쓰지 말고 아이콘·형태·패턴·문구를 함께 씁니다. 이것이 다중 인코딩입니다
브랜드 때문에 적록을 써야 한다면 색조 대신 명도 차이를 벌립니다

보이지 않는 장벽

전 세계 3억 명이 마주하는 보이지 않는 장벽 슬라이드. 디자인의 사각지대인 색각 이상(CVD)으로 전 세계 남성의 약 8%, 여성의 0.5%가 매일 게임과 웹에서 시각적 장벽을 경험한다는 설명. 세 지표 — 3억 명(전 세계 색각 이상자 인구), 8%(남성 인구의 적록 색맹·색약 비율), 사용성 저하(에러 메시지 혼동, 게임 내 피아식별 실패 등 치명적 UX 저하 발생)

색에만 의존하면 정보가 사라진다

아래는 같은 화면을 일반 시야와 제2색각 이상 시야로 비교한 것입니다. 왼쪽에서는 분명하던 구분이 오른쪽에서는 사라집니다.

색에 의존한 디자인이 초래하는 오독 슬라이드. 왼쪽 일반 시야에서는 빨간 ENEMY 체력바와 초록 PLAYER 체력바, 빨간 Error 입력창과 초록 Success 입력창이 구분된다. 오른쪽 제2색각 이상 시야에서는 네 요소가 모두 비슷한 갈색으로 보여 구분되지 않는다

게임에서 이 문제는 곧바로 실력 차이로 이어집니다. 적과 아군, 획득 가능한 아이템과 불가능한 아이템, 남은 쿨타임 같은 정보가 색 하나에 실려 있으면 그 정보를 못 받는 사람이 생깁니다.

기준 1 — 명암비 4.5:1과 3:1

접근성의 출발점은 대비입니다. 본문 텍스트는 배경과 4.5:1 이상, 18pt 이상의 큰 글자나 아이콘·입력창 테두리 같은 UI 요소는 3:1 이상이어야 합니다.

명암비는 두 색의 밝기 비율입니다. 1:1(같은 색)에서 21:1(검정과 흰색)까지 나오고, 국내 지침(KWCAG)도 같은 기준을 씁니다.

접근성의 기초 슬라이드. 글로벌 웹 콘텐츠 접근성 지침(WCAG 2.2)과 한국형 지침(KRDS/KWCAG 2.2)의 핵심은 텍스트와 배경 간 빛의 밝기 차이를 확보하는 것이라는 설명. 명도 대비 공식은 상대 휘도의 비로 1:1부터 21:1까지 산출되며, 고대비 화면은 색각 이상자뿐 아니라 야외에서 모바일을 보는 일반 사용자의 가독성도 높인다. 아래 막대에 3:1(큰 텍스트)과 4.5:1(본문 텍스트) 지점이 표시되고 그 오른쪽이 UI 디자인 안전 구간

4.5:1과 3:1의 절대 법칙 슬라이드. 위쪽 본문 텍스트는 명암비 2.8:1이 실패, 8.5:1이 통과. 아래쪽 큰 텍스트 및 비텍스트 UI는 명암비 1.5:1이 실패, 4.0:1이 통과. 기준은 WCAG AA

실무에서는 디자인 단계에서 이 값을 재 두는 편이 빠릅니다. 나중에 QA에서 지적되면 색 하나를 바꾸는 데 관련 화면 전체를 다시 손봐야 합니다.

기준 2 — 색 말고 하나를 더 준다

색은 정보를 나르는 여러 수단 중 하나여야 합니다. 같은 정보를 형태, 아이콘, 문구로 한 번 더 전달하면 색을 못 보는 사용자도 이해합니다.

핵심 원칙 슬라이드. WCAG 1.4.1(Use of Color) — 정보를 전달하거나 동작을 지시하거나 응답을 유도하는 유일한 시각적 수단으로 색상을 사용해서는 안 된다는 설명. 색상 + 형태 + 텍스트 = 완벽한 소통이라는 도식과 함께, 붉은 원 하나만 있는 Bad 예시와 X 아이콘에 '에러 발생' 문구가 붙은 Good 예시 비교

형태와 아이콘의 결합 슬라이드. 버튼의 기능과 폼의 상태를 색상만으로 구분하는 것이 색각 이상자에게 가장 빈번한 사용성 저하 원인이라는 설명. Don't 쪽은 테두리 색만 붉은 입력창과 색으로만 구분된 제출 버튼, Do 쪽은 경고 아이콘과 '이 필드는 필수입니다' 문구가 함께 있는 입력창과 체크 아이콘이 붙은 제출 버튼

데이터 시각화나 맵에서는 빗금·점무늬 같은 패턴이 효과적입니다. 흑백으로 인쇄해도 구분되는지가 간단한 점검 방법입니다.

텍스처와 패턴의 활용 슬라이드. 왼쪽은 색상에만 의존한 3분할 원그래프(Bad), 오른쪽은 빗금과 점무늬 텍스처에 데이터 A·B·C 레이블을 붙인 원그래프(Good). 대량의 데이터를 분류하거나 게임 내 맵을 설계할 때 텍스처를 활용하면 전색맹 사용자도 정보를 명확히 인지할 수 있다는 설명

피해야 할 색 조합

특정 조합은 인접해 놓았을 때 경계가 완전히 사라집니다.

치명적인 색상 조합 슬라이드. 적녹(Red-Green), 녹갈(Green-Brown), 청자(Blue-Purple) 세 조합이 색각 이상 시야에서 각각 비슷한 갈색·갈색·파랑으로 뭉개지는 비교 그림. 특히 인접하게 배치될 경우 경계선이 완전히 무너진다는 설명

반대로 안전한 조합도 정리돼 있습니다. 파랑을 기준색으로 두는 조합이 가장 무난합니다.

안전하고 강력한 색상 조합 슬라이드. 청록-주황(Blue-Orange)은 제1·제2색각 이상 모두에게 가장 완벽한 대비를 제공하고, 파랑-빨강(Blue-Red)과 파랑-갈색(Blue-Brown)도 안전한 조합으로 제시된다. 참고로 파란색은 대체로 가장 안전한 기준 색상이며 제3색각 이상(청황색맹)은 극히 드물다는 설명

브랜드 색을 못 바꿀 때 — 명도로 푼다

IP나 브랜드 가이드 때문에 적록을 써야 하는 경우가 있습니다. 이때는 색조를 바꾸는 대신 명도(밝기)와 채도를 크게 벌립니다.

명도차를 활용한 팔레트 설계 슬라이드. Don't 쪽은 비슷한 밝기의 빨강과 초록이 흑백 변환 시 똑같은 회색으로 뭉개진다. Do 쪽은 아주 어두운 적색과 아주 밝은 연녹색을 써서 흑백 모드에서도 짙은 검은색과 밝은 흰색으로 완벽하게 구분된다. 거의 모든 사용자가 밝기 차이는 인지할 수 있다는 설명

빨강·초록을 유지하면서도 명도를 벌리면 색각 이상 여부와 무관하게 구분됩니다. 색맹 모드를 따로 만들기 전에 기본 팔레트 자체를 이렇게 설계하는 것이 비용이 적게 듭니다.

링크와 포커스도 색만으로 구분하지 않는다

키보드로 이동할 때 지금 어디에 있는지, 어떤 글자가 링크인지도 같은 원칙을 따릅니다.

직관적인 인터랙션 단서와 이미지 가이드라인 슬라이드. 명확한 포커스(탭 키 이동 시 포커스된 요소는 배경과 3:1 이상의 명도 대비를 갖는 굵은 아웃라인으로 표시), 하이퍼링크 강조(본문 링크는 색상 변화에만 의존하지 말고 밑줄이나 굵기 변화를 동반), 대체 텍스트(정보를 담은 이미지에는 스크린 리더를 위한 명확한 대체 텍스트를 제공하고 텍스트가 포함된 이미지 사용은 지양). 오른쪽에 주황색 아웃라인이 둘러진 다음 단계 버튼과 밑줄 친 링크 예시

마무리 슬라이드. '색에 의존하지 않는 디자인이 가장 강력한 디자인이다'라는 문구와 함께, 명확한 대비·다중 인코딩 패턴·영리한 팔레트로 포용적이고 완성도 높은 서비스를 만들라는 설명. 아래에 '디자인 시스템의 기준을 높이세요. 모두를 위해서'

자주 묻는 질문

게임에 색맹 모드를 따로 넣어야 하나요? 옵션을 제공하면 좋지만, 그전에 기본 화면부터 손보는 편이 효과가 큽니다. 색맹 모드는 결국 팔레트를 바꿔 끼우는 기능이라, 정보를 색 하나에만 싣는 구조라면 모드를 켜도 문제가 남습니다. 형태·아이콘·수치를 함께 쓰는 설계가 먼저입니다.

명암비는 어떻게 확인하나요? 디자인 도구의 대비 검사 플러그인이나 웹 기반 검사기로 두 색의 비율을 계산합니다. 확인할 대상은 본문 텍스트와 배경, 버튼 글자와 버튼 배경, 입력창 테두리와 주변 배경입니다. 게임은 배경이 화면마다 달라서, 텍스트 뒤에 반투명 판을 깔아 대비를 확보하는 방법을 많이 씁니다.

체력바처럼 색으로 구분하던 요소는 어떻게 바꾸나요? 아이콘과 위치, 수치를 함께 씁니다. 적과 아군을 색뿐 아니라 마커 모양으로 구분하고, 막대 안에 숫자를 넣거나 테두리 형태를 다르게 합니다. 팀 색을 쓰더라도 명도를 벌려 두면 흑백으로 봐도 구분됩니다.

접근성을 챙기면 게임 분위기가 깨지지 않나요? 대비를 올리는 것과 색을 없애는 것은 다릅니다. 분위기는 배경과 이펙트에서 만들고, 정보를 전달하는 UI 요소에만 기준을 적용하면 충돌이 적습니다. 오히려 정보가 잘 읽히는 화면이 완성도 있게 보입니다.

저희가 이 이야기를 하는 이유

에버스톤은 게임과 학습 앱을 함께 만들고 운영합니다. 학습 앱은 정답·오답 표시가 잘못 읽히면 학습 자체가 망가지고, 게임은 피아 식별이 안 되면 플레이가 불가능합니다. 그래서 색 대비와 아이콘 병행을 디자인 단계의 기본 규칙으로 두고 있습니다. 이 사이트의 버튼과 배지도 흰 글자 대비를 계산해 정했습니다.

이 자료가 인용한 인구 비율과 WCAG 기준은 널리 쓰이는 공개 표준이며, 화면 예시는 자료의 그림을 그대로 옮긴 것입니다.