목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
명암비란 무엇인가요?
Framer를 사용하면 여러분의 웹사이트 디자인과 이를 사용하는 사용자들의 경험을 설계할 수 있습니다. 다만, 사이트를 론칭하기 전에 명암비(대비율)이 웹 접근성 표준을 충족하는지 확인하는 것을 권장해요.
명암비는 두 색상, 일반적으로 전경(텍스트나 그래픽)과 배경 사이의 밝기 차이를 측정한 것입니다. 이 비율은 1:1부터 21:1까지의 척도로 측정되며, 숫자가 높을수록 명암비가 높다는 뜻이에요. 충분한 명암비는 콘텐츠의 가독성과 시인성을 보장합니다. 특히 시각 장애, 색맹 또는 기타 인지 관련 어려움이 있는 사용자에게 아주 중요한 부분입니다.
명암비에 대한 WCAG 가이드라인
웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)에서는 접근성 높은 디지털 경험을 지원하기 위해 구체적인 명암비 권장 사항을 제공하고 있습니다.
WCAG 2.1에 따르면 레벨 AA 준수를 위해서는 다음과 같은 최소 명암비를 갖춰야 합니다.
일반 텍스트: 최소 4.5:1
18pt 또는 14pt의 큰 텍스트: 최소 3:1
웹사이트를 게시하기 전에 아래의 명암비 검사 도구 중 하나를 사용하여 대비율을 확인해 보세요.
WCAG 접근성 이해하기
WCAG는 웹 접근성 가이드라인을 세 가지 수준(Level A, AA, AAA)으로 나누어 제시하고 있습니다. 이 수준들은 콘텐츠 접근성을 보장하는 기준의 강도를 나타냅니다. Framer로 디자인을 할 때 어떤 수준을 목표로 해야 하는지 확인해보시길 바랍니다.
WCAG의 3가지 접근성
Level A: 기본 접근성을 충족하는 수준입니다. 예를 들어, 이미지에 대체 텍스트를 제공하는 것과 같이 가장 기본적인 요구사항들이 포함됩니다.
Level AA: 대부분의 사용자가 접근할 수 있는 기준으로, 대다수 디지털 서비스가 표준으로 지향하는 수준입니다. 강조하는 명암비(본문 4.5:1, 큰 텍스트 3:1)가 바로 Level AA 기준입니다.
Level AAA: 모든 사용자가 접근할 수 있도록 하는 매우 엄격한 기준입니다. 동영상에 수어(수화)를 제공하거나, 본문 텍스트 명암비를 7:1의 고대비로 설정하는 등 높은 수준의 요구사항이 포함됩니다. 이 수준은 모든 웹사이트에 적용하기 어려울 수 있으니 참고하세요.
Level AA의 핵심 기준
웹 접근성의 다양한 요소 가운데 명암비(Contrast Ratio)는 사용자들이 콘텐츠를 쉽게 읽을 수 있도록 돕는 매우 중요한 요소입니다. 대부분의 사용자를 고려하는 Level AA 가이드를 다시 한번 구체적으로 확인해 보세요.
본문 텍스트 명암비: 텍스트와 배경 간 명암비는 최소 4.5:1 이상을 유지해야 합니다. 이는 일반적인 텍스트의 가독성을 확보하기 위한 기준입니다.
큰 텍스트 명암비: 텍스트와 배경 간 명암비는 최소 3:1 이상을 유지해야 합니다. 큰 텍스트(18pt 이상 크기 또는 14pt 볼드 이상의 텍스트)는 크기 덕분에 대비가 덜 중요할 수 있지만, 충분한 가독성 확보를 위해 이 기준을 만족해야 합니다.
이 명암비 기준을 준수하면, 시각적 접근성을 높여 다양한 사용자들이 여러분의 콘텐츠를 더 쉽게 읽을 수 있을 겁니다. 해당 기준을 충족하여 사용자들에게 더 높은 접근성을 선사해보세요.
자주 묻는 질문(FAQ)
Q. Framer에서 명암비 검사를 자동으로 해주는 기능이 내장되어 있나요?
아닙니다. Framer 자체에 실시간 명암비 검사기가 내장되어 있지는 않습니다. Framer는 주로 디자인 및 웹사이트 구축에 중점을 두지만, 현재 글에서 언급된 WebAIM Contrast Checker와 같은 외부 도구를 사용하여 색상 팔레트와 텍스트 조합을 확인해야 합니다.
Q. Level AAA 기준을 충족하면 웹사이트가 더 좋아지나요?
네, Level AAA는 가장 높은 수준의 접근성을 제공하지만, 해당 기준은 매우 엄격하여 때로는 웹사이트의 디자인이나 특정 기능 구현에 상당한 제약이 될 수 있습니다. 따라서 Level AA를 표준으로 지향하는 것이 일반적입니다.
Q. Framer에서 로고나 이미지 같은 요소에도 명암비 기준을 적용해야 하나요?
아닙니다. 명암비 기준은 기본적으로 텍스트의 가독성을 보장하기 위해 설계되었습니다. 따라서 텍스트가 아닌 요소 중에서도 정보 전달 목적이 없는 경우 명암비 기준을 꼭 적용할 필요는 없습니다.
본 글은 Framer 공식 블로그의 ‘Understanding contrast ratio’를 번역·각색한 콘텐츠입니다.
