이용자가 운영체제나 브라우저에서 어두운 화면 모드를 고르면 웹 페이지의 기본 배경색과 입력칸 색이 바뀔 수 있습니다. 학원 홈페이지의 모집 안내와 상담 신청서가 그 화면에서도 읽히는지 color-scheme 선언과 색 지정 범위를 점검하는 순서를 정리했습니다.
이용자가 운영체제나 브라우저에서 어두운 화면 모드를 고르면 웹 페이지의 기본 배경색과 입력칸 색이 바뀔 수 있습니다. 학원 홈페이지를 밝은 화면에서만 확인하고 공개했다면, 같은 모집 안내가 어두운 화면 모드를 쓰는 학부모의 휴대폰에서는 글자와 배경이 비슷한 색으로 겹쳐 보일 수도 있습니다. 청주·충북 지역 학원도 저녁 시간에 휴대폰으로 모집 일정과 상담 신청 방법을 찾는 학부모를 생각하면, 공개 전에 두 화면 모드를 모두 열어 보는 편이 안전합니다.
어두운 화면 모드에서 바뀌는 것과 그대로인 것
MDN의 prefers-color-scheme 문서는 이 CSS 미디어 조건이 이용자가 밝은 테마와 어두운 테마 중 무엇을 원하는지 알아내는 데 쓰인다고 설명합니다. 이용자는 운영체제의 밝은 모드·어두운 모드 설정이나 브라우저 설정으로 이 선호를 알립니다. 이용자가 따로 선호를 밝히지 않은 경우에는 밝은 쪽 값으로 봅니다.
MDN의 color-scheme 속성 문서는 이 속성을 요소가 어떤 색 구성으로 무리 없이 표시될 수 있는지 알리는 장치로 설명합니다. 페이지가 어두운 색 구성을 지원한다고 알리면 브라우저는 캔버스 바탕색, 스크롤 막대, 입력칸·선택 상자 같은 양식 요소의 기본색, 맞춤법 밑줄처럼 브라우저가 그리는 부분을 그 구성에 맞춥니다. 그 밖의 요소는 제작자가 prefers-color-scheme 조건으로 직접 색을 정해야 한다는 것이 같은 문서의 설명입니다.
이 설명을 학원 홈페이지에 대어 보면 점검할 곳이 보입니다. 페이지 전체가 어두운 구성을 지원한다고 선언해 두고 본문 글자색은 짙은 회색으로 고정해 두었다면, 어두운 화면 모드에서는 바탕만 어두워지고 글자는 그대로 짙어 모집 안내가 읽기 어려워질 수 있습니다. 상담 신청서의 입력칸 기본색이 바뀌었는데 페이지가 입력 글자색만 따로 정해 두었다면 입력한 내용이 잘 보이지 않을 수도 있습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
선언하지 않아도 브라우저가 색을 바꿀 수 있습니다
W3C의 CSS 색 조정 모듈 레벨 1은 이용자가 특정 색 구성을 우선하도록 설정했고 제작자가 only 키워드로 막지 않았다면, 브라우저가 페이지의 색 구성을 이용자가 고른 쪽으로 바꿀 수 있다고 정합니다. 이때 요소가 그 색 구성을 지원하지 않으면 브라우저는 읽기에 필요한 대비를 지키면서 다른 색도 밝기를 뒤집는 식으로 자동 조정해야 하고, 배경 이미지나 외부 자원 안의 색까지 조정할 수 있다고 적혀 있습니다. 구체적인 조정 방식은 브라우저마다 정하므로 서로 다를 수 있다는 주석도 있습니다.
MDN은 only 키워드를 쓰면 브라우저가 해당 요소의 색 구성을 바꾸지 못하게 할 수 있으며, :root에 color-scheme: only light를 지정해 Chrome의 자동 어두운 테마가 색을 바꾸는 것을 끌 수 있다고 안내합니다. 주황색 모집 배너나 색으로 구분한 시간표처럼 학원이 정해 둔 색이 중요한 화면이라면, 어두운 화면 모드에서 브라우저가 그 색을 어떻게 바꾸는지 실제 기기에서 확인해 두는 것이 좋습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
학원 홈페이지에서 점검하는 순서
에듀지오의 운영 권장은 먼저 학원 홈페이지가 어떤 방식을 택할지 정하고, 그 방식이 모든 주요 페이지에 같게 적용됐는지 확인하는 것입니다.
- 휴대폰과 컴퓨터의 화면 모드를 어둡게 바꾼 뒤 첫 화면, 모집 안내, 시간표, 상담 신청서를 차례로 엽니다. 같은 페이지를 밝은 화면 모드에서도 다시 열어 비교합니다.
- 제작 담당자에게 사이트가
color-scheme을 어떻게 선언했는지 묻습니다. 어두운 화면 모드용 색을 따로 준비했는지, 밝은 화면만 지원하도록 정했는지에 따라 다음 점검이 달라집니다. - 두 화면 모드를 모두 지원한다면
prefers-color-scheme조건 안에서 본문 글자, 바탕, 테두리, 버튼, 표의 줄 색이 빠짐없이 함께 바뀌는지 확인합니다. 일부 색만 바꾸면 위에서 본 것처럼 글자와 바탕이 겹칠 수 있습니다. - 상담 신청서는 입력칸 안의 글자, 입력 예시, 오류 안내 문구가 어두운 화면 모드에서도 구별되는지 직접 입력해 보며 확인합니다.
- MDN은
color-scheme이름의 meta 요소를 문서 머리 부분의 CSS보다 앞에 넣으면 페이지를 불러올 때 화면이 번쩍이는 것을 줄일 수 있다고 안내합니다. 어두운 화면 모드에서 페이지가 잠깐 하얗게 보였다가 바뀐다면 이 위치를 제작 담당자와 확인합니다. - 모집 일정이나 수업료처럼 꼭 읽혀야 하는 정보를 글자가 들어간 이미지로만 올렸다면, 브라우저가 이미지 색을 조정할 수 있다는 점을 생각해 같은 내용을 본문 글자로도 적어 둡니다.
이 글은 청주·충북 지역 학원을 포함한 일반적인 홈페이지의 화면 모드 점검 방법을 W3C·MDN 문서에 따라 정리한 것이며 특정 학원 홈페이지를 진단한 결과가 아닙니다. 브라우저별 자동 색 조정 방식과 지원 여부는 각 브라우저의 안내를 따로 확인해야 합니다.