핵심 비유
'밝은 교실 창가 자리' 비유 — 똑같은 화면도 어두운 방에선 잘 보이다가, 햇빛 쏟아지는 창가 자리에선 흐린 글씨가 안 보인다. 디자인은 '내 책상'이 아니라 '가장 불리한 자리에 앉은 사람'을 기준으로 해야 한다. 대비 = 글씨와 배경의 밝기 차이이고, 그 차이가 충분해야 누구나·어디서나 읽을 수 있다. 이건 미관이 아니라 '모두가 쓸 수 있는가(접근성)' 의 문제다.
핵심 포인트
- 대비율(contrast ratio) = 글씨와 배경의 밝기 차이를 숫자로 잰 것. 텍스트 4.5:1 이상, 큰 글씨·UI는 3:1 이상이 기준(WCAG).
- 옅은 회색 글씨(예 stone-300 ≈ 2:1)는 예뻐 보여도 안 읽힌다 — stone-900은 17:1, stone-600은 7.6:1.
- 접근성 = 누구나 쓸 수 있는 디자인 — 시력이 약해도, 손이 불편해도, 색맹이어도 쓸 수 있어야 한다.
- 색만으로 정보를 전달하지 않는다 — 아이콘 + 텍스트 병행(색맹 대비), 터치 영역 48px+, 이미지엔 대체텍스트(alt).
- 접근성은 '특별한 배려'가 아니라 기본 품질 — 밝은 곳에서 폰 보는 모든 사람에게 이득.
교사 팁
교실 조명을 환하게 켜고 화면을 보며 "이 글씨 잘 보여?"를 테스트하거나, 눈을 반쯤 감고 화면을 보게 하면 대비·접근성의 필요가 즉각 체감된다(design-sense contrast·accessibility classGuide). 대비율 체커에 좋은/나쁜 색 조합을 넣어 숫자(4.5:1 통과/실패)로 확인하면 '감'이 '기준'으로 바뀐다. design-sense 퀴즈 탭으로 O/X 점검하고, 분석 탭으로 실제 앱의 흐린 텍스트를 찾아본다.
좋은 예 vs 나쁜 예
- ✅ stone-900 텍스트 + white 배경(17:1): 선명, WCAG AAA 충족, 밝은 곳에서도 OK. (design-sense
contrast)
- ❌ stone-300 텍스트 + white(2:1): 흐려서 안 보임, 접근성 미달, 눈 피로.
- ✅ 대비 4.5:1 + 48px 터치 + 아이콘＋라벨. ❌ 옅은 회색 + 작은 버튼 + 아이콘만. (design-sense
accessibility)
실습·평가
- 실습: WebAIM 대비 체커에 '흐린 회색 글씨' 조합을 넣어 몇 :1인지 측정 → 4.5:1을 넘기도록 색을 진하게 조정. 색맹 시뮬레이터로 본인 팔레트 점검.
- O/X 퀴즈: "글씨 색은 예쁘면 됐지 배경과의 대비는 안 따져도 된다." → X (텍스트 4.5:1 이상 필수)