02 · Design Style / 선명한 화면 모드
선명한 화면 모드High Contrast Mode
시력 저하·저조도 환경·디스플레이 품질 편차에 대응하는 접근성 강화 모드. WCAG AAA 수준의 대비를 기본값으로 하고, 테두리를 한 단계 강화하며 포커스 링을 두껍게 그립니다.
왜 필요한가
주님의교회 PCL 디자인 시스템 기본 설정은 이미 WCAG AA를 충족합니다. 그러나 AA는 “최소 기준”이지, “모든 사용자가 편안한 기준”은 아닙니다. 고령·저시력 사용자, 햇빛이 강한 야외 환경, 값싼 IPS 모니터처럼 컨트라스트가 깎이는 맥락을 위해 High Contrast 모드를 별도로 제공합니다.
이 모드를 강제로 켜는 것은 접근성이 아닙니다. 기본은 미려하게 유지하되, 사용자가 원할 때 선택할 수 있도록 시스템 레벨에서 준비되어 있어야 합니다.
기본 모드와의 차이
High Contrast 모드는 다음 5가지를 한 번에 조정합니다 — 각각은 시맨틱 토큰의 값을 한 단계씩 강화하는 방식으로 구현되며, 컴포넌트 코드는 건드리지 않습니다.
본문 텍스트
기본 모드
이 문장은 기본 모드 대비값으로 표시됩니다.
gray-500 on white · 4.8:1
High Contrast
같은 문장을 High Contrast 모드로 봤을 때입니다.
gray-700 on white · 9.9:1
테두리
기본 모드
이 문장은 기본 모드 대비값으로 표시됩니다.
gray-200 on white · 1.4:1
High Contrast
같은 문장을 High Contrast 모드로 봤을 때입니다.
gray-500 on white · 4.8:1
액센트 링크
기본 모드
이 문장은 기본 모드 대비값으로 표시됩니다.
blue-500 on white · 6.2:1
High Contrast
같은 문장을 High Contrast 모드로 봤을 때입니다.
blue-700 on white · 11.3:1
포커스 링
기본 모드에서는 2px accent 링 + 2px offset, High Contrast 모드에서는 3px solid + 3px offset으로 두껍게 그립니다. 키보드로만 탐색하는 사용자가 현재 초점을 놓치지 않도록, 포커스 링은 반드시 내부 요소 색과 무관하게 보여야 합니다.
기본 포커스
High Contrast 포커스
활성화 방법
주님의교회 PCL 디자인 시스템은 세 가지 방법을 모두 지원합니다:
1. OS 설정 — @media (prefers-contrast: more) 미디어 쿼리로 자동 적용. macOS 시스템 설정 · Windows 고대비 테마를 켠 사용자에게 즉시 반영됩니다.
2. 사이트 토글 — 헤더 유틸리티 바의 “선명” 버튼으로 사용자가 직접 켜고 끌 수 있습니다. 선택값은 localStorage에 저장되어 세션을 넘어 유지됩니다.
3. 글자 크기 조절기와 연동 — 대비 강화와 글자 확대를 함께 쓰는 경우가 많으므로, 글자 크기 조절기의 “최대” 단계에서 자동으로 High Contrast가 함께 켜지는 옵션을 제공합니다.