흰 배경의 회색 글씨, 4.5 대 1 대비 기준을 반올림하면 안 되는 이유

흰 배경 위의 회색 글씨가 보기에는 비슷해도 접근성 기준 판정은 달라질 수 있습니다. 일반적인 본문 텍스트의 WCAG AA 대비 기준은 4.5:1 이상이며, 낮은 값을 반올림해 통과로 처리하면 안 됩니다. 이 글에서는 2026년 9월 13일 Easynivo에서 두 회색을 직접 비교하고, 블로그의 설명문·가격 안내·버튼 문구를 점검하는 순서를 정리했습니다.

4.48을 4.5로 읽으면 생기는 문제

MDN의 색상 대비 기준 설명은 일반 텍스트에 4.5:1, 큰 텍스트에 3:1 기준을 제시합니다. 이 기준을 실제 계산값에 적용하면, 4.5보다 작은 값은 반올림해 표시하더라도 기준을 넘은 값이 되지 않습니다. 화면에 자릿수가 짧게 표시되더라도 계산값이 경계 아래라면 일반 텍스트 AA 기준을 만족하지 못합니다.

먼저 검사할 대상이 본문인지 큰 제목인지 정하세요. 색상만 보고 ‘사이트 전체 통과’라고 적지 않습니다. 큰 텍스트 여부에는 크기와 굵기의 조건도 영향을 주므로, 작은 설명문이나 각주에 제목의 낮은 기준을 적용하면 안 됩니다. 운영 기준을 단순하게 잡고 싶다면 보통 크기의 읽어야 하는 글은 우선 4.5:1 이상으로 점검하는 편이 관리하기 쉽습니다.

재현 예시: 회색을 한 단계 바꾸어 비교하기

색상 대비·색상값 변환기에서 배경을 #FFFFFF로 두고 전경색만 바꿨습니다. 아래는 가상 디자인의 색상 조합이며, 실제 실행 화면에 표시된 결과입니다.

두 조합은 눈으로 빠르게 보면 차이가 작습니다. 하지만 첫 조합은 기준 아래이고 두 번째는 위입니다. 이때 ‘둘 다 약 4.5니까 같다’고 기록하면 첫 조합을 잘못 통과시킬 수 있습니다. 결과표에는 원래 색상값과 충분한 자릿수, 통과 여부를 함께 남기세요.

두 번째 조합도 경계에 아주 가까운 값입니다. 실제 화면에서는 작은 글씨, 가는 글꼴, 디스플레이 상태로 읽기 어려울 수 있으므로 경계 통과만 목표로 삼지 말고 더 여유 있는 조합도 비교해 보세요. 이 표는 접근성의 한 항목을 비교한 것이며 페이지 전체의 적합성을 인증한 결과는 아닙니다.

어디에서 색상을 가져와야 하나요

배포할 화면의 실제 글자색과 바로 뒤 배경색을 확인합니다. 디자인 시안의 이름이 ‘회색 500’이라고 해도 테마나 컴포넌트에 따라 다른 값이 적용될 수 있습니다. 밝은 화면과 어두운 화면, 기본 상태와 선택 상태를 따로 기록하세요. 링크가 눌린 뒤 색상이 바뀐다면 그 상태도 검사 대상입니다.

이 도구는 불투명한 두 단색의 조합을 검사합니다. 사진 위 자막, 반투명 카드, 그라데이션은 배경 위치에 따라 대비가 달라질 수 있습니다. 그중 한 점의 색상만 입력해 전체 영역이 안전하다고 결론 내리지 마세요. 그런 화면은 배경을 일정하게 만드는 디자인을 검토하거나 실제 합성된 상태에 맞는 별도 검사 과정이 필요합니다.

색만으로 상태를 알려 주고 있지는 않은가요

대비가 충분해도 빨강과 초록만으로 성공·실패를 구분하면 정보가 빠질 수 있습니다. Google web.dev의 색상과 대비 설명은 정보 전달이나 행동 안내를 색 하나에만 의존하지 않도록 안내합니다. 오류에는 ‘필수 항목을 입력해 주세요’라는 문구를 함께 쓰고, 상태표에는 ‘완료’와 ‘대기’처럼 읽을 수 있는 이름을 붙이세요.

링크도 주변 글자와 색만 다른 상태인지 살펴볼 필요가 있습니다. 실제 구현에 맞춰 밑줄 등 추가 표시를 검토하고, 키보드로 이동했을 때 현재 위치가 드러나는지도 별도로 확인합니다. 색상 대비 계산이 이런 동작까지 자동으로 검사하는 것은 아닙니다.

블로그 한 페이지를 점검하는 실무 순서

첫 화면의 본문, 요약문, 날짜, 표의 설명, 관련 도구 버튼을 목록으로 적습니다. 각 항목 옆에 글자색과 배경색을 기록하고 같은 조합은 묶어 검사합니다. 다만 같은 색이라도 배경이 다르면 별도 조합입니다. 예를 들어 흰 카드 위 설명문과 연한 회색 알림 상자의 설명문을 하나로 처리하지 마세요.

수정한 색상은 작은 휴대전화 화면에서도 확인합니다. 문장을 확대했을 때 겹치거나 잘리지 않는지, 긴 표를 읽을 방법이 있는지, 링크와 버튼의 용도가 문구만으로 이해되는지 봅니다. 마지막으로 날짜와 검사한 테마를 기록하면 디자인이 바뀌었을 때 재검사할 범위를 찾기 쉽습니다.

자주 묻는 질문

결과가 4.5로 보이면 무조건 통과인가요?

표시가 반올림된 값일 수 있습니다. 충분한 자릿수와 도구의 기준 판정을 함께 확인하고, 기준 아래 값을 올려 읽지 마세요.

제목에서 통과한 색을 작은 설명문에도 써도 되나요?

제목과 일반 텍스트의 적용 기준이 다를 수 있습니다. 작은 설명문은 그 크기에 맞는 기준으로 다시 확인해야 합니다.

대비가 통과하면 접근성 점검은 끝인가요?

아닙니다. 키보드 이용, 대체 텍스트, 구조, 확대, 오류 안내 등 다른 항목이 남아 있습니다.

회색을 꼭 검정으로 바꿔야 하나요?

반드시 그럴 필요는 없습니다. 배경과의 조합을 계산해 기준을 충족하는 후보를 고른 다음 실제 읽기 편한지 확인하세요.