글자가 작으면 예쁜 디자인도 실패한다 — 웹 접근성 첫 점검

웹 글자가 작으면 내용이 좋아도 읽기 전에 이탈합니다.
접근성은 특정 숫자 하나를 맞추는 일이 아니라, 확대해도 글과 버튼이 잘리지 않고 대비와 줄간격이 유지되는지 확인하는 과정입니다.
모바일과 실제 공개 화면에서 가장 먼저 볼 항목을 정리했습니다.

편집기에서 보이는 크기보다 독자가 실제 웹에서 보는 계산된 글자 크기가 기준입니다.

폰트 이름보다 실제 크기를 봐야 합니다

에디터의 크기 이름과 공개 페이지의 픽셀 값은 스킨 CSS에 따라 달라질 수 있습니다.
같은 본문이라도 모바일 화면, 표, 카드 안에서는 더 작게 계산되기도 합니다.
개발자 도구의 computed font-size와 실제 휴대폰 화면을 함께 확인해야 하는 이유입니다.

728x90

WCAG는 200% 확대를 봅니다

W3C WCAG 1.4.4는 글자를 200%까지 키워도 콘텐츠나 기능이 사라지지 않아야 한다고 설명합니다.
확대했을 때 문장이 잘리고 버튼이 겹치거나 가로 스크롤 없이는 읽을 수 없다면 개선이 필요합니다.
특정 본문 크기 하나만 지켰다고 접근성 검사가 끝나는 것은 아닙니다.

점검 위치	실패 신호
본문·목록	확대 전부터 읽기 어렵다
표·카드	본문보다 눈에 띄게 작다
200% 확대	글이나 버튼이 잘리고 겹친다

반응형

모바일에서 네 곳을 확인하세요

본문, 목록, 표 안의 글자, 카드 안 설명을 각각 확인합니다.
제목과 본문의 크기 차이가 충분한지, 줄간격이 답답하지 않은지 봅니다.
밝은 배경의 회색 글자처럼 대비가 약한 조합도 함께 점검합니다.

가장 단순한 검사 순서

공개 페이지를 실제 휴대폰 너비로 엽니다.
브라우저 확대를 200%로 올리고 잘림과 겹침을 찾습니다.
본문 스타일을 고친 뒤 카드와 표에 별도 작은 크기가 남아 있는지 다시 확인합니다.

자주 묻는 질문

본문은 무조건 16px 이상이어야 하나요?

WCAG가 모든 상황에 고정 최소값 하나를 지정하는 것은 아닙니다. 화면과 글꼴, 대비를 고려하되 일반 본문은 충분히 크게 제공하는 편이 안전합니다.

에디터에서 커 보이면 괜찮지 않나요?

아닙니다. 스킨 CSS가 공개 화면에서 다른 크기로 바꿀 수 있어 실제 페이지를 확인해야 합니다.

지금 할 일

실제 공개 페이지의 계산된 글자 크기를 확인합니다.
모바일과 200% 확대에서 잘림·겹침을 검사합니다.
본문뿐 아니라 목록·표·카드의 작은 글자까지 같은 기준으로 고칩니다.