엔지니어링 명세 및 출처

측정 원리, 알고리즘 및 기술적 한계 고지

한글 가독성 Lab은 명도비를 수식으로 계산하고, 줄 수와 높이는 실행 중인 브라우저에서 측정합니다. 결과는 브라우저와 화면 설정에 따라 달라질 수 있습니다.

1. 명도 대비 계산의 수학적 알고리즘

명도 대비 검사(실험 2)는 W3C WCAG 2.2의 상대 휘도 계산식을 사용합니다. 입력은 불투명한 6자리 sRGB 색상으로 제한됩니다.

1.1 sRGB 선형화(Linearization)

입력된 8비트 RGB 값(0~255)을 0~1로 정규화한 후 WCAG의 분기식으로 선형화합니다.

c = C_8bit / 255;
C_linear = (c <= 0.04045) ? (c / 12.92) : Math.pow((c + 0.055) / 1.055, 2.4);

1.2 상대 휘도 및 대비율

인간의 색지각 가중치(Rec. 709 삼원색 자극치)를 반영하여 상대 휘도(L)를 산출하고, 두 색상 사이의 명도비를 계산합니다:

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear;
Contrast_Ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);

1.3 반올림 전 대비율로 판정

계산된 원래 대비율이 4.5 이상인지 판정하며, 화면 표시를 위한 소수점 값으로 합격 여부를 결정하지 않습니다.

2. 브라우저 기하 좌표 측정(DOM Range & ResizeObserver)

타이포그래피 A/B 실험(실험 1)은 브라우저에서 텍스트의 줄 수와 요소 크기를 측정합니다. 모바일 리플로우 실험(실험 3)은 요소의 스크롤 폭과 표시 폭을 비교합니다.

  • 물리적 줄 수 측정: document.createRange()와 getClientRects()를 호출하여 브라우저가 화면에 분할 렌더링한 텍스트 런(Text Run)의 행 수를 감지합니다. 다만 이는 렌더링 엔진(Blink, WebKit, Gecko)과 서브픽셀 래스터라이징 방식에 따라 측정 환경별 미세한 차이가 발생할 수 있습니다.
  • 컨테이너 및 오버플로 감지: scrollWidth - clientWidth > 1 조건으로 수평 넘침을 표시합니다. 스크롤 폭은 브라우저가 정수 픽셀로 반환하므로 미세한 서브픽셀 차이까지 판별하지 않습니다.
  • 크기 변경 추적: 타이포그래피 실험은 창 크기 변경 이벤트와 설정 변경 시 다시 측정하고, 리플로우 실험은 프리셋 및 설정 변경 시 넘침을 다시 확인합니다.

3. 공식 기술적 한계 및 면책 고지 (Limitations & Disclaimers)

⚠️ 반드시 숙지해야 할 한계점:
  1. WCAG 공식 인증 부재: 본 사이트의 도구는 특정 색상 조합이나 텍스트 레이아웃의 부분적 적합성을 판정할 뿐이며, 검사 대상 웹사이트 전체에 대한 ‘WCAG 공식 인증’이나 법적 적합성을 보증하지 않습니다.
  2. 명도 대비 적합성과 인간 독해 편안함의 차이: WCAG 2.2 명도 대비 공식(4.5:1 이상)을 충족한다고 해서 모든 사람에게 주관적인 읽기 편안함이 보장되는 것은 아닙니다. 명도비는 광학적 상대 휘도에 근거한 최소한의 수학적 식별성 지표이며, 글꼴 굵기, 크기, 배경 면적, 조명 및 개인별 시각 민감도(난독증, 눈부심 등)에 따라 체감 가독성은 크게 달라질 수 있습니다.
  3. DOM 기하 실측과 사용자 인지 연구의 구분: 본 사이트에서 제시하는 높이(px), 줄 수, 오버플로 수치는 브라우저 레이아웃 엔진의 물리적 렌더링 결과이며, 실제 인간의 시각적 피로도 감소나 독해 속도 향상은 별도의 인체공학적 임상 시험 및 사용자 연구와 엄격히 구분되어야 합니다.
  4. 반응형 시뮬레이션의 한계: 실험실 내 CSS 컨테이너 축소 시뮬레이션은 스마트폰 OS 수준의 뷰포트 확대, 서브픽셀 렌더링, 시스템 접근성 확대 기능과 차이가 있을 수 있습니다.
  5. 알파 투명도 미지원: RGBA 반투명 배경이나 그라디언트, 이미지 배경 위의 텍스트는 배경 픽셀의 복합 렌더링 결과에 따라 대비가 달라지므로 본 계산기에서는 sRGB 솔리드 컬러만 지원합니다.

4. 주요 참조 표준 및 공식 문서