[웹접근성 지침-일반기술 G174] 텍스트 색과 배경색을 사용자가 인지 할 수 있는 대비로 전환 할 수 있는 기능을 제공하자.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G174.html

---

사용자가 확실하게 인지 할 수 있는 대비로 만들어진 '대체 페이지'를 제공한다면 다수의 사용자가 텍스트를 읽는데 어려움이 없을 것입니다.

---

기술설명

웹 페이지 일부에 텍스트와 배경 간의 대비 좋지 않아 텍스트가 잘 보이지 않는 경우가 있습니다.

그래서 텍스트와 배경 간의 대비를 개선시킬 수 있는 링크나 제어기를 제공해야 합니다.

이 기술로 사용자는 원하는 대비로 페이지를 볼 수 있게 됩니다.

이런 링크와 제어기는 사용자가 쉽고 빠르게 찾을 수 있도록 배치되어야 합니다.

 

이 기술을 성공적으로 사용하려면 아래 세 가지 사항을 충족시켜야 합니다.

 

1. 페이지 내에 있는 링크나 버튼이 잘 보여야 합니다. 그래야 사용자가 그것을 이용하여 다음 페이지로 이동할 수 있습니다.

2. 새 페이지로 이동했다면 원본 페이지에서 제공 했던 내용과 기능들이 동일해야 합니다.

3. 새 페이지는 배경과 텍스트에 대한 대비뿐만 아니라 모든 면에서 적합성 수준을 만족해야 합니다.

 

이 기술의 대체 버전에서는 텍스트와 배경의 대비가 4.5:1이어야 하고, 큰 텍스트와 배경은 3:1을 준수해야 합니다.

페이지의 대체 버전에서는 모든 텍스트와 배경의 대비가 7:1이고, 큰 텍스트와 배경은 4.5:1을 준수해야 합니다.

 

예시

[예시1] 헤드라인의 텍스트가 3:1로, 대비를 지키지 못하는 페이지가 있습니다.

모든 텍스트와 배경의 대비가 4.5:1을 지키는 새 버전의 페이지로 이동할 수 있는 링크가 고대비(5:1)로 페이지 상단에 제공되고 있습니다.

 

[예시2]  배경위에 텍스트가 있습니다. 텍스트에 음영이 있지만 결국 대비가 4:1입니다.

페이지 상단에 [고대비]라는 제어기가 있습니다. 이것을 클릭 하면 다양한 스타일이 적용되고, 여기에서 배경색을 삭제하면 7:1대비를 사용할 수 있습니다.

 

 

 

관련기술

G17: 텍스트(및 텍스트 이미지)와 텍스트 뒤의 배경 사이에 최소 7:1의 대비율이 있는지 확인

G18: 텍스트(및 텍스트 이미지)와 텍스트 뒤의 배경 사이에 최소 4.5:1의 대비율이 있는지 확인

G145: 텍스트(및 텍스트 이미지)와 텍스트 뒤의 배경 사이에 최소 3:1의 대비율이 있는지 확인

G148: 배경색 지정 안 함, 텍스트색 지정 안 함, 해당 기본 값을 변경하는 기술 기능 사용 안 함

 

 

점검절차

1. 원본 페이지에서 대체 버전으로 접근할 수 있는 링크나 제어기가 있는지 확인합니다.

2. 링크나 제어기가 '모든 면에서 적합성을 만족하는 페이지'로 이동하는지 확인합니다.

3. 대체 버전의 페이지가 적합성을 만족하는지 확인합니다.

 

---

나의 정리

배경색이나 배경색이미지 위에 텍스트가 있는 경우, 텍스트와 배경의 색상대비는 4.5:1을 준수해야 합니다.

만약 제목처럼 글자가 큰 경우에는 3:1의 비율을 지켜야 합니다.

그래야 다수의 사용자가 텍스트와 배경을 구분할 수 있으며, 텍스트를 어려움 없이 읽을 수 있습니다.

하지만 상황에 따라 이를 어기는 경우가 생깁니다. 이럴 때에는 대체 페이지를 제공해 주어야 합니다.

 

'대체 페이지로 이동할 수 있는 버튼이나 링크'를 사용자가 쉽고 빠르게 찾을 수 있도록 페이지 상단에 배치합니다.

그리고 버튼과 링크 또한 잘 보이도록 4.5:1의 대비로 제공해야 합니다.

 

'대체 페이지로 이동할 수 있는 버튼이나 링크'을 클릭하면 대체 페이지로 이동합니다.

'대체 페이지' 모든 텍스트가 잘 보일 수 있도록 텍스트와 배경의 대비를 7:1로 하고, 큰 글자의 경우에는 4.5:1을 지키도록 만듭니다. 물론 원본과 동일한 내용과 기능이 똑같아야 합니다.

 

사용자가 확실하게 인지 할 수 있는 대비로 만들어진 '대체 페이지'를 제공한다면 다수의 사용자가 텍스트를 읽는데 어려움이 없을 것입니다.

---

 

G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G174.html

G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient co