NARADESIGN:BLOG

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


WCAG 2.0 지침이 전하는 전경색과 배경색의 명도 대비.

본문 건너 뛰기

WCAG 2.0 지침에는 글꼴의 색과 문서의 배경 색이 어느 정도의 명도 대비를 지녀야 하는지에 대한 지침이 있습니다. 하지만 지침이 제시하는 것을 실무에 바로 적용하기가 어려운데 이는 지침이 제시하는 구체적인 숫자의 의미와 적합성 수준에 대한 이해를 요구하기 때문 입니다.

WCAG 2.0에서 적합성 수준의 의미.

WCAG 2.0 지침에서 ‘적합성 수준’이란 세부 지침들이 갖는 중요도를 3단계로 분류함으로써 웹 사이트의 접근성 정책을 세우는데 기준을 마련하고 웹 사이트 구축 후에는 어느 정도 수준까지 접근성을 확보 했는지 되도록 알기 쉽게 설명하려는 목적이 있습니다. 수준 ‘A’는 중요도가 가장 높고 비교적 달성이 용이한 최소한의 등급이며 수준 ‘AAA’는 중요도가 가장 낮지만 달성하기가 어렵고 달성 했을때 접근성이 극대화 되는 매우 까다로운 수준 이라고 설명할 수 있습니다.

  1. A : 웹 접근성을 확보했다는 주장을 펼치기 위하여 반드시 지켜야 할 최소한의 수준으로써 강력하게 권장된다.
  2. AA : 최소한의 수준을 넘어서 보다 향상된 접근성을 갖추기 위한 수준으로써 권장된다.
  3. AAA : 웹 접근성을 극대화 하고자 할 때 갖추어야 할 수준으로써 이 수준은 의무화 하기에 너무 어려울 수도 있다.

즉, 적합성 수준이란 딱히 각각의 수준에 특별한 의미가 있는 것이 아니라 지침의 중요도에 따라서 등급을 매긴 것에 불과 합니다. 만약 여러분의 웹 사이트가 적합성 수준이 ‘A’라고 표기된 지침을 모두 지켰다면 여러분의 웹 사이트에 대한 접근성 수준은 ‘A’라고 부를 수 있을 것입니다. ‘A’ 정도만 되어도 훌륭한 것입니다. 만약 이 수준이 형편 없는 수준이라는 평가를 받아야 했다면 아마 ‘C’라고 명명했을지도 모릅니다.

전경색과 배경색의 명도 대비에 관한 지침.

1.4.3 명암 대비 (최소한의): 다음과 같은 경우를 제외하고 문자와 문자 이미지의 시각적인 표현은 최소한 4.5:1의 명암 대비를 부여해야 한다.(수준 AA)

  • 큰 문자: 큰 비율의 문자와 큰 비율의 이미지 문자는 적어도 3:1의 명암 비율을 갖는다.
  • 기타: 순수하게 장식적이며 누구라도 알아볼 수 없는 문자와 이미지 문자 또는 사진과 같이 시각적으로 의미를 전달하는 피상적 사용자 인터페이스 구성요소는 명암비를 필요로 하지 않는다.
  • 로고타입: 로고나 브랜드 이름에 포함된 문자는 최소 명암비를 필요로 하지 않는다.

1.4.6 명암 대비 (향상): 다음과 같은 경우를 제외하고 문자의 시각 표현과 문자 이미지는 적어도 7:1의 명암대비를 부여해야 한다.(수준 AAA)

  • 큰 문자: 큰 비율의 문자와 큰 비율의 이미지 문자는 적어도 4.5:1의 명암 비율을 갖는다.
  • 기타: 순수하게 장식적이며 누구라도 알아볼 수 없는 문자와 이미지 문자 또는 사진과 같이 시각적으로 의미를 전달하는 피상적 사용자 인터페이스 구성요소는 명암비를 필요로 하지 않는다.
  • 로고타입: 로고나 브랜드 이름에 포함된 문자는 최소 명암비를 필요로 하지 않는다.

모든 전경 글꼴과 배경 색은 최소한 4.5:1의 명암 대비를 만족해야 한다.

명암 대비는 글꼴의 크기 또는 굵기과 밀접한 관계가 있습니다. 따라서 모든 크기의 글꼴에 4.5:1의 명암 대비를 부여해야 하는 것은 아닙니다. 만약 글꼴이 크거나 굵다면 명암 대비는 조금 더 완화된 기준을 적용해도 됩니다. 지침에서는 큰 문자(18pt 이상 또는 14pt 굵은 글꼴)에 한하여 3:1 수준의 명암 대비를 갖출것을 요구하고 있으며 이는 일반적인 크기의 글꼴(약 12~14px 정도)이 4.5:1의 명암 대비를 갖추어야 하는 것으로부터 조금 완화된 기준 입니다.

WCAG 2.0 지침은 명암의 강도를 ’1~21′ 단계로 나누고 명암을 전혀 구분할 수 없는 상태를 ’1:1′(white:white) 으로 표현하며 전경과 배경이 확연하게 구분되는 상태를 ’21:1′(black:white) 으로 표현 합니다.

