HTML과 CSS에 200% 텍스트 확대, 320 CSS px 리플로, WCAG 간격값을 적용해 보세요. 원본과 비교하며 고정된 카드, 버튼, 문단과 반응형 레이아웃에서 내용이 사라지는 위치를 찾을 수 있습니다. 붙여넣은 코드는 정제 후 스크립트 없이 격리된 미리보기에서만 렌더링되며, 외부 이미지·웹폰트·stylesheet는 불러오지 않습니다.
HTML이나 텍스트를 입력하면 원본과 확대·간격 적용 결과가 여기에 표시됩니다.
겹침, 기능 손실과 실제 브라우저 확대는 직접 확인하세요.
WCAG 1.4.4 AA
선택한 viewport 에서 계산된 글자 크기만 2배로 만듭니다. width·height·padding 은 바꾸지 않습니다.
WCAG 1.4.10 AA
원본 1280 CSS px, 검사 320 CSS px 로 내부 viewport 자체를 바꿔 반응형 CSS 가 실제로 동작하게 합니다.
WCAG 1.4.12 AA
줄 높이 1.5배, 문단 뒤 2배, 글자 0.12배, 단어 0.16배를 강제합니다. 기존 값이 더 크면 줄이지 않습니다.
WCAG 2.2에는 모든 웹페이지가 반드시 사용해야 하는 하나의 최소 폰트 크기가 정해져 있지 않습니다. 작은 글자가 무조건 괜찮다는 뜻은 아닙니다. 사용자가 브라우저나 사용자 설정으로 텍스트를 키웠을 때 내용과 기능을 잃지 않는지가 핵심 검사 대상입니다. 글자 크기를 하나의 숫자로 고정해 검사하면 화면 크기, 글꼴, 언어와 사용자의 확대 방식에 따라 달라지는 실제 문제를 놓치기 쉽습니다.
이 도구는 세 가지 조건을 분리해 보여줍니다. 텍스트 200%는 글자만 두 배가 됐을 때 고정된 카드와 control이 버티는지 확인합니다. 리플로 320px은 좁은 viewport에서 페이지가 한 방향으로 다시 배치되는지 확인합니다. 텍스트 간격은 사용자가 줄·문단·글자·단어 간격을 넓혀도 정보가 사라지지 않는지 확인합니다.
WCAG 1.4.4의 목적은 텍스트를 최대 200%까지 키워도 내용이나 기능이 잘리거나 가려지지 않게 하는 것입니다. 브라우저는 전체 페이지 zoom, 텍스트 전용 확대, 사용자 글꼴 설정처럼 여러 방식을 제공할 수 있습니다. 이 검사기의 텍스트 200% 프리셋은 각 요소의 계산된 글자 크기만 두 배로 만들고 width·height·padding은 그대로 둡니다. 고정된 컨테이너가 텍스트 증가를 견디는지 빠르게 찾기 위한 보수적인 stress test입니다.
따라서 preview가 실제 브라우저의 full-page zoom과 픽셀 단위로 같지는 않습니다. 운영 화면에서는 Chrome, Edge, Firefox 또는 Safari의 실제 확대 기능으로 100%부터 200% 사이의 단계도 확인해야 합니다. 특히 media query가 바뀌는 구간, sticky header, modal과 form control은 실제 페이지에서 다시 테스트하세요.
WCAG 1.4.10은 일반적으로 세로로 읽는 콘텐츠가 320 CSS px 너비에서 정보와 기능을 잃지 않고, 페이지 전체를 가로·세로 두 방향으로 반복 스크롤하지 않도록 요구합니다. 320 CSS px는 시작 viewport가 1280 CSS px일 때 브라우저를 400% 확대한 것과 동등한 폭입니다.
그래서 이 도구는 화면을 단순히 네 배 확대하는 필터를 사용하지 않습니다. 원본 preview의 내부 viewport를 1280px, 검사 preview를 320px로 실제 변경합니다. 이렇게 해야 좁은 화면을 겨냥한 반응형 CSS가 동작하고 여러 열이 쌓이거나 navigation이 재배치되는 모습을 확인할 수 있습니다.
데이터 표, 지도, 다이어그램처럼 의미를 이해하거나 조작하기 위해 2차원 배치가 필요한 영역은 수평 스크롤이 허용될 수 있습니다. 그렇더라도 페이지 전체가 아니라 해당 영역만 스크롤되는지, 표의 각 칸 안 텍스트가 불필요하게 잘리지 않는지는 확인해야 합니다.
WCAG 1.4.12는 줄 높이 글자 크기의 1.5배, 문단 뒤 간격 2배, 글자 간격 0.12배, 단어 간격 0.16배를 동시에 적용했을 때 콘텐츠나 기능 손실이 없어야 한다고 설명합니다.
이 값을 사이트의 기본 typography로 반드시 사용하라는 기준은 아닙니다. 사용자가 자신의 읽기 필요에 맞춰 author style을 덮어쓸 수 있어야 하고, 그 결과 문구·버튼·입력창·tooltip이 잘리거나 사라지지 않아야 한다는 뜻입니다. 검사기는 현재 값이 기준보다 이미 크다면 줄이지 않고 네 속성만 확대합니다.
언어와 문자 체계에 따라 일부 간격 속성의 효과는 다릅니다. 한글은 띄어쓰기가 있는 문장에서 word-spacing 영향이 나타나지만, 실제 문구가 짧거나 공백이 없다면 차이가 작을 수 있습니다. 한국어·영어·숫자가 섞인 실제 서비스 문구로 확인하는 편이 안전합니다.
고정된 width와 height: 카드에 height 200px와 overflow: hidden을 함께 사용하면 기본 문구는 맞더라도 확대된 문구나 번역된 긴 문구가 잘릴 수 있습니다. 꼭 필요한 경우가 아니라면 자연스러운 높이, min-height, 내부 여백과 줄바꿈을 사용하세요. 고정 width가 320px viewport보다 크면 페이지 전체의 가로 오버플로 원인이 됩니다.
줄바꿈을 막는 white-space: nowrap은 날짜, 코드, 한 줄 label에 유용하지만 긴 버튼 문구나 navigation 전체에 적용하면 좁은 화면에서 벗어날 수 있습니다. 문구가 반드시 한 줄이어야 하는지 확인하고, 필요하면 control이 늘어나거나 해당 영역만 스크롤되도록 설계하세요.
절대 위치와 고정 위치: position absolute로 문구와 아이콘 위치를 픽셀에 맞추면 글자 크기나 줄 수가 바뀔 때 서로 겹칠 수 있습니다. position fixed인 header와 하단 액션도 확대 후 본문을 가릴 수 있습니다. flow layout, flex·grid의 자연스러운 크기 계산과 충분한 padding을 우선하세요.
제한된 line-height와 overflow: 글자 크기는 커지는데 line-height를 고정된 작은 px로 유지하면 위아래 획이 겹치거나 control 안에서 잘릴 수 있습니다. 단일 행 입력처럼 높이가 제한된 컴포넌트도 실제 확대 상태에서 텍스트가 중앙에 보이는지 확인해야 합니다.
viewport 단위만 사용한 글자 크기: font-size를 2vw처럼 viewport 변화에만 의존하게 하면 브라우저 확대와 breakpoint 변화에서 기대한 200% 증가가 나오지 않을 수 있습니다. clamp()를 쓰더라도 rem 기반 최소·기본값과 확대 결과를 함께 확인하세요.
그렇게 단순하지 않습니다. 현대 브라우저의 full-page zoom은 px로 지정한 글자도 함께 확대할 수 있으므로 px 사용이 곧 WCAG 실패라는 설명은 정확하지 않습니다. 반대로 rem을 사용해도 부모 컨테이너의 height가 고정돼 있거나 overflow를 숨기면 내용은 잘릴 수 있습니다. 최종 판단은 단위 이름이 아니라 확대 후 콘텐츠와 기능이 유지되는지에 달려 있습니다.
다만 rem과 em은 사용자의 기본 글자 크기 설정을 반영하고 글자와 관련된 padding·gap·container가 함께 확장되도록 설계할 때 유용합니다. font-size는 rem, 컴포넌트 내부 간격은 em, 최대 너비는 rem처럼 의도를 나눠 사용할 수 있습니다. 기존 px 값을 바꿀 때는 CSS 단위 변환기를 사용하되, 변환만 하고 끝내지 말고 이 검사기와 실제 브라우저에서 결과를 다시 확인하세요.
이미지 안의 글자는 일반 HTML 텍스트처럼 사용자가 글꼴, 크기, 색상과 간격을 바꾸기 어렵고 확대 시 선명도가 떨어질 수 있습니다. 로고처럼 시각 표현이 본질적인 경우를 제외하면 실제 텍스트와 CSS를 사용하는 편이 좋습니다. 이 도구는 외부 이미지를 불러오지 않고 이미지 안의 문자를 인식하지 않으므로, 시안과 구현 화면에서 이미지로 된 텍스트가 있는지 직접 확인해야 합니다.
페이지 가로 오버플로는 검사 viewport보다 document가 넓어진 상태입니다. 내용 잘림 가능성은 텍스트가 있는 영역에서 scroll 크기가 client box보다 크면서 overflow가 숨겨진 경우입니다. 수평 스크롤 영역 검토는 특정 컴포넌트가 별도 가로 스크롤을 갖는 상태로, 표나 다이어그램이라면 허용 가능한 예외일 수 있습니다.
결과는 원본에도 있던 문제와 이 프리셋에서 새로 생긴 문제를 구분해 보여줍니다. 확대 때문에 생긴 문제인지, 원래부터 좁았던 컨테이너인지를 나눠 보면 수정 우선순위를 정하기 쉽습니다.
자동 후보가 없다고 해서 기준을 통과한 것은 아닙니다. 텍스트끼리 겹쳤는지, 기능을 실행할 수 있는지, 말줄임된 전체 문구가 다른 방법으로 제공되는지와 실제 브라우저 확대는 사람이 확인해야 합니다. preview는 문제를 찾는 지도이지 합격 도장을 찍는 심사관이 아닙니다.
먼저 실제 서비스의 대표적인 짧은 문구와 가장 긴 문구를 각각 준비합니다. 텍스트 200%에서 카드, 버튼, 입력창, 탭과 tooltip의 내용 손실을 확인하고, 리플로 320px에서 페이지 전체 가로 스크롤과 고정 UI 가림을 확인합니다. 텍스트 간격에서는 문단·control·배지의 잘림과 겹침을 봅니다.
감지된 요소의 고정 width·height, overflow와 nowrap 사용 이유를 검토한 다음, 실제 운영 화면에서 브라우저 확대와 키보드 조작을 다시 테스트하세요. 구조 문제가 의심되면 HTML 접근성 검사기로 헤딩·랜드마크·DOM 순서를 확인하고, 실제 색상은 명도대비 검사기에서 별도로 측정합니다.
글자만 두 배가 됐을 뿐인데 콘텐츠 높이가 카드의 두 배에 가까워집니다. 카드 아래쪽의 저장 버튼과 링크가 화면에서 사라진다는 뜻이라 고정 height 를 min-height 로 바꿔야 합니다.
고정 width 560px 하나가 원인입니다. 카드 안의 문단·버튼도 함께 넘치지만 원인이 되는 가장 바깥 요소만 카드로 묶어 수정 위치를 하나로 좁혀 줍니다.
글자 크기는 그대로인데 간격만 넓혀도 카드를 넘칩니다. 확대와 간격은 서로 다른 조건이라 프리셋을 나눠 각각 확인해야 하는 이유입니다.
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
텍스트 확대·간격 검사기는 HTML과 CSS에 웹접근성 확대·리플로·간격 조건을 적용해 원본과 비교하는 브라우저 도구입니다.
200% 글자 확대, 320px 반응형 재배치와 사용자 텍스트 간격 변경을 검수하는 퍼블리셔, 개발자, 디자이너와 QA 담당자를 위한 도구입니다.
안전하게 격리된 preview에 텍스트 200%, 320 CSS px viewport 또는 WCAG 간격값을 적용하고 오버플로·잘림 후보를 측정합니다.
고정 width·height, 줄바꿈 차단과 좁은 control 때문에 확대 시 정보나 기능이 사라지는 문제를 배포 전에 찾기 위해 사용합니다.