텍스트 링크는 다른 텍스트보다 명도 대비율 3:1이상 달라야 하며, 초점을 맞췄을 때 추가적인 시각적 단서를 제공해야 한다.
기술설명
이 기술의 목적은 텍스트의 색상만으로는 차이를 구별하지 못하는 사용자에게 시각적 단서를 추가적으로 제공하는 것입니다.
대부분 문단 안에 링크가 적용된 단어에 색상이 적용되어 있습니다.
예를 들어 여러 단어 중에 다른 색으로 구분된 텍스트는 링크가 걸려 있는 경우입니다.
이 기술은 색상 차이를 인식하는데 어려움이 있는 사용자나 시력이 약한 사용자들도 텍스트 링크에 초점이 가거나 마우스가 올라가 있을 때 추가적인 단서를 제공하는 방법을 설명합니다.
이 기술을 사용하면 사용자가 마우스로 텍스트 링크를 가리키거나 탭으로 초점을 맞출 때 때 추가적인 시각적 단서를 제공할 뿐만 아니라. 주변 텍스트와 3:1의 명도 대비율을 보여야 합니다.
추가적인 시각적 단서는 텍스트에 밑줄, 굵게, 기울임을 주거나, 서체 변경 또는 텍스트의 크기를 증가 시키는 방법도 있습니다.
이 기술은 텍스트 링크를 구분하는 데 있어 선호하는 방법은 아닙니다.
하지만 색상만으로는 명확하게 차이를 줄 수 없기 때문에 사용하는 것입니다. 문장내에 링크가 많지 않다면 링크 부분에 밑줄만 사용하는 것이 좋습니다.
예시
[예시1] 검정색 단어와 3:1 대비를 가지고 있으며 배경과는 4.5:1의 대비를 보이는 색상을 사용한 예제
| 주변 텍스트와 3:1 대비율을 갖는 링크를 참조 |
[예시2] 문서내에 하이퍼텍스트 링크는 파란색(#3366CC)이고 일반 테스트는 검정색(#000000)입니다.
파란색 텍스트는 주변 텍스트와의 명도 대비가 3.9:1입니다. 그래서 색을 볼 수 없거나 색맹인 사용자 들도 이 것은 주변 텍스트와는 다르다고 느낄 수 있습니다.
자료
아래 자료는 참고만 하십시오.
관련기술
G14: 색상 차이로 전달되는 정보가 텍스트에서도 사용 가능한지 확인
G205: 색상이 있는 양식 제어 레이블에 대한 텍스트 큐 포함
G145: 텍스트(및 텍스트 이미지)와 텍스트 뒤의 배경 사이에 최소 3:1의 대비율이 있는지 확인
G182: 텍스트 색상 차이를 사용하여 정보를 전달할 때 추가적인 시각적 단서를 사용할 수 있는지 확인
점검절차
1. 색상만으로 텍스트에 대한 정보를 제공하는 요소가 있는지 찾습니다.
2. 주변 텍스트와의 명도 대비율이 3:1 이상으로 차이가 나는지 확인합니다.
3. 링크에 마우스를 올리면 밑줄이나 글꼴변경과 같은 효과가 나타나는지 확인합니다.
4. 키보드를 이용하여 초점을 맞추면 밑줄이나 글꼴변경과 같은 효과가 나타나는지 확인합니다.
나의 정리
문단 내에 링크를 가진 단어가 있는 경우가 있습니다. 이런 '텍스트 링크'가 일반 텍스트와 모양이나 색상 등이 같다면, 사용자는 이 단어에 링크가 설정되어 있는지 모를 것입니다.
그래서 이 단어에 링크가 걸려있다는 것을 사용자가 알아 볼 수 있도록 해당 단어에 색을 줍니다.
하지만 색상을 구분하기 힘들어하는 (예를 들어 색맹, 색약, 약시 등을 가진) 사용자들의 경우에는 이 방법이 적합하지 않습니다.
모든 텍스트가 같이보이기 때문입니다.
그래서 색상이 아닌 명도 차이를 주어야 합니다. 최소 3:1 이상의 차이를 주어야 합니다.
그래야 색상이 아닌 명도(= 밝기)를 통해 뭔가 다름을 알아 챌 수 있는 것입니다.
여기에 사용자가 해당 단어를 마우스 오버하거나 키보드로 포커스(초점)를 주면 추가적인 차이점을 제공하여, 사용자가 확실히 뭔가가 있다는 것을 알 수 있게 해주어야 합니다.
마우스 오버하거나 키보드로 포커스(초점)를 줄 때 해당 텍스트를 굵게 만들거나 밑줄을 주거나 기울임 등의 추가적인 단서를 주는 것이 좋습니다.
하지만 '텍스트 링크'를 위에서 말한 것 처럼 명도로 알려주기 보다는 밑줄을 주어 알려주는 것이 좋습니다.
더 알아보기 쉬우니까요.
G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G183.html
G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls wh
The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different than the surroun
www.w3.org
공짜로 혼자서도 할 수 있는 웹퍼블리싱 공부 방법을 알려드립니다.
홈페이지 만들기, 혼자하기 힘들다면 무로 스터디에 들어오세요.
공부 방향을 모르겠다면 무료 과외를 신청하세요.
https://blog.naver.com/redoxup/223134941372
혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!
웹디자이너, 웹퍼블리셔, 웹프로그램을 준비하시는 분들이라면, 다른 건 몰라도 HTML+CSS 입문과정...
blog.naver.com
