명암대비를 고려한 디자인 - WCGA Contrast
우리가 사용하는 모든 디자인은 명암대비를 고려해서 디자인됩니다.
버튼의 배경색과 글자색, 컴포넌트의 배경색 등 우리가 알게 모르게 적용되어있습니다.
이런 명도 대비는 단순히 이쁘게 혹은 보기 좋게 만들기 위해서가 아닌, 노안, 약시 혹은 일시적으로 정상시력을 가지지 못한 사람들을 위해서 적용이 고려됩니다.
W3C에서는 이런 인식 및 시각과 관련된 요소를 WCGA 가이드라인에 명시해 놓고 있습니다.
WCGA란?
WCGA는 W3C에서 정한 웹 콘텐츠 접근성 가이드라인의 표준 권고안입니다.
하지만 이 접근성이 엄청나게 광범위한 부분을 포함하고 있기 때문에 이 포스트에서는 Contrast 카테고리에 관해서 이야기합니다.
가장 최근에는 모바일 접근성도 고려된 2.1 버전이 대중적으로 사용되고 있습니다.
WCGA에 관해서 자세히 알고 싶으시면 WCGA21 link
Contrast 명도 대비
시작할 때 명도 대비가 디자인에서 고려된다고는 했지만, 이 글을 읽고 있는 엔지니어들은 나는 고려한 적이 없다고 할 수도 있습니다.
단순한 예를 들자면, 노란색 글씨를 빨간색 배경과 함께 쓰고 있을 때, 우리는 눈이 침침함을 느끼고 색상을 수정할 것입니다.
두 색조합을 이용하여 적합성 수준을 보여줍니다. 이 적합성 수준에 관해서는 이 아티클 하단에서 따로 설명합니다.
너무 추상적인가요? 그래서 네이버는 어떻게 하고 있는지 찾아보니 웹 접근성을 위해서 명도 대비를 어떻게 정의하고 있는지 소개하는 페이지가 존재하더군요.
네이버 접근성 페이지 : 명도 대비
명도 대비 저시력자, 고령자 등도 인식할 수 있도록 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상이어야 합니다. 명도 대비 평가 방법 텍스트 콘텐츠 색과 배경 색을 평가 도구를 이용하여 대비 합
accessibility.naver.com
이렇게 네이버는 명도 대비를 4.5:1 이상이 나오게 정의하고 있습니다. 이는 WCGA에서 권장하는 비율과 동일하네요.
그렇다면 4.5:1 이런 숫자는 어디서 어떻게 계산되는 걸까요?
Contrast ratio(명도 대비율) 계산법
WCGA에서는 아래와 아래와 같이 계산할 수 있다고 알려줍니다.
우선 luminance(밝기)를 계산 하고 아래와 같은 공식으로 Contrast ratio를 계산합니다.
// contrast ratio
(L1 + 0.05) / (L2 + 0.05)
// L1 is the relative luminance of the lighter of the colors, and
// L2 is the relative luminance of the darker of the colors.javascript로 구현된 코드가 궁금하다면 이 오픈소스를 참고해주세요.
적합성 수준 with Contrast Ratio
위에서 계산한 점수와 텍스의 폰트 사이즈를 시용해서 아래와 같은 다섯 가지 적합성 수준을 구할 수 있습니다.
하지만 아래 조건은 간단하게 요약한 것이니 WCGA가이드를 참고하시길 바랍니다.
AAA
Contrast ratio가 7.0 이상입니다.
AAA Large
Contrast ratio가 4.5 이상이면서 폰트 사이즈가 14pt+bold 혹은 18pt 보다 큽니다.
AA
Contrast ratio가 4.5 이상입니다.
AA Large
Contrast ratio가 3.0 이상입니다.
Fail
등급 미달. Contrast ratio가 2.9 미만입니다.
이와 같이 디자인에서 사용하는 컬러 값을 사용하여 WCGA의 기준을 바탕으로 하는 결과를 체크해볼 수 있습니다.
마치며
지금까지 Frontend 개발자라면 알면 좋고 쓸데도 많은 WCGA Contrast 관련 아티클이었습니다.
References
WCGA 2.1 - W3C
WCGA 2.1(한글)
usecontrast guide
WCAG - Contrast Checker
Check the contrast of your color design for accessibility base on Web Content Accessibility Guideline (WCAG)
contrastchecker.com
Web Content Accessibility Guidelines (WCAG) 2.1
Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the Working Group home page. A.2 Other previously active WCAG WG participants and other contributors to WCAG 2.0, WCAG 2.1, or supporting resou
www.w3.org
모두를 위한 디자인
모두가 행복한 서비스를 제작하는데 노력해야 합니다.
a11y.gitbook.io
Contrast for UI
A macOS app for quick access to WCAG color contrast ratios.
usecontrast.com