Copy linkColor & contrast

Color & contrast

색상 및 대비를 사용하여 

사용자가 앱의 콘텐츠를 보고 해석하고 올바른 요소와 상호 작용하고 어떤 행동하는데 이해하는 데 도움을 줄 수 있습니다.

색상은 기분, 어조 및 중요한 정보를 전달하는 데 도움이 될 수 있습니다.

사용성을 지원하기 위해  Primary, secondary, and accent 색상을 선택할 수 있습니다.

요소 간의 충분한 색상 대비는 저시력 사용자가 앱을 보고 사용하는 데 도움이 될 수 있습니다.

 

Contrast ratios

색상 대비는 사용자가 다양한 텍스트와 텍스트가 아닌 요소를 구별하는 데 중요합니다.

 대비가 높으면 이미지를 더 쉽게 볼 수 있는 반면, 일부 사용자는 매우 맑은 날이나 밤과 같이 밝거나 어두운 조건에서 대비가 낮은 이미지를 구별하기 어려울 수 있습니다.

명암비는 한 색상이 다른 색상과 얼마나 다른지를 나타내며 일반적으로 1:1 또는 21:1로 표시됩니다.

 비율의 두 숫자 사이의 차이가 클수록 색상 간의 상대적 휘도 차이가 커집니다. 

W3C(World Wide Web Consortium)에 따르면 색상과 배경 사이의 명암비는 휘도(방출되는 빛의 강도)를 기준으로 1~21입니다.

 

Clustering elements

버튼 컨테이너(버튼의 텍스트가 아닌 부분)와 같은 일부 비텍스트 요소는 컨테이너 색상과 배경 색상 사이의 명암비 3:1을 충족해야 합니다. 요소가 결합될 때 대비 및 기능적 변화에 대한 Material의 연구에 기반을 둔 요소와 톤을 결합하기 위해 다음 패턴을 고려하십시오.

 

버튼그룹과 같이 다른 element와 클러스터된 element는 사용자가 각 element를 그룹에서 구별해야 합니다.
이러한 element 자체와 배경 사이의 3:1 대비에서 구별될 수있습니다.

 

FAB와 같이 화면의 다른 요소와 별개로 자립하는 요소는 눈에 잘 띄기 때문에 이미 사용자가 구별할 수 있습니다. 

이러한 요소는 자체와 배경 사이의 3:1 대비에서 뚜렷한 이점을 얻지 못합니다.

클러스터에 구성 요소를 함께 배치할 때 구성 요소 또는 구성 요소 유형을 사용하여 각각 배경과 적어도 3:1 대비를 달성합니다.