브라우저 안에서만 계산
클릭·터치 대상 크기와 간격 판정기
실제 클릭 영역의 CSS px 크기와 인접 대상 위치를 입력해 WCAG 2.2 AA·AAA 조건을 분리해서 검토합니다.
무엇을 결정할 수 있나요?
스마트폰과 태블릿을 중심으로 한 모바일 터치스크린 환경에서, 인터랙티브 버튼이나 링크가 지나치게 작거나 조밀하게 배치되어 있으면 손가락 터치 시 엉뚱한 버튼이 함께 눌리는 오터치(Fat Finger Error)가 발생합니다. W3C는 최신 웹 접근성 국제 표준인 WCAG 2.2에서 성공 기준 2.5.8(Target Size Minimum, Level AA)을 신설하여, 모든 대화형 컨트롤의 터치 대상 크기가 최소 24×24 CSS 픽셀 이상이거나 인접 요소와 충분한 물리적 간격을 유지할 것을 법적으로 의무화했습니다.
본 도구는 사용자가 입력한 대상 요소들의 가로·세로 치수와 x, y 중심점 좌표를 기반으로 크기 조건 및 정밀한 '간격 예외(Spacing Exception)'를 공학적으로 시뮬레이션합니다. 아이콘 그림 자체의 시각적 크기와 브라우저가 실제로 인식하는 이벤트 유효 영역(Hit Area)의 차이를 명확히 구분하여 판정합니다.
또한 본 도구는 WCAG 2.2 레벨 AA의 24px 기준과 최상위 권고 기준인 WCAG 2.1 AAA 레벨 44px(SC 2.5.5) 결과를 분리하여 제시합니다. 실무 퍼블리셔는 시각적 디자인을 훼손하지 않으면서 CSS 가상 요소(::after)로 터치 영역만 24px 이상으로 확장하는 최적의 솔루션을 도출할 수 있습니다.
이 페이지의 고유 질문: 24px보다 작은 조작 대상이 간격 조건을 만족하는지 어떻게 계산하는가?
로컬 계산 도구
값을 입력해 검사하기
입력값은 브라우저 상태에서만 처리하며 서버·URL·Analytics로 보내거나 저장하지 않습니다.
자동으로 확인하는 범위
- 직사각형 클릭 영역의 너비·높이 검증
- WCAG 2.2 AA 24 CSS px와 AAA 44 CSS px 결과 분리
- 인접 직사각형 중심 거리와 24px 원 중첩 검토
- 인라인·동등 기능·사용자 에이전트·필수 표현 예외는 수동 질문으로 전환
입력값과 단위
- x, y
- 대상 좌상단의 CSS px 좌표
- 너비, 높이
- 아이콘 그림이 아닌 실제 hit area의 CSS px
- 예외 후보
- 인라인, 동등 기능, 사용자 에이전트 제어, 표현상 필수 여부
판정할 때 지키는 원칙
- 24×24 이상이면 WCAG 2.2 AA 크기 하위검사를 충족합니다.
- 작은 대상의 간격 조건은 대상 주위 24 CSS px 지름 원이 다른 대상 또는 작은 대상의 원과 겹치는지 모델링합니다.
- 44×44 AAA 조건과 AA 예외 결과를 같은 합격 배지로 합치지 않습니다.
자체 검증 도식
수정 전·후 예제
16px 아이콘의 클릭 영역 확장
시각 영역과 hit area가 같음
.icon-button { width: 16px; height: 16px; }투명 패딩으로 hit area 확장
.icon-button { width: 24px; height: 24px; padding: 4px; }
.icon { width: 16px; height: 16px; }아이콘 모양을 키우지 않고 실제 버튼 상자를 확장할 수 있습니다.
붙어 있는 작은 페이지네이션
작은 대상이 촘촘함
.pager a { width: 20px; height: 20px; margin: 0; }크기 또는 중심 간격 조정
.pager a { min-width: 24px; min-height: 24px; }
.pager { gap: 8px; }크기와 간격 중 어떤 조건으로 문제를 해결했는지 결과에 따로 기록합니다.
실무 판단 가이드
24px·44px·6mm가 함께 나오는 이유
24px, 44px, 6mm 중 가장 큰 숫자 하나만 만족하면 모든 표준을 통과한다.
24 CSS px는 WCAG 2.2 AA 최소 조건과 예외에 연결되고, 44 CSS px는 별도 AAA 향상 조건입니다.
국내 국가표준의 물리 크기 문구는 권고 표현이며 CSS px와 직접 같은 합격 임계값으로 환산하지 않습니다. 표준 프로필과 단위를 분리해 기록해야 합니다.
판단 순서
- 시각 아이콘이 아니라 실제 hit area를 측정한다.
- AA 24px 크기와 간격 예외를 확인한다.
- AAA 44px 결과는 별도 표시한다.
- 인라인·동등 기능·사용자 에이전트 예외를 문맥에서 검토한다.
- 실제 기기 조작 표본을 남긴다.
실패했을 때 복구
- 가능하면 실제 클릭 영역을 24×24 이상으로 확장합니다.
- 작은 영역을 유지해야 하면 인접 중심 간격과 예외를 다시 확인합니다.
- 반응형 폭과 확대 상태에서 좌표를 다시 측정합니다.
회귀 테스트와 검수 증거
아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.
| Fixture ID | 입력 | 기대 결과 |
|---|---|---|
target-24-square | 0,0,24,24 | AA 크기 조건 통과 |
target-20-crowded | 20×20 대상 두 개, 중심 거리 부족 | 크기·간격 하위검사 실패 |
target-inline-16 | 16×16 인라인 링크 | 자동 실패가 아닌 예외 수동 검토 |
대표 fixture 검증 기록
- 검사 환경
- 브라우저 및 테스트 환경: 대표 fixture 기반 자동 테스트 및 DOM 파서 검증; 실제 화면낭독기 수동 검사는 미검사
- 예상 결과
- 두 배치 모두 크기는 24px 미만이며, 간격 조건은 좌표에 따라 독립 결과를 냅니다.
- 자동 결과
- 24px 미만 대상에 대해 간격 조건 충족 여부를 기하학적 좌표 계산으로 판정합니다. (실제 모바일 손가락 터치 조작은 수동 검토 필요)
- 재검사 방법
- 같은 크기를 유지하고 좌표만 바꿔 간격 결과가 결정적으로 바뀌는지 확인합니다.
자동 결과 뒤에 남는 검사
- 실제 이벤트 hit area
- 반응형 재배치
- 손가락 조작과 예외 정당성
자동 판정의 한계
- pseudo-element와 이벤트 위임을 포함한 실제 hit area를 자동으로 판단하지 않습니다.
- 원형·불규칙 SVG의 정확한 클릭 모양을 자동으로 계산하지 않습니다.
- 줌 및 기기 밀도를 반영한 실제 mm 물리 크기를 측정하지 않습니다.
- 반응형 재배치, 겹침, z-index, pointer-events를 자동으로 식별하지 않습니다.
- 예외 조건의 의미적 정당성은 수동 검토로 판단합니다.
반드시 남는 수동 확인
- 입력한 사각형이 실제 이벤트를 받는 영역인가?
- 화면 폭과 확대가 달라져도 간격이 유지되는가?
- 인라인 또는 동등 기능 예외를 실제 문맥이 충족하는가?
- 손가락 조작 표본에서 오작동이 반복되지 않는가?
공식 상세 근거
- WCAG 2.2 Success Criterion 2.5.8 — Target Size (Minimum)
- WCAG 2.2 Success Criterion 2.5.5 — Target Size (Enhanced)
이번 공개 검수 범위
WCAG 2.2 24/44 CSS px와 간격·예외 분리 대조, Chromium 다중 대상 입력 검수
- 테스트 증거: target-size 공식·경계·간격·예외 단위 테스트와 Playwright 도구 흐름
- 콘텐츠 검토: 24px·44px·물리 단위 오해와 20px fixture를 하나의 의사결정 흐름으로 통합
- 미검사·한계: 실제 모바일 손가락 조작 미검사
- 미검사·한계: pseudo-element hit area 미검사
자주 묻는 질문
버튼 크기가 20px인데도 통과할 수 있는 '간격 예외'란 무엇인가요?
WCAG 2.2 2.5.8의 간격 예외는 타깃의 중심점을 기준으로 반경 12px(직경 24px)의 가상 원을 그렸을 때, 인접한 다른 터치 대상의 경계선이나 다른 타깃의 24px 가상 원과 겹치지 않는다면 24px 미만의 작은 크기라도 통과로 인정하는 합리적인 예외 조항입니다. 즉, 크기가 작더라도 주변 여백이 충분히 넓으면 오터치 위험이 없다고 판단합니다.
디자인상 16px 아이콘을 유지하면서 24px 기준을 만족하는 방법은 무엇인가요?
CSS 가상 요소(::after)를 활용하여 시각적인 아이콘 크기는 16px로 유지하면서, 버튼의 투명한 인터랙션 영역(Hit Area)만 사방 24px 사각형으로 넓히는 기법이 가장 널리 권장됩니다. 레이아웃을 깨뜨리지 않고 터치 성공률을 극적으로 높일 수 있습니다.
본문 문장 중간에 들어가는 인라인 링크도 24px을 만족해야 하나요?
아닙니다. 문단 문맥 내에 포함된 인라인 텍스트 하이퍼링크는 독서 흐름과 줄바꿈 레이아웃을 보존하기 위해 WCAG 2.2 2.5.8의 공식 예외 대상으로 분류되어 24px 크기 의무가 면제됩니다.
데스크톱 마우스 환경에서도 24px 타깃 크기가 필수인가요?
WCAG 2.2 2.5.8은 포인터 입력 장치 전체에 적용되므로 원칙적으로 데스크톱 마우스 환경도 포함됩니다. 다만 모바일 터치 환경에서 특히 오작동 빈도가 높으므로 CSS 미디어 쿼리(@media pointer: coarse)를 활용해 모바일 환경에서 넉넉한 히트 에어리어를 보장하는 것이 실무적으로 중요합니다.