본문 바로가기
Front-end/웹접근성

Figma 디자인 단계 접근성 체크리스트(퍼블리셔/디자이너 협업용)

by mooyou 2025. 4. 16.
728x90
300x250
SMALL
체크 항목 설명 기준 또는 툴
텍스트 대비 텍스트와 배경의 명도 대비가 충분한가? WCAG AA 기준(4.5:1이상)
폰트 크기 최소 14px 이상인가? 기본 텍스트는 16pc 추천
UI 크기 버튼, 체크박스 등은 최소 44~48px 모바일 기준
포커스 순서 시각적 구조와 논리적 포커스 순서가 일치하는가? 디자인 흐름 확인
아이콘 설명 의미 있는 아이콘에는 텍스트 라벨 또는 aria-label이 존재하는가? 예 : 돋보기 아이콘에 "검색"
상태 구분 색상 외의 방법으로 상태를 구분하고 있는가? 예 : 체크 표시, 밑줄 등
모션 과도한 모션 없는지, prefers-reduced-motion 대응 고려했는지 Web: CSS, App: OS설정

 

  • Figma 디자인 검토할 때 디자이너가 자체적으로 체크하거나 퍼블리셔가 검수 시 체크 포인트로 사용할 수 있다.

 

728x90
반응형
LIST

댓글