콘텐츠 간의 구분

무엇을 요구하나요?

이웃한 콘텐츠(영역, 목록 항목, 카드, 입력 칸 등)는 서로 구별될 수 있도록 제공해야 합니다. 테두리, 구분선, 무늬, 배경색의 명도 대비, 여백 등으로 어디까지가 한 덩어리인지 눈으로 알 수 있어야 합니다. 저시력 사용자나 인지 장애가 있는 사용자는 경계가 흐린 화면에서 내용을 잘못 묶어 이해하기 쉽습니다.

자주 틀리는 예

1. 배경과 거의 같은 색의 카드

body { background: #ffffff; }
.card { background: #fcfcfc; }

body { background: #ffffff; }
.card { background: #f2f4f6; border: 1px solid #c4cad1; border-radius: 12px; }

2. 테두리가 너무 연한 입력 칸

input { border: 1px solid #eeeeee; }

input { border: 1px solid #6b7684; }

입력 칸·버튼처럼 눌러야 하는 요소의 경계는 특히 분명해야 합니다. 국제 표준 WCAG 2.2는 이런 경계에 주변 색과 3:1 이상의 대비를 권장합니다(비텍스트 대비).

3. 목록 항목 사이에 구분이 없음

뉴스 목록·댓글처럼 비슷한 항목이 이어지면 구분선이나 간격을 주어 한 항목의 시작과 끝을 알 수 있게 하세요.

확인하는 방법

1. 화면을 조금 떨어져서 보거나 흐리게 보이도록(눈을 가늘게) 했을 때 영역이 구별되는지 확인하세요.
2. 브라우저 확대 200%, 고대비 모드에서도 경계가 보이는지 확인하세요.
3. 경계선 색은 색상 대비 검사기에 테두리 색과 바깥 배경색을 넣어 확인할 수 있습니다.