WCAG 1.4.8: 시각적 표현

WCAG 1.4.8은 텍스트 블록이 사용자가 제어할 수 있는 방식으로 시각적으로 제공되도록 요구합니다. 여기에는 전경색과 배경색, 줄 너비, 줄 간격, 텍스트 정렬이 포함되며, 이를 통해 읽기, 인지, 저시력 장애가 있는 사람들이 정보 손실 없이 편안하게 콘텐츠를 읽을 수 있도록 합니다.

이 규칙의 의미

시각적 표현(Visual Presentation)이라는 제목의 WCAG 성공 기준 1.4.8은 인지 가능(Perceivable) 원칙 아래 AAA 수준에 속합니다. 이 기준은 단일 단어, 레이블, 짧은 구절이 아니라 읽을 수 있는 상당한 분량의 콘텐츠를 의미하는 텍스트 블록에만 구체적으로 적용됩니다. 이 기준은 완전한 통과를 위해 동시에 모두 충족되어야 하는 다섯 가지 개별 요구 사항을 제시합니다.

첫째, 전경색과 배경색은 사용자가 선택할 수 있어야 합니다. 페이지는 두 색을 함께 지정하지 않거나(최소한 하나는 브라우저 기본값으로 남겨두거나) 사용자가 자신의 색 조합을 선택할 수 있는 메커니즘을 제공해야 합니다. 고정된 색 조합을 강제하는 것은, 특정 색조가 필요한 Irlen 증후군이나 광과민증과 같은 상태를 가진 독자들에게는 고대비 조합이라 하더라도 해로울 수 있습니다.

둘째, 텍스트 블록의 너비는 80자를 초과해서는 안 됩니다(CJK — 중국어, 일본어, 한국어 — 스크립트의 경우 40자). 이 제한은 요소의 너비가 아니라 렌더링된 텍스트 한 줄당 문자 수로 계산됩니다. 글자 크기가 커서 짧은 줄로 구성된 1200 px 너비의 컬럼은 여전히 통과할 수 있지만, 글자 크기가 매우 작고 끊기지 않은 긴 문자열로 이루어진 좁은 컬럼은 실패할 수 있습니다.

셋째, 텍스트는 양쪽 정렬(풀 저스티파이)되어서는 안 됩니다(즉, 왼쪽과 오른쪽 여백에 동시에 맞춰 정렬해서는 안 됩니다). 양쪽 정렬은 불균일한 단어 간격을 만들어내며 — 때로는 "흰 공간의 강(rivers)"이라고도 불립니다 — 이는 난독증이나 기타 읽기 차이를 가진 사람들의 읽기 유창성을 방해합니다. 왼쪽 정렬(오른쪽 들쭉날쭉)은 항상 허용되며, 가운데 정렬이나 오른쪽 정렬은 짧은 구절에는 허용됩니다.

넷째, 문단 내 줄 간격은 글자 크기의 최소 1.5배여야 하고, 문단 간 간격은 글자 크기의 최소 2.25배여야 합니다. 이러한 최소값은 충분한 수직 여백을 보장하여, 줄을 신중하게 따라가는 독자가 위치를 잃거나 인접한 줄을 혼동하지 않도록 합니다.

다섯째, 텍스트는 보조 기술 없이도 200%까지 크기 조정이 가능해야 하며, 이때 콘텐츠나 기능의 손실이 없어야 합니다. 이는 SC 1.4.4(텍스트 크기 조정, AA 수준)와 약간 다른데, 특히 텍스트 블록의 시각적 표현에 대해 이 동작을 요구하며, 화면 확대 도구나 브라우저 확대 강제 설정에 의존하지 않고 페이지 자체가 이 스케일링을 원활히 지원해야 한다는 점을 명시합니다.

중요한 공식 예외: 이 요구 사항은 캡션이나 텍스트 이미지에는 적용되지 않습니다. 래스터 이미지에 포함된 텍스트는 CSS로 크기 조정이나 재색상이 불가능하기 때문에, SC 1.4.5(텍스트 이미지)가 별도로 그 사용을 지양합니다. 순수하게 그래픽 요소로 사용되는 장식용 텍스트도 마찬가지로 제외됩니다.

