글자가 잘 안 읽힌다면, 색 대비 기준부터 확인하세요

웹 글자가 잘 안 읽히는 가장 흔한 이유는 글자 색과 배경색의 대비가 부족하기 때문입니다. 연한 회색 글자를 흰 배경에 쓰면 세련되어 보이지만, 시력이 약한 사람이나 햇빛 아래에서 화면을 보는 사람은 읽기 어렵습니다. 웹 콘텐츠 접근성 지침은 본문 글자의 명도 대비를 일정 기준 이상으로 확보하도록 권고합니다.

명도 대비란 무엇인가요?

명도 대비는 글자와 배경의 밝기 차이를 숫자로 나타낸 값입니다. 흰 배경에 검은 글자처럼 밝기 차이가 크면 대비 값이 높고, 회색 배경에 비슷한 회색 글자처럼 차이가 작으면 대비 값이 낮습니다. 색이 달라도 밝기가 비슷하면 대비가 낮아 읽기 어렵습니다. 빨강과 초록이 그런 예입니다.

기준은 얼마인가요?

웹 콘텐츠 접근성 지침은 본문 글자에 대해 4.5 대 1 이상의 명도 대비를, 큰 글자에 대해서는 3 대 1 이상을 권고합니다.

대상	권장 명도 대비
일반 본문 글자	4.5 : 1 이상
큰 글자(제목 등)	3 : 1 이상
아이콘·버튼 경계 같은 그래픽	3 : 1 이상

큰 글자는 획이 굵고 커서 대비가 조금 낮아도 읽기 쉽기 때문에 기준이 더 낮습니다. 반대로 작은 회색 안내 문구는 기준을 넘기지 못하는 경우가 많아 특히 주의해야 합니다.

대비는 어떻게 확인하나요?

두 색의 대비 값을 계산해 주는 무료 도구가 많습니다. 글자 색과 배경색의 값을 넣으면 기준을 통과하는지 바로 알려 줍니다. 디자인 프로그램 가운데에도 이 기능을 갖춘 것이 있습니다. 디자인 단계에서 색을 정할 때 함께 확인하면, 나중에 접근성 문제로 색을 다시 바꾸는 수고를 줄일 수 있습니다.

색만으로 정보를 전하면 왜 안 될까요?

색을 구별하기 어려운 사람이 있기 때문입니다. 입력 오류를 빨간색으로만 표시하면, 빨강을 잘 구별하지 못하는 사용자는 오류가 어디 있는지 모를 수 있습니다. 오류 표시에는 색과 함께 아이콘이나 '필수 항목입니다' 같은 글자를 함께 써야 합니다. 그래프에서도 색뿐 아니라 무늬나 이름표로 항목을 구분하면 누구나 읽기 쉬워집니다.

접근성을 지키면 디자인이 밋밋해지나요?

그렇지 않습니다. 대비 기준은 색의 밝기에 관한 것이라, 원하는 색의 계열은 그대로 두고 밝기만 조정하면 되는 경우가 많습니다. 연한 회색을 조금 더 진하게, 밝은 노랑 배경의 글자를 조금 더 어둡게 바꾸는 정도로 기준을 맞출 수 있습니다. 읽기 쉬운 디자인은 접근성이 필요한 사람뿐 아니라 모든 사용자에게 편안합니다. 접근성 디자인 사례는 에서 볼 수 있습니다.

자주 묻는 질문

다크 모드에서도 같은 기준을 적용하나요?

네. 어두운 배경에 밝은 글자를 쓸 때도 명도 대비 기준은 똑같이 적용됩니다.

로고에도 대비 기준이 있나요?

로고나 브랜드 이름의 글자는 접근성 지침에서 예외로 다루는 경우가 있습니다. 다만 읽기 쉽게 하는 것이 좋습니다.

이미지 위의 글자는 어떻게 하나요?

이미지 밝기가 일정하지 않으면 대비가 들쑥날쑥해집니다. 글자 뒤에 반투명한 배경을 깔면 대비를 확보하기 쉽습니다.