PLATON

연한 회색 안내가 읽기 어렵다면, 글자와 배경의 대비를 측정합니다

노트북과 기획 자료를 검토하는 실제 플라톤마케팅 회의

홈페이지 본문은 잘 보이는데 입력 안내나 버튼 옆 설명은 지나치게 연할 수 있습니다. 디자인 시안에서 보조 문구라는 이유로 밝게 처리한 색이 실제 화면에서는 읽기 어려운 조합이 된 것입니다. 글자 대비 검수는 담당자의 눈에 잘 보이는지 묻는 데서 끝내지 않고 실제 글자색과 배경색을 측정하고 상태별로 대조해야 합니다. 내용의 중요도를 낮게 판단했다고 해서 방문자가 읽어야 할 설명을 검수 대상에서 빼지 않습니다.

어떤 글자에 어떤 기준을 적용할지 구분합니다

W3C의 최소 대비 기준은 일반 텍스트와 텍스트 이미지에 적어도 4.5:1, 큰 텍스트에는 적어도 3:1을 설명합니다. 비활성 요소나 순수 장식, 로고 등에는 별도 예외가 있습니다. 텍스트 최소 대비 기준 설명 제목이라는 역할만으로 큰 텍스트로 분류하지 말고 해당 정의에 맞는 실제 크기와 굵기를 확인합니다.

운영 검수표에서는 본문, 보조 안내, 버튼 안 문구처럼 읽어야 할 대상을 먼저 모읍니다. 회색이라는 이유로 비활성 요소라고 판단하지 않습니다. 클릭할 수 있거나 작성에 필요한 설명이라면 실제 역할을 확인해야 합니다. 기준 적용 대상과 예외 판단의 근거를 함께 남깁니다.

브랜드 색이라는 설명도 일반 문구의 대비 검사를 대신하지 않습니다. 로고의 예외를 홈페이지의 모든 브랜드 색 텍스트로 넓히지 않습니다. 디자인 담당자와 색상 사용 위치를 구분하고 본문과 조작에 필요한 문구에서 적용 가능한 조합을 찾습니다.

노트북을 앞에 두고 자료를 설명하는 플라톤마케팅 구성원들
홈페이지 글자 대비를 검토하는 업무의 참고 사진입니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

화면 캡처의 가장자리 색만으로 판정하지 않습니다

개발 담당자와 실제 적용된 글자색과 배경색을 확인합니다. W3C는 글꼴 가장자리를 부드럽게 표현하는 처리 때문에 화면의 픽셀만 보기보다 브라우저나 스타일에서 전경색과 배경색을 확인하도록 설명합니다. 또한 계산값을 반올림해 기준을 충족한 것으로 보지 않도록 안내합니다.

도구가 보여 준 숫자를 보고서에 옮길 때에는 어떤 요소와 배경을 측정했는지 남깁니다. 페이지 전체에 대한 숫자처럼 쓰지 않고 측정한 색상 조합의 결과로 적습니다. 같은 글자색이라도 카드와 본문 영역의 배경이 다르면 결과를 별도로 확인해야 합니다.

가정으로 본문·입력 안내·버튼이라는 3개 대상을 밝은 배경과 어두운 배경이라는 2개 조건에서 확인하면 6개 비교 항목을 만들 수 있습니다. 이는 검수 범위 예시입니다. 실제로 제공하지 않는 화면 모드를 검사했다고 적지 말고 사용 중인 조합을 기준으로 항목을 정합니다.

대상 / 본문·안내·버튼 문구 구분 · 측정 / 실제 글자색과 배경색 대조 · 상태 / 선택·초점·오류 상태 확인 · 수정 / 색상 변경 후 전체 조합 재검수
플라톤마케팅 검수 제안 · W3C Contrast Minimum 참고 · 2026-10-26

선택이나 오류 상태에서 바뀌는 색도 확인합니다

평상시에는 선명한 버튼도 마우스를 올리거나 키보드 초점이 왔을 때 배경이 바뀌면 글자가 흐려질 수 있습니다. 선택된 메뉴, 입력 오류 안내, 입력칸 안 예시 문구 등 실제로 나타나는 상태를 목록에 넣습니다. 기본 화면의 색상표만 확인한 결과를 모든 상태에 적용하지 않습니다.

검수할 때는 같은 요소를 한 상태씩 바꾸며 결과를 기록합니다. 초점이 왔을 때 배경과 글자 중 어느 쪽이 바뀌었는지 확인하고, 수정 후에도 현재 선택 위치를 알아볼 수 있는지 별도로 봅니다. 텍스트의 대비와 버튼 테두리나 초점 표시의 검수는 범위가 다르므로 한 숫자로 모두 판정하지 않습니다.

디자인 공통 색상을 바꾸는 경우에는 다른 페이지의 조합도 살펴봅니다. 연한 배경 위에서는 개선됐지만 어두운 배경 위에서는 더 흐려질 수 있습니다. 공통 이름을 가진 색이라도 실제 사용 위치가 다양하다면 영향을 받는 구성 요소를 찾아 재검수 범위를 정합니다.

회의 테이블에서 각자 노트북 자료를 검토하는 플라톤마케팅 구성원들
배경과 표시 상태별 읽기 조건을 확인합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

사진 위 글자는 배경이 달라지는 조건을 포함합니다

사진 위에 얹힌 제목은 사진의 밝은 부분과 어두운 부분에서 다르게 보일 수 있습니다. 대표 위치 하나만 재지 말고 문자가 놓이는 영역과 모바일에서 잘리는 사진 구도를 함께 확인합니다. 배경 이미지가 교체되는 배너라면 각 장면에서 제목이 읽히는지 봅니다.

필요하면 문구 뒤에 일정한 배경을 두거나 사진 배치와 글자 위치를 조정하는 방법을 검토합니다. 어떤 방법을 선택하든 실제 화면에서 배경과 글자의 조합을 다시 확인합니다. 어두운 덮개를 추가했다는 작업 사실만으로 측정 결과가 충분하다고 단정하지 않습니다.

이미지 파일에 들어 있는 안내 문구도 별도로 분류합니다. 사진에 우연히 찍힌 글자와 읽도록 제작한 텍스트 이미지를 같은 종류로 보지 않습니다. 수정 가능한 원본과 게시된 이미지가 다를 수 있으므로 최종 제공되는 자료를 확인하고, 이미지 교체 뒤 기존 캐시가 남는지도 점검 범위에 맞게 기록합니다.

완료 보고에는 대상 요소, 상태, 글자색과 배경 조건, 측정값 및 수정 결과를 남깁니다. 대비 수치가 기준에 맞더라도 얇은 글꼴이나 복잡한 배치 때문에 읽기 어려운 부분은 따로 검토합니다. 이 점검은 사이트 전체의 접근성 인증을 대신하지 않으며 실제로 확인한 텍스트 조합의 개선 근거를 남기는 작업입니다.

출처 확인일: 2026-10-26. 비교 대상과 수량은 설명용 가정이며 실제 홈페이지의 측정 결과가 아닙니다.

긴 테이블에 마주 앉아 논의하는 플라톤마케팅 구성원들
색상 수정 후 관련 화면을 대조합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

이 글과 이어지는 주제

이 글에 공감하셨다면, 상담 전에 다른 글도 한 번 보십시오. 저희와 맞는지 먼저 확인하시는 편이 서로에게 낫습니다.

카톡으로 물어보기
카카오톡 상담지금 바로 답변드립니다