통과하려면 다섯 가지 하위 요구 사항을 모두 충족해야 합니다. 예를 들어, 긴 기사 본문에 text-align: justify를 적용하고 이를 변경할 수 있는 메커니즘을 제공하지 않는 등, 그중 하나라도 실패하면 기준 전체의 실패로 간주됩니다.

왜 중요한가

텍스트의 시각적 표현은 일반적인 인쇄물이나 화면 읽기를 수월하게 경험하지 못하는 독자들에게 특히 큰 영향을 미칩니다. 이 기준의 영향을 가장 직접적으로 받는 집단에는 난독증이 있는 사람들, 화면 확대 도구 대신 브라우저 확대에 의존하는 저시력 사용자, Irlen 증후군이나 암순응 민감성(scotopic sensitivity)이 있는 사람들, 읽기 속도와 이해에 영향을 미치는 인지 장애가 있는 개인, 그리고 시간이 지남에 따라 읽기 편안함이 감소한 고령 사용자들이 포함됩니다.

영국 난독증 협회에 따르면, 인구의 약 10%가 어느 정도의 난독증을 가지고 있으며, 이 중 약 4%는 심각한 난독증을 경험합니다. 이러한 사용자에게 양쪽 정렬 텍스트는 읽기를 거의 불가능하게 만드는 시각적 왜곡을 일으킬 수 있습니다. 긴 줄 길이는 줄 끝에서 눈이 이동해야 하는 거리를 늘려, 다음에 읽어야 할 줄을 놓칠 가능성을 높임으로써 문제를 더욱 악화시킵니다. 재정의할 수 없는 고정 색 조합은, 읽기를 더 수월하게 해주는 색 오버레이나 대비 스킴을 사용자가 적용하지 못하게 합니다.

세계보건기구(WHO)에 따르면 전 세계적으로 약 2억 4,600만 명의 저시력 사용자가 있으며, 이들에게 페이지 흐름 내에서 텍스트를 크기 조정할 수 있는 능력은 매우 중요합니다. 텍스트를 200%로 확대했을 때 레이아웃이 깨지거나, 콘텐츠가 잘리거나, 내비게이션이 숨겨진다면, 이 사용자들은 사실상 사이트의 일부에 접근할 수 없게 됩니다. 이들은 전용 화면 확대 소프트웨어에 접근하지 못할 수도 있고, 개인적으로 조정해 둔 브라우저 확대 설정이 제공하는 더 세밀한 제어를 선호할 수도 있습니다.

구체적인 상황을 생각해 봅시다. 중등도 난독증이 있는 사용자가 장문의 탐사 기사를 읽기 위해 온라인 뉴스 포털을 방문합니다. 기사 본문은 text-align: justify, 900 px 컬럼(기본 글자 크기에서 줄당 약 120자), 줄 간격 1.2의 고정 진회색-흰색 색 구성표를 사용합니다. 사용자는 브라우저를 세피아 배경을 선호하도록 설정해 두었지만, 사이트의 CSS가 전경색과 배경색을 모두 재정의하여 이 선호를 무효화합니다. 두 문단만에, 불균일한 간격, 과도한 줄 길이, 선호하는 색조를 적용할 수 없는 상황이 결합되어 기사는 사실상 읽을 수 없게 됩니다. 이는 가상의 극단적인 사례가 아니라, 오늘날 많은 주요 에디토리얼 웹사이트의 기본 디자인을 묘사한 것입니다.

장애 접근성 외에도, 이러한 요구 사항은 UX 연구에서 인정하는 일반적인 가독성 모범 사례와 겹칩니다. 줄 길이, 간격, 색상 유연성을 존중하는 사이트는 독자를 더 오래 유지하고, 이탈률을 줄이며, 더 나은 가독성 점수를 얻는 경향이 있습니다. 이는 모두 측정 가능한 SEO 및 참여도에 영향을 미칩니다.

