본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

웹 접근성_텍스트 콘텐츠의 명도 대비

by TIS_Ha 2020. 3. 31.
반응형

페이지 글씨가 작아도 알아보기 힘들지만 명도 대비가 낮은 경우 역시 가독성이 떨어져 내용을 인식하기 어렵습니다. 노안, 저시력, 색약, 색맹 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야 하며, 비장애인들도 명도 대비가 높다면 콘텐츠를 더 잘 인식할 수 있습니다.

 

텍스트 명도 대비

페이지에 존재하는 모든 텍스트에 대해 명도 대비를 준수해야 하는 것은 물론이고, 텍스트가 이미지로 된 경우에도 명도 대비를 준수해야 합니다.

텍스트와 배경색 간의 명도 대비는 4.5:1 이상이 되도록 구현해야 합니다.

 

의미 있는 이미지 명도 대비

텍스트뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야 합니다.

 

확대 가능한 브라우저에서 명도 대비

명도 대비가 4.5:1 이상 이어야 한다고 말씀드렸는데요, 확대가 가능한 브라우저에서는 최소 3:1 이상이면 준수입니다.

그래도 명도 대비가 높을수록 가독성이 높기 때문에 4.5:1 이상이 되도록 구현해주시기 바랍니다.

 

 

웹 페이지를 본다고 가정했을 때 의미 있는 좌우 버튼, 텍스트, 이미지에 있는 텍스트 등의 명도 대비가 모두 준수되어야 합니다. 다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 합니다.

반응형

댓글