현재 페이지 위치

Home> 광장> 상세보기

목록다음 글 보기136/139이전 글 보기

의견수
10
조회수
4510
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

명도대비 기준 4.5:1에 대한 생각

접근성

KWCAG 2.0에 보면 저시력 사용자가 콘텐츠를 인식할 수 있도록 콘텐츠와 배경색의 명도 대비가 4.5:1 이상이 되어야 한다는 지침이 있습니다.

1.3.3 텍스트 콘텐츠와 배경간의 명도 대비는 4.5:1 이상이어야 한다

실제로 디자인을 하게 되면 4.5:1이라는 기준을 지키는 것이 매우 힘들 때가 있습니다.

색상을 선택하는 근거는 단순히 심미적인 것을 위해서가 아니라 정보의 중요도를 나타내기 위함도 있기 때문입니다. 명도 대비 기준을 만족하도록 색을 선택한다면, 흰색 배경일 때 가장 흐리게 표시할 수 있는 색상이 767676 정도가 되는데요, 000000로 지정된 두 텍스트를 비교하면 사실 어느것이 중요하다, 중요하지 않다를 가늠하기가 어려울 정도로 색이 진하게만 표시가 됩니다.

4.5:1이라는 기준은 WCAG 2.0(http://www.w3.org/TR/WCAG20/)에서 권장 항목인 LevelAA로 분류되고 있습니다.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

또한 ISO 9241-3에서는 최소 명도 대비를 3:1로 규정하고 있습니다.(참고링크)

현실적으로 가능한 선에서, 그렇지만 저시력 사용자 고려해서 다음과 같이 명도 대비 기준을 준수하면 어떨까 합니다.

  1. 네비게이션, 제목, 본문과 같이 웹 페이지 중요한 콘텐츠에는 4.5:1의 기준을 적용한다.
  2. 비교적 중요도가 낮은 부가정보(카테고리, 날짜 등)는 3:1 이상이 되게 한다.
펄님님 프로필

회원 등급 : 1

펄님

3개7개

의견보기

전체 의견
10

Insanehong

회원 등급 : 1

0개5개

이미지 폰트가 확대 되었을때 본연의 색을 잃어버리는 것도 문제가 되겠지용?

Jiyun Eom

회원 등급 : 1

2개8개

실제로 디자인을 하게 되면 4.5:1이라는 기준을 지키는 것이 매우 힘들 때가 있습니다.

제가 디자인을 하는 입장은 아니지만... 이 부분에 대해서 디자이너 분들도 많은 고민을 할 거라 생각됩니다.

한 번 생각을 해봤는데요, 브라우저 또는 웹사이트에서 파워포인트의 인쇄 버전 중 흑백 버전처럼 명도대비를 확 높여줄 수 있는 기능을 지원해주게 된다면 저시력자 사용자분들에게 많은 도움이 되지 않을까요?ㅎㅎ 그럴려면 이미지보다 텍스트로 표현하는 웹 페이지 구현 방식이 더 널리 퍼져야 할 것 같구요~~

장애인 및 비장애인 모두에게 사용성 및 심미성 등등 모든 면을 만족시켜줄 수 있는 웹이 더 널리널리 퍼지고 생기길 바랍니다:)

김한솔

회원 등급 : 1

0개1개

브라우저 또는 웹사이트에서 파워포인트의 인쇄 버전 중 흑백 버전처럼 명도대비를 확 높여줄 수 있는 기능을 지원해주게 된다면 저시력자 사용자분들에게 많은 도움이 되지 않을까요?

@엄지연

크롬을 쓰신다면 ㅎㅎ -> High Contrast

Jiyun Eom

회원 등급 : 1

2개8개

@김한솔 지원 안 해주는 IE랑...크롬을 몰랐던 제가 나빴네요.....ㅎㅎㅎ 한 번 사용해봐야겠네요! 감사합니다:)

Yongwon Kim

회원 등급 : 1

접근성은 지키는 것이 아니라. 높이는 것입니다.

0개2개

명도 대비 보단 글자크기가 더 중요한거 같아요. 특히 11px 이하. 일반사용자도 모니터에 따라 보기 힘듭니다. 특히 요즘 스마트폰에선... 레티나가 아닌사람은 글자도 번지는 수준.

현영배

회원 등급 : 1

0개10개