테스트 방법

페이지의 텍스트 블록을 식별합니다. 기사, 제품 설명, 서비스 약관, 도움말 문서 등 콘텐츠가 많은 대표 페이지로 이동합니다. 기준의 대상이 되는 모든 상당한 분량의 연속 텍스트 블록 — 문단, 목록 본문, 산문이 포함된 표 셀 — 을 식별합니다. 이미지 캡션과 장식용 텍스트는 제외합니다.
색상 제어를 확인합니다. 브라우저 개발자 도구(F12)를 열고 텍스트 블록의 계산된 스타일을 검사합니다. color와 background-color가 모두 페이지의 CSS에 의해 명시적으로 설정되어 있고(브라우저 기본값에서 상속된 것이 아니라면), 페이지가 테마 스위처, 고대비 모드 토글, 사용자 스타일시트 활성화 방법 안내 등 대안을 제공하는지 확인합니다. 아무것도 없다면 이 하위 요구 사항은 실패입니다. Firefox에서 사용자 스타일시트를 임시로 강제 적용(about:config → layout.css.has-selector.enabled)하거나 Chrome DevTools의 "Forced Colors" 에뮬레이션을 사용해 사이트가 시스템 색상 선호를 존중하는지 관찰할 수도 있습니다.
줄 길이를 측정합니다. "Line Length"와 같은 브라우저 확장이나 axe DevTools 패널의 "Intelligent Guided Tests"를 사용해 문자 수 오버레이를 표시하거나, 대표적인 긴 줄의 문자를 수동으로 셉니다. 또는 한 줄을 워드 프로세서에 붙여넣고 문자 수를 셉니다. 줄이 일관되게 80자(또는 CJK의 경우 40자)를 초과하고, 사용자가 컬럼을 좁힐 수 있는 메커니즘이 없다면 이 하위 요구 사항은 실패입니다.
텍스트 정렬을 검사합니다. 개발자 도구에서 각 텍스트 블록의 계산된 text-align 값을 확인합니다. 장문의 텍스트 블록에 justify 값이 설정되어 있다면, 사용자가 왼쪽 정렬로 전환할 수 있는 토글을 제공하지 않는 한 실패입니다.
간격 값을 확인합니다. 개발자 도구에서 텍스트 블록의 계산된 line-height를 검사합니다. 24px처럼 배수가 아닌 단위로 표현되어 있다면, 이를 font-size 값으로 나눕니다. 결과는 ≥ 1.5여야 합니다. 그런 다음 문단 요소의 margin-bottom(또는 margin-top)을 검사합니다. 글자 크기로 나눈 값이 ≥ 2.25여야 합니다. 사용자 재정의를 막을 수 있는 !important 플래그로 설정된 값은 위험 요소로 기록해야 합니다.
200% 크기 조정을 테스트합니다. 브라우저에서 확대를 200%로 설정합니다(Ctrl/Cmd + "플러스" 키 또는 보기 → 확대 두 번). 모든 텍스트 블록을 검토하여 overflow: hidden에 의해 숨겨지는 잘림, 다른 요소 뒤로 사라지는 텍스트, 접근할 수 없게 되는 내비게이션이 있는지 확인합니다. 필요하다면 Chrome DevTools의 디바이스 툴바를 사용해 확대된 뷰포트를 시뮬레이션합니다. 텍스트 콘텐츠가 일부라도 손실되거나 기능이 사용 불가능해지면 실패입니다.
보조 기술 확인. NVDA와 Firefox에서 페이지를 200%로 확대하고 화살표 키로 기사를 탐색합니다. 모든 텍스트가 여전히 스크린 리더에 의해 읽히는지 확인합니다(확대 후 overflow: hidden으로 시각적으로 잘린 콘텐츠는 여전히 읽힐 수 있지만, 이 경우에도 시각적 실패로 표시해야 합니다). macOS의 VoiceOver와 Safari에서도 확대 테스트를 반복합니다. 이러한 검사는 확대 관련 레이아웃 변경이 콘텐츠를 접근성 트리에서 제거하지 않는지 확인하는 데 도움이 됩니다.
사용자 재정의 시뮬레이션. Firefox에서 설정 → 일반 → 글꼴 및 색상 → 색상으로 이동해 "내가 선택한 색상 사용"을 활성화하고 사용자 정의 전경색과 배경색을 설정합니다. 다시 페이지로 돌아가 사이트가 이러한 선택을 존중하는지, 아니면 재정의하는지 확인합니다. 색상 선언에 !important를 사용하는 사이트는 사용자 선호를 재정의하며, 이는 색상 선택 가능성 하위 요구 사항의 실패입니다.

