색맹 사용자를 위한 UI 디자인

색맹은 인구의 상당한 부분을 차지합니다. 정확히는 남성 12명 중 1명, 여성 200명 중 1명입니다. 그러나 색맹 사용자는 UI 디자인에서 종종 간과되는 청중입니다.

많은 사람들이 색맹을 흑백으로 보는 것으로 착각합니다. 이것이 한 가지 유형이지만 덜 희귀하고 덜 극단적인 버전이 있습니다.

대부분의 사람들은 삼색성으로 색을 녹색, 빨강 및 파랑의 세 가지 색상 조합으로 인식합니다. 다양한 유형의 색맹 또는 색각 이상(CVD)은 이러한 색상 중 하나 이상을 명확하게 인식할 수 없기 때문에 발생합니다. 가장 흔한 CVD 유형은 적색과 녹색을 구별하기 어려운 적록 색맹과 붉은 색이 흐릿하게 보이는 적색 색맹입니다.

우리는 모든 사람이 공정하고 평등하게 인터넷에 액세스할 수 있어야 한다고 생각하므로 UI ​​디자이너는 색맹 사용자를 염두에 두고 디자인하는 것이 필수적입니다. 미국 장애인법(ADA)은 특정 조직이 WCAG 2.0 레벨 AA 지침을 충족하도록 요구하기까지 합니다.

웹 사이트를 ADA 규격으로 만드는 것은 어렵지 않지만 색상 접근성을 고려한다는 의미입니다. 법적 영향 외에도 색맹 사용자를 위한 디자인은 제공하는 사용자 경험에 매우 중요합니다.

색맹을 위한 디자인이 중요한 이유

색상 이론은 사용자의 구매 결정, 감정적 반응 및 전반적인 사용자 경험에 영향을 미치는 힘이 있기 때문에 UI 디자인에서 큰 역할을 합니다. 올바른 브랜드 색상을 선택하는 것이 비즈니스에 얼마나 중요한지 생각해 보십시오. 이제 8% 이상의 사람들이 선택한 색상 때문에 로고나 웹사이트를 읽을 수 없다고 상상해 보십시오. 그것은 많은 기회를 잃어버린 것입니다.

색맹 사용자는 특정 색상을 구분할 수 없기 때문에 디자이너는 디자인의 가독성이나 감정적 영향을 색상에만 의존할 수 없습니다. 색상을 사용할 때 사용자가 색상과 상호 작용하는 방식을 고려하고 색맹 회원을 포함하여 대상 청중에게 어필하는 인터랙티브한 디자인을 만들어야 합니다. 사용자의 고충에 공감하여 예방하고 해결할 수 있도록 하는 것이 디자이너의 몫입니다.

요즘에는 특정 유형의 색맹에 맞게 컴퓨터 디스플레이를 조정할 수 있는 Visolve와 같은 도구가 있지만 모든 색맹이 이러한 도구를 사용하는 것은 아닙니다. 심지어 모든 색맹인도 자신이 색맹이라는 것을 아는 것은 아닙니다.

귀하의 웹사이트가 색상 접근성을 고려하는 유일한 장소가 아니라는 점에 유의하는 것이 중요합니다. 귀하의 소셜 미디어도 시각 장애인과 시각 장애인이 액세스할 수 있도록 만들 수 있습니다.

알아야 할 색상 용어

색맹 사용자를 위한 UI 디자인 모범 사례를 시작하기 전에 디자인 전문가가 아닌 사람들을 위해 기본 색상을 검토하는 것이 좋습니다. 색 구성표를 선택할 때 고려해야 할 4가지 주요 구성 요소가 있습니다.

색조: '색상'의 동의어이며 색상의 스펙트럼 파장에 의해 결정됩니다.

채도: 채도 라고도 하며, 회색의 양에 따라 색상이 얼마나 강렬하거나 순수한지를 나타냅니다. 회색이 적을수록 더 밝은 색상이 나타납니다.

밝기: 밝기는 색상에 추가된 흰색 또는 검정색의 양에 따라 각각 색조와 음영을 생성합니다.

