미니멀한 다크 그레이 로고를 완벽하게 디자인했는데, Chrome의 다크 모드 탭 바에서 완전히 사라져 버린 것을 본 적이 있다면 그 고통을 아실 겁니다. 브라우저는 여러분의 브랜드 가이드라인에 신경 쓰지 않습니다. 그들은 자신의 UI를 렌더링하는 데만 관심이 있습니다. 아이콘이 배경에 묻혀버리면 사용자는 열려 있는 40개의 다른 탭 사이에서 여러분의 사이트를 잃어버리게 됩니다.

우리는 보통 텍스트에 대해서만 대비율을 엄격하게 생각합니다. 하지만 파비콘은 중요한 UI 길잡이 요소입니다. 예측할 수 없는 브라우저 테마 환경에서도 가독성을 유지하려면 엄격한 파비콘 대비율 가이드가 필요합니다. 보이지 않는 아이콘을 수정해 봅시다.

아이콘 테스트를 위한 준비 사항

시작하는 데 많은 것이 필요하지 않습니다. 현재 파비콘 파일(가급적 벡터 버전)을 준비하고 다른 탭에 표준 WCAG 대비율 검사기를 열어두기만 하면 됩니다. 일반적인 브라우저 UI 배경에 대해 최소 3:1의 대비율을 목표로 합니다.

1단계: 브라우저 탭 배경색 파악하기

대비율을 계산하기 전에 무엇과 대비되는지 알아야 합니다. 브라우저 탭 배경은 순수한 흰색이나 검은색이 아닙니다.

파비콘이 순수한 검은색(#000000)인 경우 Chrome 라이트 모드에서는 매우 선명해 보입니다. 하지만 Chrome 다크 모드에서는 대비율이 1.1:1로 끔찍하게 떨어지며 완전히 보이지 않게 됩니다.

2단계: 대비율 계산 및 조정하기

아이콘의 기본 색상 HEX 코드를 가져와 대비율 검사기에서 #202124와 비교해 보세요. 점수가 3.0 미만이면 가독성에 문제가 있는 것입니다.

GitHub는 이 문제를 매우 훌륭하게 처리합니다. 기본 Octocat 로고는 검은색입니다. 다크 모드에서는 로고 전체를 순수한 흰색으로 반전시키는 대신(이렇게 하면 너무 튀고 세부 묘사가 뭉개질 수 있음) 흰색 실루엣으로 전환합니다. 이를 통해 어떤 어두운 탭에서도 4.5:1을 훌쩍 넘는 대비율을 보장합니다.

색상이 변하는 동적 SVG를 사용할 것인지, 아니면 보호용 배경이 있는 단일 정적 이미지를 사용할 것인지 전략을 결정해야 합니다.

3단계: 동적 SVG 수정 적용하기

가장 우아한 해결책은 CSS가 포함된 SVG 파비콘을 사용하는 것입니다. 이렇게 하면 아이콘이 사용자의 시스템 설정에 실시간으로 반응할 수 있습니다. 이는 전반적인 파비콘 접근성의 핵심 요소입니다.

SVG 파일 내에 포함해야 할 정확한 코드 구조는 다음과 같습니다.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    .icon { fill: #1A1A1A; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #F8F9FA; }
    }
  </style>
  <path class='icon' d='M50 10 L90 90 L10 90 Z' />
</svg>

이것을 favicon.svg로 저장하고 HTML에 링크하세요. 브라우저가 다크 모드로 전환되면 SVG가 즉시 다크 그레이에서 오프화이트로 반전되어 완벽한 대비율을 유지합니다.

4단계: 범용 대체 전략

모든 브라우저가 SVG 파비콘을 지원하는 것은 아닙니다(구형 Safari 등). 여전히 대체용 PNG 또는 ICO 파일이 필요합니다. PNG는 CSS 미디어 쿼리를 사용할 수 없으므로 밝은 배경과 어두운 배경 모두에서 대비 테스트를 통과하는 단일 디자인이 필요합니다.

제가 가장 좋아하는 기술은 '보호용 테두리(stroke)'입니다. 어두운 아이콘 주위에 1px 또는 2px의 반투명한 흰색 테두리(예: rgba(255, 255, 255, 0.8))를 추가합니다. 밝은 탭에서는 테두리가 보이지 않습니다. 어두운 탭에서는 테두리가 후광처럼 작용하여 3:1 대비 요구 사항을 충족하는 선명한 경계를 만듭니다.

또는 투명한 로고를 단색의 둥근 사각형 배경(알약 모양 등) 안에 배치할 수도 있습니다. 해당 배경색이 #F1F3F4 및 #202124 모두와 좋은 대비를 이루는지 확인하세요. 사이트의 헤더와 색상을 완벽하게 맞추고 싶다면 파비콘 색상 구성표 일치 가이드를 읽어보세요.

피해야 할 일반적인 함정

동적 아이콘에 순수한 검은색(#000000)이나 순수한 흰색(#FFFFFF)은 절대 사용하지 마세요. 순색은 최신 OLED 화면에서 눈의 피로를 유발하며 브라우저가 활성 탭에 사용하는 미묘한 그라데이션과 충돌하는 경우가 많습니다. 오프블랙과 오프화이트를 사용하세요.

또한 얇고 복잡한 선에 의존하지 마세요. 1px 선은 수학적인 대비율 테스트는 통과할 수 있지만, 브라우저 탭에서 16x16 픽셀로 축소되면 안티앨리어싱으로 인해 흐릿한 덩어리가 되어버립니다.

고대비 SVG와 대체용 PNG가 준비되면 Mzu favicondl을 통해 서버에 필요한 정확한 크기와 ICO 형식을 생성하세요. 눈에 띄는 탭이 클릭을 유도합니다. 잘못된 대비율로 인해 여러분의 노력이 가려지지 않게 하세요.