수정 방법

사용자 제어 없는 고정 색 조합 — 잘못된 예

<!-- Both color and background-color are hardcoded; user browser preferences are overridden -->
<style>
  .article-body {
    color: #1a1a1a;
    background-color: #ffffff;
    /* No theme switcher provided */
  }
</style>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

사용자 제어 없는 고정 색 조합 — 올바른 예

<!-- Uses CSS custom properties so a theme switcher or user stylesheet can override both values -->
<style>
  :root {
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
  }
  [data-theme='sepia'] {
    --text-color: #3b2a1a;
    --bg-color: #f5edd6;
  }
  [data-theme='high-contrast'] {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
  .article-body {
    color: var(--text-color);
    background-color: var(--bg-color);
  }
</style>
<!-- Theme switcher gives users explicit control -->
<div role='group' aria-label='Color theme'>
  <button onclick="document.documentElement.setAttribute('data-theme','default')">Default</button>
  <button onclick="document.documentElement.setAttribute('data-theme','sepia')">Sepia</button>
  <button onclick="document.documentElement.setAttribute('data-theme','high-contrast')">High Contrast</button>
</div>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

과도한 줄 길이를 가진 양쪽 정렬 텍스트 — 잘못된 예

<!-- text-align: justify applied to a very wide unrestricted column -->
<style>
  .content {
    text-align: justify;
    /* No max-width constraint; lines easily exceed 80 characters */
  }
</style>
<div class='content'>
  <p>This paragraph stretches across the full width of the viewport, creating uneven word spacing that makes reading difficult for users with dyslexia or other reading differences. Each line may contain well over 100 characters.</p>
</div>

과도한 줄 길이를 가진 양쪽 정렬 텍스트 — 올바른 예

<!-- Left-aligned text with a max-width that keeps lines under 80 characters -->
<style>
  .content {
    text-align: left; /* Ragged-right prevents uneven word spacing */
    max-width: 66ch;  /* ch unit approximates character width; 66ch ≈ 80 average chars */
    line-height: 1.6; /* Exceeds the 1.5× minimum */
  }
  .content p {
    margin-bottom: 2.5em; /* 2.5× font-size exceeds the 2.25× paragraph spacing minimum */
  }
</style>
<div class='content'>
  <p>This paragraph is constrained to a comfortable reading width, uses left alignment, and has generous line and paragraph spacing — satisfying three of the five sub-requirements simultaneously.</p>
</div>

200% 확대 시 깨지는 불충분한 줄 간격 — 잘못된 예

<!-- line-height set in pixels; does not scale with font resizing -->
<style>
  .article p {
    font-size: 16px;
    line-height: 18px; /* Only 1.125× font size — below the 1.5× requirement */
  }
</style>
<div class='article'>
  <p>When the user zooms to 200%, this text becomes 32px but line-height remains 18px, causing lines to overlap and become unreadable.</p>
</div>

200% 확대 시 깨지는 불충분한 줄 간격 — 올바른 예

<!-- line-height as a unitless multiplier scales with any font size change -->
<style>
  .article p {
    font-size: 1rem;   /* Respects browser default font size setting */
    line-height: 1.6;  /* Unitless: always 1.6× the current font size, even when zoomed */
    margin-bottom: 2.5em; /* Scales proportionally with font size */
  }
</style>
<div class='article'>
  <p>At any zoom level or font size, this paragraph maintains correct proportional spacing because line-height is expressed as a unitless number rather than a fixed pixel value.</p>
</div>

자주 발생하는 실수

line-height를 단위 없는 배수가 아니라 픽셀이나 포인트로 설정하는 경우. 사용자가 텍스트를 확대하거나 페이지를 확대하면 픽셀 기반 줄 간격은 고정된 상태로 남아 줄이 겹치게 됩니다. 항상 1.6과 같은 단위 없는 값을 사용해 간격이 비례적으로 확대되도록 하십시오.
대안을 제공하지 않은 채 장문의 본문 텍스트에 text-align: justify를 사용하는 경우. 양쪽 정렬 텍스트는 데스크톱 기본 확대에서 깔끔해 보일 수 있지만, 난독증 사용자를 위해서는 불규칙한 단어 간격을 만들어냅니다. 산문 블록에서 양쪽 정렬을 제거하거나 사용자에게 정렬 토글을 제공하십시오.
max-width를 문자 단위(ch)나 상대 단위(em)가 아니라 픽셀로 설정하는 경우. 픽셀 기반 최대 너비는 사용자가 브라우저 기본 글자 크기를 변경할 때 적응하지 못해, 작은 글자 크기에서는 줄이 80자를 초과하게 만들고, 큰 글자 크기에서는 공간이 낭비될 수 있습니다.
body나 article 요소에 !important와 함께 color와 background-color를 모두 선언하는 경우. !important를 사용하면 사용자 스타일시트가 색상을 재정의하는 것을 명시적으로 차단하게 되며, 이는 광과민증이나 Irlen 증후군이 있는 사용자가 읽기 환경을 맞춤 설정하는 주요 메커니즘을 막는 것입니다.
200% 확대에서 테스트하지 않은 채 텍스트 컨테이너에 overflow: hidden에 의존하는 경우. 뷰포트 단위나 고정 픽셀로 크기가 지정된 컨테이너는 사용자가 확대할 때 텍스트를 잘라내어, 재흐름(reflow) 대신 콘텐츠를 완전히 숨기게 됩니다.
margin이 아닌 padding만으로 문단 간 간격을 적용하는 경우. 부모 컨테이너에 overflow: hidden이 설정되어 있으면, 하단 패딩이 시각적으로 접혀 간격이 없는 것처럼 보일 수 있습니다. 신뢰할 수 있는 간격을 위해 문단에 margin-bottom을 사용하십시오.
문단 간 간격을 em이 아닌 픽셀(margin-bottom: 20px)로 설정하는 경우. 줄 간격과 마찬가지로, 픽셀 기반 문단 간 간격은 글자 크기 변경에 따라 확대되지 않아, 사용자가 브라우저에서 더 큰 기본 글자 크기를 선택할 때 문단이 서로 너무 가까워지게 됩니다.
좁은 뷰포트라면 자동으로 짧은 줄 길이가 보장된다고 가정하는 경우. 모바일 뷰포트에서도 작은 글자 크기는 문자 수 기준으로 매우 긴 줄을 만들 수 있습니다. 컬럼 너비를 픽셀로 측정하는 것만이 아니라, 항상 기기 기본 글자 크기에서 줄당 문자 수를 확인하십시오.
색상 선택 가능성이 아닌 색 대비 비율만 변경하는 고대비 테마 토글을 제공하는 경우. 라이트 모드에서 다크 모드로 전환하는 토글은 여전히 전경색과 배경색을 모두 지정합니다. 이 기준은 사용자가 미리 설정된 쌍 중에서 고르는 것이 아니라, 자신의 색을 선택할 수 있어야 함을 요구합니다. 사전 설정에 사용자 정의 색 선택기를 추가하거나, 페이지가 prefers-color-scheme 및 forced-colors 미디어 쿼리를 존중하도록 하십시오.
스크롤 가능한 컨테이너 안의 장문 텍스트 테스트를 잊는 경우. overflow: scroll 또는 overflow: auto가 설정된 요소 내부의 텍스트 블록은 수동 검토에서 종종 빠집니다. 이러한 컨테이너는 자체 너비 제약을 가지며, 이로 인해 줄 길이나 확대 동작이 문서의 기본 흐름과 다를 수 있습니다.

터키 접근성 규정과의 관계

터키의 2025/10호 대통령령은 2025년 6월 21일 관보 제32933호에 게재되었으며, WCAG 2.1(및 WCAG 2.2 모범 사례와의 강한 정합성)을 직접 참조하는 의무적 디지털 접근성 요구 사항을 수립합니다. 이 대통령령은 터키에서 운영되는 광범위한 유형의 기관에 대해 집행 가능한 의무를 부과하며, 모든 수준의 공공 기관과 정부 기관, 전자상거래 플랫폼, 은행 및 금융 서비스 제공자, 병원 및 민간 의료 기관, 가입자 200,000명 이상인 통신 사업자, 여행사, 민간 운송 회사, 그리고 교육부(Ministry of National Education)가 인가한 민간 학교를 포함합니다.

WCAG 1.4.8은 AAA 수준 기준으로, 대통령령이 이를 최소 법적 기준으로 의무화하지는 않습니다. 법적 기본 요구 사항은 일반적으로 WCAG AA 수준 준수입니다. 그러나 시각적 표현과 같은 AAA 기준은 여러 이유로 터키 조직에 상당한 실질적·평판적 중요성을 가집니다.

첫째, 대통령령의 적용을 받는 공공 기관과 대형 민간 부문 조직은 시간이 지남에 따라 접근성을 점진적으로 개선할 것으로 기대됩니다. 감사인과 감독 기관은 점점 더 AAA 기준을 단순한 체크리스트 준수를 넘어선 진정한 의지의 지표로 보고 있습니다. 특히 색상 테마 제어 제공, 시스템 색상 선호 존중, 적절한 텍스트 간격 유지 등을 통해 1.4.8을 선제적으로 구현하는 조직은 난독증, 저시력, 광과민증이 있는 사용자로부터의 민원을 받을 가능성이 훨씬 낮습니다.

둘째, 터키에는 1.4.8의 직접적인 혜택을 받는 사용자가 상당히 많습니다. 난독증 유병률이 약 10%로 추정되고, 수백만 명의 저시력 사용자가 있는 상황에서, 대규모 소비자 기반을 상대하는 은행, 통신사, 전자상거래 플랫폼, 병원 등은 상당한 비율의 사용자가 비준수 시각적 표현으로 어려움을 겪을 것이라고 예상해야 합니다. 이를 해결하지 않는 것은 접근성 장벽이자 비즈니스 리스크입니다.

셋째, 특히 교육(교육부 인가 민간 학교)과 의료 분야의 일부 특수 서비스는, 아동, 고령 환자, 인지 장애가 있는 개인 등 취약 계층에게 제공되는 콘텐츠에 대해 기준을 AAA 수준으로 상향하는 부문별 규제 지침에 직면할 수 있습니다. 이러한 맥락에서 1.4.8은 단순한 지향점에서 사실상 필수 요건으로 전환됩니다.

터키 시장에서 최고 수준의 접근성을 입증하고, 규제가 발전함에 따라 컴플라이언스 태세를 미래지향적으로 유지하려는 조직은 1.4.8을 선택적 향상이 아닌 디자인 표준으로 취급해야 합니다. 색상 테마를 위한 CSS 커스텀 프로퍼티 구현, ch 단위를 사용한 컬럼 너비 제한, 산문 블록에서 양쪽 정렬 텍스트 제거, 단위 없는 줄 간격 값 사용 등은 비용이 적게 들면서도 영향력이 큰 변경 사항으로, 폭넓은 사용자에게 혜택을 제공하고 터키 규제 프레임워크 하에서 진정한 접근성 리더십을 보여줍니다.