[UX/UI 디자인] 모두를 위한 디자인 시작하기: 색각 이상자를 고려한 디자인 접근성 가이드

아름다움 속에 공존하는 배려, 디자인 접근성 (Design Accessbility)

디자이너로서 멋진 디자인을 만들어 내야 한다는 생각은 늘 하고 있다. 디자인 결과물들이 나오면서 점점 크게 느껴지는 숙제 중 하나는 '누가 이 디자인을 보는가'에 대한 질문에 대한 답이다. 인터랙티브 미디어 디자인(INM)을 공부하며 깨닫게 된 한 가지 중요한 핵심 가치는, 좋은 디자인이란 단순히 시각적으로 아름다운 것에 만 끝나지 않고 모든 사용자가 동일한 정보를 얻고 아름다움을 같이 느낄 수 있어야 한다는 점이다. 

 

찾아보니 전 세계 인구의 약 8% 이상의 남성과 0.5%의 여성이 다양한 형태의 색각 이상을 겪고 있다고 한다. 이들에게는 우리가 설정한 강조 색상이 배경과 구분이 되지 않거나, 중요한 경고 메시지가 전달되지 않을 수 있다. 오늘은 학교 과제에서 다루었던 실무적인 기법들을 중심으로, 색각 이상자를 위한 컬러 접근성 확보 전략을 심도 있게 살펴보려고 한다.

색각 이상자에게 다르게 보여지는 디자인 결과물

1. 색각 이상의 종류와 시각적 특성 이해

효과적인 디자인을 위해서는 먼저 사용자가 세상을 어떻게 보는지 이해보려고 한다. 색각 이상은 크게 세 가지 유형으로 나뉜다.

• 제1색맹 및 색약 (Protanopia): 적색 원추세포의 결손으로 인해 빨간색과 초록색을 구분하기 어렵고, 빨간색이 매우 어둡게 보인다.
• 제2색맹 및 색약 (Deuteranopia): 가장 흔한 유형으로, 녹색 원추세포의 문제로 인해 빨간색과 초록색의 차이를 느끼지 못함.
• 제3색맹 및 색약 (Tritanopia): 가장 드문 경우이지만 청색 원추세포의 영향으로 파란색과 노란색을 구분하는 데 어려움을 겪는다. 

디자이너는 이러한 시각적 차이를 인지하고, 색상에만 의존하지 않는 정보 전달 체계를 구축해야 한다. 이는 기업의 사회적 책임(CSR)이자 진정한 의미의 포용적 디자인(Inclusive Design)의 시작이라고 할 수 있다. 

 

2. WCAG 2.1 가이드라인과 대비 최적화 전략

웹 콘텐츠 접근성 가이드라인(WCAG)은 접근성 설계를 위한 논리적 근거를 제공한다. 가장 핵심적인 기준은 텍스트와 배경 사이의 명도 대비(Contrast Ratio)를 주어서 디자인적인 효과를 얻어내는 방법이다. 

• AA 등급 (표준): 일반 텍스트의 경우 최소 4.5:1 이상의 대비를 확보해야 하며, 큰 텍스트는 3:1 이상이어야 한다.
• AAA 등급 (심화): 더 높은 접근성을 위해 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상의 대비를 권장한다. 

단순히 밝고 어두운 차이를 넘어서, 명도(Luminance) 값을 확인하는 습관이 중요하다. 타이포그래피에 관심이 많은 디자이너라면 글꼴의 굵기(Weight)를 조절하여 대비감을 보완하는 영리한 전략을 가져가 볼 수 있다.

 

3. 실무 툴을 활용한 접근성 검증 방법

최근 과제에서 활용했던 어도비(Adobe) 제품군과 다양한 도구들은 접근성 검토를 더 쉽게 할 수 있게 도와준다. 

색각이상자에게도 보일 수 있는 컬러 조합을 체크하는 모습

 

• Adobe Color의 접근성 도구: 인디자인이나 일러스트레이터로 작업을 옮기기 전, Adobe Color 사이트에서 선택한 팔레트가 색각 이상자에게 어떻게 보이는지 실시간으로 시뮬레이션할 수 있다. 만약 색각이상자에게 보이지 않는 컬러가 있다면 빨간색 느낌표 표시가 뜬다. 이렇게 직관적으로 컬러 모듈을 체크하고, 라이브러리에 추가하면 바로 어도비 툴에 불러올 수 있어서 가장 편하게 사용했다. 
• Color Oracle: 디자이너를 위한 무료 색맹 시뮬레이터로, 프로그램을 다운 받아 사용해 보았다. 현재는 프로그램이 업데이트가 안되었는지 툴은 사용하기가 조금 불편했지만 바로 색맹/색약 이 있을 경우 어떻게 보이는지 알 수 있어서 확인 용으로 좋았다. 
• Sim Daltonism: 맥(Mac)이나 윈도우 환경에서 화면 전체에 색각 이상 필터를 씌워 디자인 결과물을 즉각적으로 확인할 수 있는 유용한 도구이다. 
• Figma Plugins: Stark와 같은 플러그인을 사용하면 작업 중인 UI 디자인의 대비 점수를 바로 확인하고 수정할 수 있어 작업 효율성을 극대화한다. 

특히 인디자인의 컬러 스와치 관리 기법을 활용하면, 접근성이 검증된 컬러 세트를 등록해 두고 문서 전체에 일관되게 적용할 수 있어서 이전 인디자인 블로그 글을 참고 링크로 추가한다.

 

2026.02.27 - [디자인 툴 (Design Tools)] - [InDesign] 편집 디자인의 효율을 극대화하는 컬러 스와치(Swatches)와 단락 스타일(Paragraph Styles) 활용법

 

4. 색상 이외의 보조 장치 활용하기

컬러 접근성의 핵심은 색상이 없어도 정보가 전달되어야 한다는 점이다. 컬러 외에 적용 가능한 팁들을 공유해 본다. 

• 패턴과 질감 활용: 그래프나 차트를 설계할 때 색상으로만 영역을 구분하지 않고, 점선이나 사선 등의 패턴을 넣어 가독성을 높인다.
• 텍스트 라벨 병기: 상태를 표시하는 아이콘(예: 성공-초록, 실패-빨강) 옆에는 반드시 '성공', '실패'라는 텍스트를 함께 적어준다.
• 밑줄과 아이콘 활용: 링크 텍스트에는 색상 변화뿐만 아니라 밑줄(Underline)을 추가하여 클릭 가능한 영역임을 명확히 표시한다.

 

공감을 디자인하는 디자이너의 자세

색각 이상자를 위한 디자인은 단순히 규정을 지키는 작업이 아니다. 그것은 우리가 만든 인터페이스가 누군가에게 소외감을 주지 않도록 배려하는 공감의 과정이라고 생각한다. 디자인 과제를 수행하는 동안 학습과 실습을 통해, 기술적인 숙련도만큼이나 중요한 것은 사용자의 다양한 환경을 이해하려는 열린 마음이라는 것을 다시금 깨달았다는건 디자이너의 자질을 하나 갖추게 된 정말 중요한 포인트이다. 

나 뿐만 아니라 이 글을 읽고 있는 디자이너 분들이 앞으로도 디자인 툴의 기능을 완벽히 익히는 동시에, 모든 사용자가 장애물 없이 정보를 향유할 수 있는 세상을 만드는 데 기여하는 디자이너로 성장해 나갔으면 좋겠다.