텍스트 콘텐츠와 배경간의 명도 대비는 4.5:1 이상이어야 한다... ISO 9241-3에서는 최소 명도 대비를 3:1로 규정..

물론 작은 글씨는 4.5:1 큰글씨는 최소 3:1 로 만들어지면 좋겠네요.. 디자이너 입장에서 디자인이 자유롭지 못한 경우도 생길 수있는데 가령. 화장품 홈페이지디자인에서 몽환적.. 부드러운 분위기라고 컨셉을 잡으면 텍스트를 회색으로 흐리게 가져가는 경우를 많이 봤어요.. 그럼 분위기가 있는데 가독성 좋게 진해게 하면 분위기가 컨셉대로 안되더라고요.... 그런 부분에선 죄송하게도 제약이 좀 생길 수 있겠습니다.

부가기능 설치나 그런것도 좋지만 다른 도구 설치도 좋지만 이건 최후고.. 사용자 선택이고 모를 수도 있고요.. 홈페이지에서 자체적으로 그와 비슷한 기능을 제공하고 최대한 이미지가 아닌 텍스트로 디자인 해주고.. 명도 관련 기능을 제어할 수 있게 하면 좀 더 낳을 것 같은 생각이 드네요.. 항상 무언가를 설치하게 하는건 별로고.. 홈페이지에서 제공하는 것이 좋다~에.. 한표

김혜일

회원 등급 : 1

0개13개

명도대비는 본문 뿐 아니라 메뉴 영역까지 확대되어야 하죠. 본문을 보려면 메뉴를 써야하니까요. 적용 범위 중에 OK 확인 작성 등 confirm 용도로 사용되는 이미지버튼들에서도 동일하게 적용되어야 하구요 안 그러면 숨어있는 버튼 찾다가 날새는 경우도 있어요. 개인적으론 댓글다는 부분의 글등록 버튼 참 마음에 드네요 ㅎㅎㅎ

이미지 텍스트의 경우는 좀 더 심각한 문제가 하나 있는게 명도대비가 낮고 글씨가 작은 경우(8pt)가 정말 많더라구요. 근데 이게 확대해도 거의 알아보기 힘들어요. 비트맵 이미지 특성상 깍두기가 막생기고 색생도 균일하지 않아서 알아보기 힘듭니다.... (윈도우7 이상 사용자라면 Winkey + 를 누르면 확대되니까 확인 가능)

그냥 사용자 입장에서는 사이트 만들 때 최소폰트 크기 가이드를 정해놓고 그 이하로는 절대 텍스트 크기를 지정하지 않았으면 좋겠어요.

크롬의 high contrast 기능을 저도 정말 자주 쓰는 기능이에요 전 invert grayscale을 주로 씁니다. 단순히 invert만 하면 명도대비는 변하지 않아서 놓치는 색상이 좀 있는데 grayscale로 하면 좀 낫더라구요.

김혜일

회원 등급 : 1

0개13개

Young Bae Hyun 님

전 개인적으로 웹페이지가 모든걸 제공할 수 없다고 생각하는 편입니다. 경험적으로 지금까지 제대로 만든 사이트를 본 적이 없어서... ㅜㅜ 결국 제 생각은 웹페이지에 고대비설정, 확대기능을 아예 사용하지 않는 쪽, 더 나아가 굳이 만들지 말아라 라고 하기에 이르렀습니다.

하지만 확대기능에 있어 모바일 페이지의 확대기능처럼 레이아웃이 유지된채 확대한다면 얘기가 달라집니다. 이 경우는 유용하다는 의미입니다. (가로 스크롤을 생성하는 브라우저 자체의 확대기능과 달라야한다는 생각입니다.)

고대비를 한번 더 생각해보면 웹페이지에서 제공할 수 있는 고대비는 매우 제한적일 수 밖에 없습니다. 하지만 저시력은 정말 다양합니다. 대부분의 저시력은 본인에 맞게 커스텀해서 컴퓨터를 사용하고 있구요. 웹에서 화면낭독기능을 제공하지 않아도 되는 것과 마찬가지라고 생각합니다. 이미 사용자는 음성프로그램이 있으니까요. 웹페이지 자체적으로 모든 편의를 주면 정말 좋겟지만 세상 모든 사이트가 그렇게 배려할 수는 없으니까요. 사용자가 어느정도 스스로 자신에 맞는 환경을 구현할 수 있어야 한다고 생각합니다. 물론 개발에 여유가 있고 고대비 기능을 구성하는데 큰 공수가 들어가지 않는다면 제공해주는 것이 당연히 좋은거죠.