온도: 색상을 감지하는 정도의 따뜻함 또는 차가움을 나타냅니다. 컴퓨터 모니터는 색상의 감지 온도에 영향을 줄 수 있습니다.

색맹 사용자를 위한 디자인 방법

색맹을 위한 디자인은 제품을 덜 매력적으로 만드는 것을 의미하지 않습니다. 이는 단지 설계 과정에서 특정 모범 사례를 따르는 것을 의미합니다. 좋은 UX 및 UI 디자인 원칙을 구현하는 것은 장기적으로 웹사이트의 유용성을 향상시킬 뿐입니다.

색상만으로 정의하지 마십시오

색맹 사용자를 위해 디자인할 때 어떤 메시지에도 색상에만 의존할 수는 없습니다.

그래프, 차트 및 지도가 자주 색상으로 구분되기 때문에 그렇게 하는 것은 데이터 시각화에서 일반적인 실수입니다. 색상 코딩을 통해 사용 가능한 약속 시간대 또는 사용 가능한 콘서트 좌석을 보여주는 예약 양식도 일반적입니다. 다른 예로는 필수 또는 누락된 양식 필드를 색상으로 설명하거나 오류를 색상으로 표시하여 표시하는 것이 있습니다.

중요한 정보를 컬러 텍스트와 이미지로 전달하지 않거나 최소한 접근 가능한 다른 방식으로 해당 정보를 제공해야 합니다.

대비 및 색상 선택 이해

색맹 사용자의 경우 색상 자체보다 색상 간의 대비가 더 중요합니다. 색맹의 유형이 다르면 특정 색을 비효율적으로 피하기 때문에 대비에 초점을 맞추는 것이 디자이너에게 유리합니다. 색맹 친화적 팔레트에서 명암비를 향상시키려면 밝은 색상을 밝게 하고 어두운 색상을 어둡게 합니다.

다음은 디자인의 가시성을 향상시키는 몇 가지 다른 방법입니다.

• 전경색과 배경색의 차이 강조
• 밝기에 큰 차이가 없는 한 색상환에서 서로 옆에 있는 색조를 선택하지 마십시오.
• 색조나 채도에 관계없이 밝기가 비슷한 색상을 사용하지 마십시오.
• 사용 중인 색조의 채도 증가

이를 염두에 두고 여전히 다양한 유형의 색맹 사용자에게 더 어려울 수 있는 색 조합이 있습니다. 명암비가 중요하지 않은 경우 색맹 친화적 팔레트는 다음 색상 조합에서 벗어나야 합니다.

• 빨강 및 녹색
• 녹색과 파란색
• 녹색과 갈색
• 녹색과 회색
• 녹색과 검은색
• 파란색과 회색
• 파란색과 보라색
• 노란색과 밝은 녹색

패턴 및 텍스처 구현

색상 팔레트에만 의존하지 않고 색맹 사용자를 위해 시각적 디자인을 업데이트하는 한 가지 방법은 패턴과 질감을 사용하는 것입니다. 이는 그래프나 차트와 같이 색상이 일반적으로 정보를 구별하는 데 도움이 되는 경우에 잘 작동합니다. 패턴이나 텍스처 요소를 추가하면 요소가 눈에 띄게 됩니다.

기호를 사용하고 모든 항목에 레이블 지정

명확한 라벨링은 색맹을 포함하여 모든 사용자에게 고객 여정을 안내하기 위한 모범 사례입니다. 레이블은 일반적으로 색상으로 전달되는 정보를 구별하는 데 도움이 될 수 있습니다. 이는 그래프와 같은 데이터 시각화 또는 웹 페이지에서 사용자를 안내하는 데 적용됩니다. 사용자가 제공한 색상 힌트 없이도 길을 찾을 수 있는지 자문해 보십시오.

전자 상거래의 관점에서 제품에 명확하고 설명적인 정보도 표시해야 합니다. 전체 스토리를 설명하기 위해 제품 사진에 의존하지 마십시오. 제품의 색상을 표시합니다.

CTA 버튼 재고

