Google Material Design - 접근성 디자인 컬러 팁

 

안녕하세요 찐망고입니다.

역시나 머터리얼 디자인 시리즈를 이어가며 접근성에 관련된 컬러에 대해 자세히 알아보겠습니다.

 

Color and Contrast

 

Color and Contrast (색상과 대비)

색상과 대비는 사용자가 앱의 콘텐츠를 보고 이해하고, 올바른 요소와 상호작용하며, 동작을 이해하도록 돕는 데 사용될 수 있습니다.

 

More accessible color (더 접근성 있는 색상)

색상은 분위기, 톤, 중요한 정보를 전달하는 데 도움을 줄 수 있습니다.

주 색상, 보조 색상, 강조 색상을 신중히 선택하면 사용성이 향상됩니다.

요소 간 충분한 색상 대비는 시력이 약한 사용자도 앱을 쉽게 사용할 수 있도록 돕습니다.

 

Contrast ratios (대비 비율)

색상 대비는 사용자가 다양한 텍스트와 비텍스트 요소를 구별할 수 있도록 돕습니다.

높은 대비는 이미지를 더 쉽게 보이게 하고, 낮은 대비는 밝은 햇빛 아래나 어두운 환경에서 어려움을 줄 수 있습니다.

대비 비율은 두 색상의 밝기 차이를 숫자로 나타냅니다. 예를 들어 1:1은 차이가 없음을, 21:1은 최대 차이를 의미합니다.

W3C(World Wide Web Consortium)에 따르면, 대비 비율은 색상과 배경의 발광도(luminance) 차이를 기반으로 결정됩니다.

W3C는 다음 대비 비율을 권장합니다:

• 큰 텍스트 (14pt 볼드/18pt 일반 이상) 및 그래픽: 3:1 이상
• 작은 텍스트: 4.5:1 이상

텍스트 대비

Correct color contrast / Incorrect color contrast

Do (권장)

• 이 텍스트들은 권장된 색상 대비 비율을 충족하며, 배경색과 대비되어 읽기 쉽습니다.

Caution (주의)

• 이 텍스트들은 권장된 색상 대비 비율을 충족하지 않으며, 배경색과 대비되지 않아 읽기 어려울 수 있습니다.

 

아이콘 또는 주요 요소 대비

Correct color contrast for icons / Incorrect color contrast for icons

Do (권장)

• 이 아이콘들은 권장된 색상 대비 비율을 충족하며, 배경색과 대비되어 알아보기 쉽습니다.

Caution (주의)

• 이 아이콘들은 권장된 색상 대비 비율을 충족하지 않으며, 배경색과 대비되지 않아 알아보기 어려울 수 있습니다.

 

Logos and decorative elements (로고와 장식 요소)

장식 요소(예: 로고나 삽화)는 반드시 대비 비율을 충족하지 않을 수 있습니다.

하지만 만약 이러한 요소가 중요한 기능(예: 웹사이트로 연결되는 링크)을 수행한다면,

이를 구분 가능하게 만드는 것이 도움이 됩니다.

Decorative logo / Distorted decorative logo

Do (권장)

• 구분 가능한 장식용 로고는 반드시 대비 비율을 충족하지 않아도 됩니다.

Don't (주의)

• 대비 비율을 맞추기 위해 로고를 왜곡하지 마세요.

 

Other visual cues (기타 시각적 단서)

색맹이거나 색상의 차이를 인식하지 못하는 사용자들을 위해,

다른 디자인 요소들을 활용해 동일한 정보를 전달할 수 있습니다.

색맹에는 여러 형태가 있습니다(예: 적-녹 색맹, 청-황 색맹, 단색성).

따라서 여러 시각적 단서를 활용하면 중요한 상태를 더 효과적으로 전달할 수 있습니다.

 

활용 가능한 요소:

• 테두리(strokes)
• 인디케이터(indicators)
• 패턴(patterns)
• 텍스처(texture)
• 텍스트(text)

Correct text field / Incorrect text field

 

Do (권장)

텍스트 필드 오류 상태는 여러 단서를 통해 전달됩니다:

• 제목 색상
• 텍스트 필드 테두리(stroke)
• 필드 아래의 오류 메시지

Caution (주의)

• 텍스트 필드 오류 상태가 색상 테두리만으로 전달되는 경우, 색을 인식하지 못하는 사용자가 이를 놓칠 수 있습니다.