Color & accessibility

dynamic color은 color contrast에 대한 접근성 표준을 충족하도록 설계되었습니다.

색조 팔레트를 기반으로 하는 Material의 시스템은 기본적으로 액세스할 수 있는 색 구성표를 만드는 데 핵심입니다.

16진수 값이나 hues가 아닌 tonality를 기반으로 색상을 결합하는 것은 Material이 기본적으로 색상 출력에 액세스할 수 있도록 하는 주요 방법 중 하나입니다.  색상 알고리즘은 사용자가 경험하게 될 잠재적인 조합이 대비 표준을 충족하도록 설계되었습니다.

 

Contrast

대비는 두 색상 사이에서 인식되는 차이의 양을 나타냅니다.

색상은 유사한 색상의 두 항목을 구별할 수 있도록 요소 간의 대비를 보장하여 인터페이스의 시각적 접근성에 도움을 줍니다.

button /  button container 와 같은 두 가지 색상 간의 충분한 대비는 광범위한 인간의 시각과 경험에 대한 사용성을 최적화하기 때문에 시각적 접근성의 필수 요소입니다.

 

'Accept' 버튼은 시각적 접근성을 위해 충분한 대비를 달성하는 반면 'ignore' 버튼은 그렇지 않습니다.

accessibility measures 의 경우 대비 정도를 측정하여 비율로 표시합니다. 

명암비는 두 색상 사이의 명암 차이를 측정합니다. 

높은 비율은 색상 간의 차이가 더 크다는 것을 의미하므로 대비가 더 높음을 나타냅니다.

Contrast in Material

Material의 색상 시스템은 accessible contrast ratios를 충족하는 데 사용할 수 있는 표준 톤 값 및 측정을 제공합니다.

Material의 톤 시스템은 다음과 같이 웹 색상 대비 표준을 이용합니다.

색조 값에서 최소 40 steps 떨어진 색상은 최소 3:1의 명암비를 달성합니다.
색조 값에서 최소 50 steps 떨어진 색상은 최소 4.5:1의 명암비를 달성합니다.
색조 값에서 최소 70 steps 떨어진 색상은 최소 7:1의 명암비를 달성합니다.

Contrast ratios vary

어떤 요소인지, 무엇이 의도된것지에 따라 주어진 요소에 필요한 대비 수준이 결정됩니다.

Accessible defaults

기본적으로, button과 같은 머티리얼 구성 요소는 시각적 접근성에 대한 대비 요구 사항을 충족하도록 설계되었습니다.

명암비는 dynamic colors scheme가 변경되거나 밝은 테마에서 어두운 테마로 전환될 때,  fixed 상태로 유지됩니다.

기본적으로 쌍을 이루고 종종 함께 적용되는 Material color roles도 시각적 접근성에 대한 대비 요구 사항을 충족하도록 설계되었습니다.

Non-text elements

버튼 컨테이너와 같은 일부 비텍스트 요소는 표준 접근성(AA 등급)에 대해 3:1의 명암비를 충족해야 합니다.

 접근성 패턴에 색상을 적용하기 위한 비텍스트 요소 및 원칙에 대해 자세히 알아보세요.

Large text

큰 텍스트(18pt 이상 또는 굵은 경우 14pt 이상)는 standard accessibility(AA 등급)의 경우 3:1,

greater accessibility (graded as AAA)의 경우 4.5:1의 명암비를 충족해야 합니다.

Standard text sizes

표준 본문 텍스트 크기(18pt 작거나 또는 bold 14pt 작거나)는 standard accessibility(AA)의 경우 4.5:1

, greater accessibility (graded as AAA)의 경우 7:1의 명암비를 충족해야 합니다.