●STEP 01

기준은 4.5 대 1과 3 대 1입니다

WCAG 2.1의 성공 기준 1.4.3은 글자와 배경의 명암비를 정해 두고 있습니다.

• 일반 크기 글자: 최소 4.5 대 1

• 큰 글자: 최소 3 대 1. 큰 글자는 18포인트 이상, 또는 굵은 14포인트 이상으로 정의됩니다. 한글과 같은 CJK 글꼴도 같은 기준이 적용됩니다.

• 아이콘, 입력창 테두리 같은 화면 요소: 인접한 색과 최소 3 대 1(성공 기준 1.4.11)

더 엄격한 강화 기준은 일반 글자 7 대 1, 큰 글자 4.5 대 1입니다. W3C는 이 비율이 저시력이나 색각 이상, 나이에 따라 대비를 느끼는 감도가 떨어진 사용자를 위해 정해졌다고 설명합니다. 즉 이 숫자는 일부 사람만을 위한 것이 아니라, 햇빛 아래나 낡은 화면에서 보는 모든 사람에게 도움이 됩니다.

기준값은 반올림하지 않고 그대로 비교합니다. 4.499 대 1은 4.5 대 1 기준을 충족하지 못합니다.

대비 기준이 어렵게 느껴진다면 이렇게 생각하세요. 연한 회색 글씨는 눈이 좋은 사람이 밝은 모니터로 볼 때만 읽히는 글씨입니다. 고객의 휴대폰은 밝기가 낮을 수도, 화면에 보호필름이 붙어 있을 수도, 햇빛이 비칠 수도 있습니다. 그런 상황에서도 읽히도록 여유 있게 진하게 만드는 것이 기준을 지키는 가장 쉬운 방법입니다.

●STEP 02

우리가 자주 쓰는 색으로 계산해 보면

기준 숫자는 와닿지 않으니 흰 배경 위의 색으로 직접 계산해 보았습니다. 아래 수치는 WCAG의 명암비 계산식으로 구한 값입니다.

• 짙은 회색 #333333: 약 12.6 대 1. 본문에 넉넉합니다.

• 중간 회색 #6B6B6B: 약 5.3 대 1. 본문과 안내 문구에 쓸 수 있습니다.

• 회색 #767676: 약 4.5 대 1. 흰 배경에서 본문으로 쓸 수 있는 거의 가장 연한 회색입니다.

• 연한 회색 #999999: 약 2.9 대 1. 일반 크기 글자로는 기준에 못 미칩니다.

• 선명한 주황 #F4542F: 약 3.4 대 1. 작은 글자로는 부족하지만 큰 제목이나 아이콘, 강조 선으로는 쓸 수 있습니다.

• 주황 #F4542F 위의 흰 글씨도 약 3.4 대 1입니다. 큰 글씨로만 쓰고, 작은 글씨는 검정 글씨나 어두운 배경 위의 주황 글씨가 안전합니다.

선명한 포인트 컬러는 브랜드의 얼굴이 되지만, 작은 글자에 쓰면 읽기 어렵습니다. 포인트 컬러는 면이나 선, 큰 글자에 쓰고, 작은 글자는 진한 색으로 두는 방식이 좋습니다.

●STEP 03

홈페이지에서 자주 놓치는 곳

• 날짜, 출처, 안내 문구: 작은 글씨일수록 연한 회색으로 만들기 쉽습니다. 작을수록 더 진해야 합니다.

• 사진 위 글자: 사진은 밝고 어두운 부분이 섞여 있어서 글자 일부만 안 읽힐 수 있습니다. 사진 위에 어두운 막을 한 겹 덮거나 글자 영역만 단색으로 두면 안정적입니다.

• 버튼: 버튼의 글자와 배경은 일반 글자 기준으로, 버튼 테두리는 3 대 1을 고려합니다. 밝은 배경에 연한 테두리만 둔 버튼은 눈에 잘 안 띕니다.

• 입력창 안내 문구: 입력창에 연하게 적힌 안내 글자(플레이스홀더)도 읽혀야 합니다.

• 색만으로 구분하는 표시: 품절을 빨간색으로만 표시하는 식이라면 색을 구분하기 어려운 사람은 알 수 없습니다. 글자나 아이콘을 함께 쓰세요.

●STEP 04

눈으로 확인하는 방법

• 완성된 화면을 휴대폰 밝기를 낮춘 상태로, 바깥에서 한 번 보세요. 안 읽히는 부분이 바로 드러납니다.

• 흑백으로 화면을 캡처해 보면, 색 차이로만 구분되던 부분이 사라지는지 알 수 있습니다.

• 색 대비 계산기(명암비 검사기)에 글자색과 배경색 두 개의 코드를 넣으면 4.5 대 1을 넘는지 바로 알려 줍니다.

한국형 웹 콘텐츠 접근성 지침도 WCAG를 바탕으로 한다고 알려져 있으나, 이 글에서는 W3C 원문에서 확인한 기준만 적었습니다. 공공기관 사이트처럼 접근성 기준을 법적으로 지켜야 하는 곳은 해당 지침을 별도로 확인해 주세요.

디자인 시안을 검토하실 때 글자가 연해서 읽기 힘들다고 느껴지면 바로 말씀해 주세요. 디자이너는 화면을 가까이 보면서 작업해서 연한 색도 잘 보입니다. 대표님이 처음 보시고 불편하다고 느낀 점이 고객이 느낄 불편함과 가장 가깝습니다.

출처

W3C, 「Understanding Success Criterion 1.4.3: Contrast (Minimum)」 원문 보기 →

W3C, 「Web Content Accessibility Guidelines (WCAG) 2.1」 원문 보기 →

●STEP 05 · 정리

WCAG 2.1은 일반 글자에 4.5 대 1, 큰 글자에 3 대 1의 명암비를 요구합니다. 흰 배경에서 #767676 정도가 본문으로 쓸 수 있는 가장 연한 회색이고, #999999 같은 연한 회색은 기준에 못 미칩니다. 포인트 컬러는 큰 글자와 면, 선에 쓰고 작은 글자는 진한 색으로 두면 안전합니다.

읽기 편한 색 조합까지 설계하고 싶으시다면

오요는 브랜드 색을 지키면서도 본문과 버튼이 충분히 읽히도록 색의 쓰임을 정해 드립니다. 이미 만들어 둔 사이트가 읽기 힘들게 느껴진다면 어느 부분을 고치면 좋을지부터 같이 살펴볼게요.

상담 문의하기서비스 보기