클릭 유도문안(CTA)은 대화형 디자인의 필수적인 부분입니다. 사용자가 이를 찾을 수 없거나 이해하지 못하면 여정에서 진행되지 않으며 목표를 달성할 수 없습니다. CTA에 주의를 기울여야 하며 많은 디자이너가 이를 위해 색상에 의존합니다.

좋은 UI 디자인은 색상을 구현하지만 CTA 버튼에도 다음과 같은 다른 뛰어난 기술 중 하나 이상을 사용합니다.

• 크기
• 놓기
• 강한 대비
• 가중치 테두리
• 가중치 글꼴
• 상징적 아이콘
• 호버 효과

이러한 기술은 색맹 및 색맹이 아닌 사용자에게 모두 적용되며 주의를 끌기 원하는 다른 페이지 요소에 사용할 수 있습니다.

해당 링크에 밑줄을 긋습니다

이 블로그가 포함된 블로그를 읽으면 링크가 강조 표시되어 사용자에게 자신의 존재를 알리는 것을 알 수 있습니다. 링크를 강조하는 가장 일반적인 방법은 색상을 사용하는 것입니다. 이를 위해 색각 이상이 있는 대부분의 사람들이 볼 수 있으므로 파란색을 사용합니다.

색맹의 드문 형태이지만 색맹이나 단색을 가진 사용자에게는 색 강조가 충분하지 않습니다. 이러한 사용자의 경우 컬러 링크가 회색으로 표시되고 다른 텍스트와 구별할 수 없습니다. 앵커 텍스트에 밑줄을 긋으면 이 문제를 빠르게 해결할 수 있습니다.

미니멀리즘을 고려하다

미니멀리즘은 새로운 것과는 거리가 멀다. 미학은 건축, 예술, 실내 장식, 그리고 물론 디자인을 통해 수십 년 동안 트렌드가 되었습니다.

그리고 이제 미니멀리즘은 색상이 적을수록 혼동 가능성이 적기 때문에 색상 접근성에서 역할을 합니다. 또한 스타일 면에서 매력적이며 덜 산만해 모든 청중에게 확실한 선택이 됩니다.

접근하기 위해 미니멀리스트 디자인을 고수할 필요는 없지만 작동하는 하나의 경로입니다.

색맹 시뮬레이터 사용

디자인 커뮤니티가 접근 가능한 사용자 경험을 위해 노력함에 따라 도움이 되는 많은 훌륭한 도구가 등장했습니다. 예를 들어 색맹 시뮬레이터를 사용하면 디자이너가 색맹 사용자가 보는 방식으로 자신의 디자인을 볼 수 있습니다. 그러한 시뮬레이터 중 하나인 Oracle은 Mac, Windows 및 Linux에서 사용할 수 있습니다. 색맹 시뮬레이터를 사용하여 디자인 프로세스 전체에서 작업을 테스트하고 사용자가 선택 사항과 상호 작용하는 방식을 이해하십시오.

초기 단계에서 색상 팔레트를 결정할 때 AA 지침에 따라 선택을 평가하는 색상 선택 도구를 사용하는 것이 좋습니다. 이 대비 검사기는 대비 비율을 알려줄 수 있으며 이 접근 가능한 색상 생성기는 더 잘 작동하는 색상 조합을 제안합니다.

웹사이트에 액세스 가능하게 만들기

색맹을 위한 디자인은 웹사이트가 전체 청중이 탐색하고 즐길 수 있는 사용자 경험을 제공하도록 합니다. 그들에게 그것은 그들이 의지할 수 있는 브랜드를 의미합니다. 당신에게는 성공적인 전환을 의미합니다. 회사의 규모에 따라 법을 준수해야 할 수도 있습니다. 그럼에도 불구하고 이는 공정하고 평등한 온라인 환경 구축의 일부입니다.

색상 접근성은 환영하는 웹사이트 구축의 한 요소일 뿐입니다. 청각 장애인 및 HOH 커뮤니티가 귀하의 콘텐츠에 액세스할 수 있도록 하는 방법에 대한 가이드를 확인하십시오.