은행사이트에 보면 보안이 이슈가 되면서 각 브라우저의 SSL 인증상태를 구분하는 안내페이지가 있습니다. 이것과 동일선상에서 저시력이 활용할 수 있는 브라우저의 부가기능이 있다는 것을 안내해주는 것이 오히려 더 낫지 않을까 생각합니다.

신하철

회원 등급 : 1

2개2개

위에서 다들 말씀해 주셨지만 저시력 사용자 입장에서 지침의 4.5:1과 3:1등의 수치는 의미가 없다고 생각합니다. 사용자에 따라 유용할 수도 유용하지 않을수도 있기 때문입니다. 물론 기본적으로 접근성을 준수하기 위해 지침에 따라 검수를 하는게 맞지만 저시력 사용자분들께 특정 이미지를 보여주고 이미지안의 글자 인식이 가능한지에 대한 테스트를 하였을 때도 각각 다른 결과가 나타나기도 했었습니다. 웹 개발과 디자인을 하시는 분들께서 이 글을 읽으시면 어떻게 하라는건지에 대한 의문이 드시겠지만 윗 분께서 말씀하신대로 폰트 크기가 보장된다면 어느정도 인지는 가능할 것 같다는 말씀을 드리고 싶습니다.

김혜일

회원 등급 : 1

0개13개

저시력은 색맹과는 달리 색약으로 표현하는게 맞습니다. 색을 구분할 수 있지만 비슷한 색은 잘 구분하지 못하는 경우가 많아요. 본인의 눈에 잘띠는 색상 패턴이 사람마다 모두 다릅니다. 게다가 시력정도, 시각장애의 원인 질병에 따라 이를 구분하는 능력도 상당한 차이를 보이기 때문에 사용자 테스트를 할 때는 테스터의 시력정도와 특성까지 고려해서 분류하고 테스트를 해야정확한 결과를 얻을 수 잇을 것 같아요.

다만 명도대비가 낮은 경우 정도의 차이는 있지만 분명히 글씨를 인지하는데 문제가 발생합니다. 글씨를 크게 확대해서 보는 저시력의 경우 3:1 이하로 내려가면 크기와 상관없이 글씨의 유무를 전혀 인지하지 못했고, 시력이 좀더 나은 저시력들은 2.5:1까지 인지하는 경우도 있었습니다. 2.5:1 상태에서는 글씨를 알아본거지 오래 읽는 것은 거의 불가능합니다. 이 역시 같은 색상이더라도 어느것이 배경색이냐에 따라서 인지하는 정도가 달라지기도 합니다.

그나마 진리에 가까운 것은 소위 블랙/화이트 or 화이트/블랙으로 대변되는 고대비는 많은 저 시력에게 일반적으로 효과를 거둘 수 있습니다.

웹에서 명도대비를 굳이 왜 적용해야 하느냐의 문제가 발생하는데... (검은배경의 흰글씨).고대비 모드는 중심색상값을 정해놓고 블랙/화이트 2개의 색상으로 분류합니다. 이때 명도대비가 너무 낮아버리면 글꼴이 아니라 배경색 쪽으로 분류되어 글씨가 홤녀에 아예 표시되지 않아 버립니다. chrome에서 high contrast 기능을 설치고 invert grayscale로 맞춘 후 http://trace.wisc.edu/contrast-ratio-examples/SampleTextColorsOnBlack.htm 요런 페이지에 접속해보면 글씨가 날아가는걸 볼 수 있습니다. 매우 단편적인 예인데 이런 상황이 여기저기서 심심치 않게 나타납니다. 수십만원짜리 전문 확대 프로그램을 쓰면 상황이 좀 나아지긴합니다. ㅜㅜ

모든 색약을 가진 사용자가 고대비 모드를 쓴다는 것은 사실상 어렵습니다. 본인이 색약인지 모르는 경우도 많구요. 확대 기능 사용에 고대비를 더하게 되면 웹의 색상을 제대로 인지할 수 없다는 문제도 발생합니다. 가능하다면 고대비 기능을 쓰지 않아도 컨텐츠를 인지할 수 있도록 하는게 가장 좋지요.

목록다음 글 보기136/139이전 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0