사람이 이 명암의 등급을 정확히 판별하는 것은 어렵기 때문에 여기서 실무 적용시 애로 사항이 발생하게 되고 빈번하게 사용되는 색에 대한 사용 메뉴얼을 필요로 하게 됩니다. 이것을 도와주는 것이 바로 색 분석 도구 인데 웹에서 즉시 판별할 수 있고 또는 전용 소프트웨어를 설치해도 됩니다.

전경/배경색 명암 대비  분석 도구들.

사용해 본 결과 Colour Contrast Check(snook.ca) 도구가 가장 섬세하게 필요한 정보들을 제공해 주고 있어서 충분히 만족스러웠습니다.

WCAG 2.0 지침의 명도 대비 적합성 수준을 표시한 전경/배경색 사용 예.

모든 예를 표시할 수 없기 때문에 일반적으로 널리 사용되고 있는 흰색 배경에 무채색 글자를 표현 하였습니다. 붉은색 글씨로 Passed 표시가 된 글꼴의 명도 대비는 적어도 WCAG 2.0의 AA(지침1.4.3) 또는 AAA(지침1.4.6) 수준을 만족한다는 의미 입니다. 이 표로 알 수 있는 것은 12px 글꼴을 사용할 때 회색의 밝기는 적어도 ‘#767676′ 이 되어야만 ‘노안, 약시, 또는 일시적으로 정상 시력을 갖지 못한 사람들’에게 웹 문서가 편안하게 보인다는 사실 입니다. 이 밖의 다양한 글꼴 색 또는 배경 색에 대한 조합은 앞서 소개드린 분석 도구들을 사용하여 도움을 받으시기 바랍니다. 예제를 새창으로 보기.

분류: 웹 디자인,웹 접근성 | 2009년 7월 1일, 5:41 | 정찬명 | 댓글: 21개 |
트랙백URI - http://naradesign.net/wp/2009/07/01/947/trackback/

