언제 쓰나
디자인 시스템에 새 brand color 를 도입하면서 그 색을 포커스 링 (outline)
으로 써도 KWCAG / WCAG 기준에 맞는지 확인할 때, 라이트 / 다크 두 테마에서
포커스 링이 모두 보이는지 검증할 때, CSS reset 으로 outline 을 지운 후
:focus-visible 로 다시 정의하면서 색을 고를 때.
두 배경 동시 검증
포커스 링은 인접한 두 배경 양쪽에 동시에 3:1 이어야 합니다:
- 요소 자체 (
outline-offset: 0일 때 또는 안쪽 가장자리) — 버튼 / 입력 필드 색 위에 링이 가까이. - 페이지 배경 (offset 으로 페이지로 뻗을 때) — 링의 바깥쪽이 닿는 페이지 색.
한 쪽만 검증하면 다른 쪽에서 무너지는 케이스를 빠뜨립니다 (예: 노란 warning 버튼 위에 노랑 링은 통과하지만 흰 페이지 배경에선 1.5:1).
WCAG 기준
- WCAG 2.4.11 — Focus Appearance (WCAG 2.2 신규, AA). 포커스 인디케이터의 색 변화가 인접 색에 3:1.
- WCAG 1.4.11 — Non-text Contrast (WCAG 2.1, AA). UI 컴포넌트 경계 / 그래픽 정보가 인접 색에 3:1.
KWCAG (한국형 웹 콘텐츠 접근성 지침) 2.2 도 동일한 절을 채택. 본 도구는 두 기준 동시 측정.
outline 옵션
- width 2 / 3px — 두꺼울수록 시각 강조 강함. 기본 권장 2px.
- offset 0 / 2 / 4px — 큰 offset 일수록 페이지 배경 vs 링 대비가 지배적. 0 은 요소 vs 링 대비가 핵심.
- style solid / double / dashed — solid 가 가장 안전. dashed 는 점선 사이의 빈 공간이 시각 효과를 약화 — 산술 통과해도 실측 권장.
자동 측정의 한계
본 도구는 색 대비 산술 만. WCAG 2.4.11 의 다른 조건은 별도:
- 포커스 인디케이터의 면적 (≥ 1 CSS pixel × 길이의 합)
- 포커스 변화가 완전히 가려지지 않음 (sticky header 뒤로 들어간 element)
- 인접한 다른 시각 요소와의 식별성
위 조건은 자동 측정 불가 — 실제 키보드 탭 / 스크린리더 / 확대경 사용자 테스트와 함께.
보안
디자인 시스템의 brand · 포커스 토큰을 입력해도 외부로 전송되지 않습니다. culori 의 색 파싱과 luminance 계산만 — 외부 호출 0.
안 맞는 경우
- 3D / shadow-only 포커스 — outline 이 아닌 box-shadow 또는 ring 만으로 포커스 표현 시. 본 도구는 outline 직접 시뮬. shadow 변환 컬러 비교는 별도.
- 포커스 + 호버 동시 상태 — 본 도구는 한 시점만. 여러 상태 매트릭스 검증은 design tokens 도구 또는 Figma 플러그인.
- 이미지 / 그라디언트 배경 — 단색 가정. 사진 배경 위 포커스는 사진의 지배 색을 별도로 확인.
색 토큰은 페이지 안에서만
디자인 시스템의 brand · 포커스 토큰을 입력해도 외부로 전송되지 않습니다. culori 클라이언트 산수만 — 외부 호출 0KB.