도구 허브 (Tool Hub)

자동 계산과 수동 판단을 나눈 6개 자가진단 도구

단순히 점수만 매기지 않습니다. 사용 상황, 대표 입력값, 판정의 실제 의미와 후속 수동 확인 조치를 함께 안내합니다.

텍스트·UI 색상 대비 계산기

반올림 전 대비율로 일반 텍스트, 큰 텍스트, UI 구성요소의 WCAG 2.2 경계값을 각각 확인합니다.

선택 상황: 텍스트나 아이콘의 배경 대비가 WCAG 2.2 AA/AAA 기준을 충족하는지 디자인 및 배포 전에 확인할 때 선택합니다.

대표 입력: 전경색 #777777, 배경색 #FFFFFF, 일반 텍스트 AA 기준

결과 의미: 화면 표시상 4.5:1로 반올림될 수 있지만, 내부 원값은 약 4.478:1로 AA 기준(4.5:1)에 미달하여 실패(Fail)로 판정됩니다.

다음 확인·수정 행동: 전경색을 최소 #767676(4.542:1) 이상으로 상향 조정하고, 실제 CSS 계산색과 배경 이미지·그라디언트 여부를 수동으로 대조합니다.

실제 클릭 영역의 CSS px 크기와 인접 대상 위치를 입력해 WCAG 2.2 AA·AAA 조건을 분리해서 검토합니다.

선택 상황: 모바일 화면에서 24×24px 미만의 작은 조작 대상이 간격 예외 조건을 만족하는지 기하학적으로 검토할 때 선택합니다.

대표 입력: 20×20px 크기의 아이콘 버튼 2개를 4px 여백을 두고 인접 배치 (좌표 모델링)

결과 의미: 버튼 크기 자체는 24px 미만이지만, 중심 간 거리가 24px 이상 유지되어 WCAG 2.2 SC 2.5.8 간격 원(Spacing Circle) 예외로 충족될 수 있음을 계산합니다.

다음 확인·수정 행동: 실제 모바일 기기 터치 조작 시 오작동 여부를 손가락으로 시험하고, 불합격 시 CSS padding을 늘려 터치 타깃을 확장합니다.

붙여 넣은 HTML에서 제목 순서, 빈 제목, role=heading의 aria-level 문제를 실행 없이 추출합니다.

선택 상황: 페이지의 제목 구조(H1~H6)가 논리적으로 계층화되어 스크린리더 단축키(H) 탐색에 혼선이 없는지 점검할 때 선택합니다.

대표 입력: <h1>메인 페이지 제목</h1> 바로 다음에 <h3>하위 섹션</h3>이 나타나는 최소 HTML 조각

결과 의미: H2 단계가 누락되어 보조기술 사용자에게 정보 구조의 단절을 초래하는 '단계 건너뜀(Skipped Heading Level)' 잠재 결함으로 식별됩니다.

다음 확인·수정 행동: HTML 태그를 <h2>로 단계에 맞게 수정하고, 시각적 글자 크기는 CSS 클래스로 제어하여 마크업 구조와 디자인을 분리합니다.

네이티브 폼 컨트롤의 이름 원천, 지속적으로 보이는 label, 깨진 ID 참조와 이름·레이블 불일치를 지원된 알고리즘 범위에서 검사합니다.

선택 상황: 입력창에 placeholder만 제공되어 텍스트 입력 시 레이블이 사라지거나 접근 가능한 이름이 누락되는지 진단할 때 선택합니다.

대표 입력: <input type='email' placeholder='이메일 주소 입력'> (명시적 label 태그 없음)

결과 의미: 지속적으로 보이는 시각적 레이블이 없어 WCAG 3.3.2 지시문 결함 및 스크린리더 접근 가능한 이름(Accessible Name) 결함 신호로 판정됩니다.

다음 확인·수정 행동: 고유 id를 가진 <label for='user-email'>이메일</label>을 명시적으로 추가하고, placeholder는 단순 예시 힌트로만 분리합니다.

빈 링크·버튼과 모호한 문구를 찾고, 링크 목적의 문맥 판단과 색상 구분 하위검사를 분리합니다.

선택 상황: '더보기', '상세보기'처럼 단독으로는 목적지를 알 수 없는 모호한 링크 텍스트의 보조기술 탐색성을 검사할 때 선택합니다.

대표 입력: <a href='/notice/12'>더보기</a> (상위 제목 '공지사항' 아래 배치)

결과 의미: 화면에서는 상위 제목과 함께 보여도 스크린리더 링크 목록 탐색 모드에서는 목적을 알 수 없는 모호한 링크(Ambiguous Link)로 판정됩니다.

다음 확인·수정 행동: 링크 텍스트를 '공지사항 더보기'로 명확화하거나 aria-label 또는 숨김 텍스트(<span class='sr-only'>공지사항</span>)를 보강합니다.

초점 색과 배경 대비, outline 제거 위험을 계산하고 순서·함정·가림은 수동 검사표로 분리합니다.

선택 상황: 키보드 Tab 키 탐색 시 초점 링이 제거되었거나 상단 고정 헤더(Sticky Header) 뒤로 가려지는 결함을 분석할 때 선택합니다.

대표 입력: 상단 고정 헤더(height: 60px)가 있는 레이아웃에서 앵커 링크로 스크롤 이동된 폼 입력창

결과 의미: 초점 색상 자체는 충족하더라도 고정 UI에 의해 초점이 시각적으로 완전히 가려지는 WCAG 2.4.11 초점 가림 결함으로 식별됩니다.

다음 확인·수정 행동: :focus-visible에 최소 3:1 대비의 아웃라인을 복원하고, CSS scroll-padding-top: 60px을 지정하여 가림을 방지합니다.