21개의 댓글이 있습니다.

  1. 길앞잡이말하길

    이런 유익한내용에 왜 댓글이 하나 없는거죠? ㅎㅎ

    제가 예전 회사에서 일할때 저 지침을 보고 실행을 하려 해봤으나,

    디자이너 분 께서 전혀 고려를 안하시는바람에

    현실은 시궁창 ㅠㅠ

  2. 정찬명말하길

    현실은 시궁창 ㅎㅎ. 그래도 길앞잡이님 같은 분이 많이 생겼으면 좋겠습니다. 감사합니다.

  3. 말하길

    일하면서 늘 디자이너들에게 하는 얘기가;;
    일반 텍스트 #666 보다 흐리게 쓰지 말아라 하는데, 이제 #595959 해야겠는걸요.
    올 때마다 하나씩 배우고 갑니다. 고맙습니다.

  4. 정찬명말하길

    섬님 안녕하세요? #595959 는 7:1 대비로 AAA 수준까지 달성할수 있지만 그만큼 디자이너의 색 사용 영역이 제한되기 때문에 4.5:1 대비 AA 수준을 만족하는 #767676 까지 허용해 주셔도 괜찮을것 같습니다. ^^ 감사합니다.

  5. hong!말하길

    현실은 시궁창이라니… 가슴한켠이 시려옵니다. ㅡ.ㅜ

  6. 황준상말하길

    디자이너분들이 많이 봤으면 좋겠습니다.
    저도 가끔 텍스트 #666에 작성자나 date 같은거 #999 로 넣기도 하거든요..
    이젠 다른색으로 해야되겠어요..ㅎ

  7. 정수진말하길

    저도 사용중. 1차 디자인나온화면을 고대비 맞추어 수정을 거쳐야할부분을 이 사이트에서 보고있습니다. NO한 칼라값을 추천칼라로 던져주면 얼마나 좋을까라는 생각을 했답니다.;

  8. 내가바로우주다말하길

    저는 웹디자이너인데 웹접근성에 대해 관심이 많습니다. 2년전에 관련 세미나도 참석했구요.
    요 근래 사기업의 웹접근성관련 프로젝트도 수행하면서 느낀거지만 진짜 필요한 개념이라고 생각이 듭니다.
    하지만 실무에서는 접근성에 대한 인지도가 많이 낮을 뿐더러 웹접근성은 디자이너의 크리에이티브를 갉아 먹는 족쇄정도로 생각하는 분들이 많터군요.

    아직은 웹접근성 관련 플젝이 아니라면 글쓴이님이 보여준 정보는 그냥 정보에 끝나게 되더라구요~

    지금 법으로 제정된 부분은 실효성의 문제가 있다라는 의견도 많고…
    아직까진 인식의 변화가 절실한듯 합니다.

    ps. 사기업 웹접근성 플젝하면서 명도대비에 관해서 소프트웨어를 썼는데요~
    배경컬러흰색일때 #888888 여기까지는 백내장까지 O 사인이 뜨던데요~
    웹 접근성 품질 마크제에 허용된 컬러랑 WCAG 2.0 지침이 틀린건가요~?
    아니면 프로그램자체가 틀린건가요~?

  9. 정찬명말하길

    후지쯔에서 제공하는 도구를 사용하시면 흰색 배경일때 #8b8b8b 까지는 괜찮고 #8c8c8c 부터는 백내장 항목에 ‘X’가 뜰껍니다. 후지쯔가 장애라고 판단하는 기준과 WCAG 2.0 지침에서 제시하는 기준이 일치하지 않아서 그럴 수도 있고 또는 후지쯔 도구가 글자의 크기나 굵기 등을 배제한 상태에서 측정하기 때문에 좀 더 완화된 기준을 적용한 것일 수도 있겠네요. 후지쯔의 정확한 기준은 잘 모르겠고 제 추측 입니다. ^^

  10. 내가바로우주다말하길

    와우~ 빠른 답변 감사합니다~

    그럼 한가지 더 질문 드리자면 웹 접근성 품질마크를 획득할려면은..
    텍스트 컬러는 어느 기준으로 작업하는게 맞을까요~?

    아니면 사기업은 아직까지 품질마크 심사를 하지 않는 건가요~??
    공기업 기준으로 품질마크 획득하려면…어느 기준에 맞춰야 할까요~?

  11. 정찬명말하길

    웹 접근성 품질마크에서는 아직 전경 글꼴과 배경색의 대비는 평가 기준으로 채택하지 않고 있습니다. 그러나 WCAG 2.0 지침에는 포함되어 있고 IWCAG 2.0(한국형 웹 콘텐츠 접근성 지침, 아직 미공개 초안) 에서는 채택해서 향후에 국가 표준으로 올릴 예정 입니다.

    따라서 이 기준을 적용하신다면 아래 사이트에서 전경 글꼴과 배경색을 입력해 보시고 Result > Contrast Ratio 항목이 4.5 이상이 나오는 조합만 사용하는 것을 자체적인 기준으로 채택하시면 WCAG 2.0 의 AA 기준을 만족하게 되므로 권장 드립니다.
    http://www.snook.ca/technical/colour_contrast/colour.html

    좋은 하루 되세요. ^^

  12. 내가바로우주다말하길

    ^^ 정말 좋은 정보네요~~

    저는 웹접근성과 디자인과의 관계에 대해 고민중인데…
    담에 기회가 된다면 앞으로의 웹의 방향성에 대해서 얘기를 나눠보고 싶네요~~

    그리고 답변 감사드립니다~ ^^

  13. [...] 고대비로 화면이나 글자를 제공하는 것일 겁니다. 이에 대해서는 찬명님이 WCAG 2.0 지침이 전하는 전경색과 배경색의 명도 대비라는 블로깅을 참고하시기 [...]

  14. [...] 백남중님의 잊혀진 시각장애인, 저시력인이라는 블로깅과 정찬명님의 WCAG 2.0 지침이 전하는 전경색과 배경색의 명도 대비라는 블로깅을 참고하시기 바랍니다. 또한 미국 TRACE 센터에서 제공하고 [...]

  15. 소담말하길

    문의드릴게 있는데요
    “WCAG 2.0: 글꼴색과 배경색 명도 대비 적합성 수준 AA(1.4.3)/AAA(1.4.6) 미리보기”에서 12pt => 16px라고 되어 있습니다.

    길앞잡이님이 말씀하신 “12px 글꼴을 사용할 때 회색의 밝기는 적어도 ‘#767676′ 이 되어야만 “라고 하셨는데 맞는 해석인지 궁금해요~

  16. 정찬명말하길

    @소담
    배경색이 흰색이고 글꼴이 12px ~ 16px 정도의 크기일 때 글꼴 색상은 적어도 #767676 보다는 어두운 색으로 처리해야 한다. 라고 이해하시면 됩니다.

  17. 익명말하길

    좋은정보 감사합니다.

  18. 인식이형말하길

    이렇게 유익한 글은 제 블로그로 한번 쑝! 하고 퍼가기가 되었으면 좋겠네요 ㅠ
    출처 밝히고 드래그로 감사히 담아갑니다 :-)

  19. 익명말하길

    좋은 정보 감사합니다. 많은 도움이 됐습니다.

  20. 김영희말하길

    안녕하세요^^ 궁금한 점이있어서요.. 혹시 다음의 경우
    ===========================
    배경색상 : #FFFFFF, 글자색상 : #767676 ( 명도대비 4.54 : 1 )
    ===========================
    위 처럼 같이 두개의 색상값으로 명도대비를 구할수 있는 계산식을 아시는 지요..ㅠ ?
    도움부탁드리겠습니다.

  21. 정찬명말하길

    @김영희
    그 알고리즘이야 있겠지만 보통은 본문에 적혀있는 명도대비 자동 계산 도구를 사용하는데요. 그 수식을 알아야 하는 이유가 있나요?

    명도 대비 수식과 관련한 설명이 W3C에 있기는 합니다.

    http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef

    http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님