CSS 색상 조정 모듈 레벨 1

1. 소개

이 명세서는 사용자 에이전트가 색상을 자동으로 조정하는 방법/시기를 제어하기 위한 세 가지 새로운 기능을 소개합니다:

• 색상 테마와 color-scheme 속성은 브라우저가 제공하는 페이지 UI의 일부가 사용자가 선택한 색상 테마를 존중할지 여부를 제어합니다.

• 강제 색상 모드와 forced-color-adjust 속성은 특정 요소에 강제 색상 모드를 적용할 수 있을지 제어합니다.

• print-color-adjust 속성은 브라우저가 사용자의 성능 선호에 따라 색상을 자동으로 조정할 수 있을지 제어합니다. 예를 들어 인쇄 시 배경색을 생략하여 잉크를 절약하는 등의 동작을 포함합니다.

prefers-color-scheme, prefers-contrast, forced-colors 미디어쿼리 [MEDIAQUERIES-5]와 함께, 이 모듈은 작성자와 사용자 간의 색상 테마 협상을 가능하게 합니다.

1.1. 값 정의

이 명세서는 CSS 속성 정의 규약을 [CSS2]에서 따르고, 값 정의 문법은 [CSS-VALUES-3]를 사용합니다. 이 명세서에서 정의되지 않은 값 타입은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합에 따라 이러한 값 타입의 정의가 확장될 수 있습니다.

특정 속성의 정의에 명시된 값 이외에도, 이 명세서에서 정의된 모든 속성은 CSS 전역 키워드도 속성 값으로 사용할 수 있습니다. 가독성을 위해 별도로 반복하지 않았습니다.

2. 선호 색상 테마

운영체제와 사용자 에이전트는 종종 사용자에게 사용자 인터페이스 요소의 선호 색상 테마를 선택할 수 있는 기능을 제공합니다. 이 색상 테마는 일반적으로 사용자 에이전트의 탐색 인터페이스와 폼 컨트롤, 스크롤바 등 페이지 내 인터페이스 요소의 렌더링에 반영됩니다.

UA는 또한 사용자가 자신이 보는 페이지의 색상 테마에 대한 선호를 표시할 수 있도록 허용할 수 있으며, 작성자가 해당 색상 선호에 페이지를 맞추도록 요청합니다. (이러한 선호를 반드시 표현해야 하는 것은 아니며, 사용자는 운영체제 인터페이스 색상에 대한 선호가 있더라도 이를 페이지에 강제 적용하길 원하지 않을 수 있습니다.)

가장 일반적인 색상 테마 선호는 다음과 같습니다:

• 라이트 색상 테마 ("주간 모드") 는 밝은 배경색과 어두운 전경/텍스트 색상으로 구성됩니다.

• 다크 색상 테마 ("야간 모드") 는 그 반대로, 어두운 배경색과 밝은 전경/텍스트 색상으로 구성됩니다.

라이트 및 다크 색상 테마는 특정 색상 팔레트(예: 흑백)를 의미하는 것이 아니라 다양한 팔레트 범위를 나타냅니다. 특정 색상을 보장하려면 작성자가 직접 색상을 지정해야 합니다. 또한, 기본 또는 <system-color> 색상과 작성자 지정 색상을 조합한다고 해서 특정 대비 수준을 보장할 수 없습니다. 가독성을 확보하려면 전경색과 배경색을 함께 설정해야 할 수 있습니다. [WCAG21].

페이지가 사용자의 선호 색상 테마에 적응할 수 있도록, 사용자 에이전트는 prefers-color-scheme 미디어쿼리와 사용자의 선호 색상 테마를 일치시킵니다. [MEDIAQUERIES-5] 이를 보완하기 위해, 여기서 정의된 color-scheme 속성은 작성자가 UA가 제공하는 UI 및 페이지 내 색상에 대해 적절한 색상 테마를 지정할 수 있도록 합니다.

사용자 에이전트는 추가적인 색상 테마를 지원할 수도 있지만, CSS는 추가적인 색상 테마 협상을 지원하지 않습니다: 사용자 에이전트는 이러한 테마의 표준화를 추진해야 하며, prefers-color-scheme 및 color-scheme이 추가 값을 반영할 수 있도록 해야 합니다.

2.1. 선호 색상 테마 적용: color-scheme 속성

prefers-color-scheme 미디어 특성은 작성자가 페이지의 색상을 사용자의 선호 색상 테마에 맞게 조정할 수 있도록 해주지만, 페이지의 많은 부분(폼 컨트롤, 스크롤바 등)은 작성자의 제어 범위 밖에 있습니다. color-scheme 속성은 요소가 어떤 색상 테마로 렌더링되는 것이 의도된지 표시할 수 있게 해줍니다. 이 값들은 사용자의 선호와 협상되어, 폼 컨트롤과 스크롤바의 기본 색상 등에도 영향을 미치는 사용된 색상 테마를 결정합니다. (§ 2.2 사용된 색상 테마의 효과 참고)

참고: 많은 페이지가 색상 테마 지원 이전에 작성되었기 때문에, 사용자 에이전트가 제어하는 요소에서 자동으로 색상을 조정하면 페이지 전체와의 대비가 읽기 어렵게 될 수 있으므로, 자동 적용할 수 없습니다.

호스트 언어는 페이지가 지원하는 색상 테마를 정의할 수 있으며, 이는 해당 페이지의 모든 요소에서 기본적으로 지원되는 색상 테마 목록입니다.

참고: [HTML]에서는 color-scheme meta 태그를 이용해 페이지가 지원하는 색상 테마를 설정할 수 있습니다.

값은 다음과 같이 정의됩니다:

normal

요소가 페이지가 지원하는 색상 테마를 지원함을 나타냅니다. 설정되어 있지 않으면 어떤 색상 테마도 지원하지 않음을 의미합니다.

light

요소가 라이트 색상 테마를 지원함을 나타냅니다.

dark

요소가 다크 색상 테마를 지원함을 나타냅니다.

only

해당 요소에 대해 사용자 에이전트가 색상 테마를 재정의하는 것을 금지합니다.

<custom-ident>

<custom-ident> 값은 의미가 없으며, 향후 호환성을 위해 존재합니다. 앞으로 추가될 색상 테마가 기존 color-scheme 선언을 무효화하지 않도록 하기 위함입니다. 사용자 에이전트는 <custom-ident> 값에 의미를 부여해서는 안 되며, 추가로 인식되는 색상 테마는 반드시 이 속성의 문법에 명시적으로 추가되어야 합니다.

참고: 혼란을 방지하기 위해, 튜토리얼 및 참고 문서에서는 <custom-ident>를 제외해야 합니다.

normal, light, dark, only 키워드는 이 속성에서 <custom-ident> 유효값이 아닙니다.

참고: 라이트와 다크 색상 테마는 특정 색상 팔레트가 아닙니다. 예를 들어, 강한 흑백 테마와 세피아(갈색) 배경의 어두운-탄색 테마 둘 다 라이트 색상 테마로 간주될 수 있습니다. 특정 전경 또는 배경색을 보장하려면 명시적으로 지정해야 합니다.

참고: 사용자 에이전트는 특정 색상 테마를 지원할 필요가 없습니다. 따라서 color-scheme: dark처럼 단일 키워드만 사용하는 것은, 해당 색상 테마가 반드시 적용된다는 보장이 없습니다.

:root {
  color-scheme: light dark;
}

:root {
  color-scheme: light;
}

:root {
  color-scheme: dark;
}

:root {
  color-scheme: light dark;
}

.light-theme-example {
  color-scheme: light;
}

.dark-theme-example {
  color-scheme: dark;
}

참고: color-scheme: light light처럼 키워드를 반복해도 유효하지만, 첫 번째 키워드의 효과를 넘어서 추가 효과는 없습니다.

2.2. 사용된 색상 테마의 효과

모든 요소에 대해, 사용자 에이전트는 아래 항목들을 사용된 색상 테마에 맞추어야 합니다:

• 스크롤바 및 기타 상호작용 UI의 기본 색상

• 폼 컨트롤 등 "특수 렌더링" 요소의 기본 색상

• 브라우저가 제공하는 기타 UI(예: 맞춤법 검사 밑줄)의 기본 색상

루트 요소에서는, 사용된 색상 테마가 캔버스의 표면 색상과 뷰포트의 스크롤바에도 영향을 미쳐야 합니다.

예상되는 색상 대비를 유지하기 위해, 투명한 캔버스 위에 렌더링되는 임베디드 문서(예: HTML iframe 요소)의 경우, 해당 요소의 사용된 색상 테마와 임베디드 문서 루트 요소의 사용된 색상 테마가 일치하지 않으면, UA는 투명 캔버스 대신 임베디드 문서의 사용된 색상 테마에 맞는 불투명 캔버스 색상(Canvas 색상)을 사용해야 합니다. 이 규칙은 그래픽용으로 임베드되는 요소(예: img 요소로 SVG 문서를 포함하는 경우)에는 적용되지 않습니다.

참고: 위의 소규모 조정 목록 외에는, 사용자 에이전트가 일반적으로 페이지를 사용자의 선호 색상 테마에 맞게 추가로 조정하지 않습니다. 그 이유는 페이지를 의도치 않게 망칠 가능성이 매우 높기 때문입니다. 하지만 사용자가 특정 색상 선택(접근성 등)을 요구하는 경우에는 더 강력한 변경이 적용될 수 있습니다; § 3 강제 색상 팔레트 참고.

2.3. 색상 테마 재정의

사용자가 특정 색상 테마에 대해 재정의 선호를 표시했고, 작성자가 only 키워드를 사용하여 이를 금지하지 않았다면, 사용자 에이전트는 색상 테마를 재정의하여, 사용된 색상 테마를 사용자의 선호 색상 테마로 강제할 수 있습니다. 만약 해당 요소가 그 색상 테마를 지원하지 않으면, 사용자 에이전트는 밝기 반전 등으로 기타 색상을 이 선택된 색상 테마에 자동 조정하며, 페이지 가독성을 위한 색상 대비는 반드시 유지해야 합니다. 이 경우 UA는 대체 요소, 배경 이미지, 기타 외부 리소스의 색상도 적절하게 자동 조정할 수 있습니다.

참고: 이러한 자동 조정의 구체적인 내용은 UA별로 정의되며, UA마다 다를 수 있습니다. 하지만 모든 색상을 강제 색상 모드처럼 고정 팔레트로 강제하는 것은 아니며, 페이지의 모든 색상이 다크 또는 라이트 색상 테마에 맞게 강제하는 것이 목적입니다.

3. 강제 색상 팔레트

강제 색상 모드는 색상 대비를 통해 텍스트의 가독성을 높이기 위한 접근성 기능입니다. 시력이 제한적인 사람들은 전경색과 배경색 사이에 특정 형태의 대비가 있을 때 콘텐츠를 더 편하게 읽을 수 있습니다.

운영체제는 윈도우의 고대비 흑백 테마, 고대비 백흑 테마와 같은 내장 색상 테마를 제공할 수 있습니다. 사용자는 저대비나 색상 대비 등 원하는 테마를 직접 커스터마이즈할 수도 있습니다.

강제 색상 모드에서는, 사용자 에이전트가 사용자가 선호하는 색상 팔레트를 페이지에 강제 적용하여, 작성자가 지정한 특정 속성의 색상을 재정의합니다. § 3.1 강제 색상 모드에 영향을 받는 속성 참고. 또한, 텍스트 아래에 "백플레이트"를 적용할 수도 있습니다 (예: ::selection 의사 요소에 배경을 페인팅하는 것과 유사) 이는 가독성을 위한 적절한 대비를 보장하기 위함입니다.

페이지가 강제 색상 모드에 적응할 수 있도록, 사용자 에이전트는 forced-colors 미디어쿼리와 일치시키며, CSS 시스템 색상으로 필요한 색상 팔레트를 제공해야 합니다 ([CSS-COLOR-4] 참고). 추가적으로, UA가 Lab 명도의 기준(L < 33%는 다크, L > 67%는 라이트)으로 Canvas 색상이 명확히 다크 또는 라이트임을 판단하면, prefers-color-scheme 미디어쿼리의 적절한 값을 일치시켜야 하며, color-scheme에 대한 사용자 선호도도 표현해야 합니다. 이를 통해 라이트/다크 색상 테마를 지원하는 페이지가 강제 색상 테마에 더 가깝게 자동 조정될 수 있습니다. 위의 다크/라이트 기준 사이의 동작은 UA별로 정의되며, light 또는 dark를 사용자의 선호 색상 테마로 가정할 수도 있습니다.

get emulated forced colors theme data가 "none"이 아니라면, 사용자 에이전트는 위의 운영체제 색상 테마를 건너뛰고, 에뮬레이션 강제 색상 테마 데이터에 따라 에뮬레이션 강제 색상 모드 팔레트로 강제 색상 모드가 활성화된 것처럼 동작해야 합니다.

3.1. 강제 색상 모드에 영향을 받는 속성

강제 색상 모드가 활성화되고, 요소의 forced-color-adjust가 auto(아래 참고)일 때, 해당 요소의 모든 속성의 <color> 구성요소가 사용자가 선호하는 색상 팔레트로 강제 조정됩니다.

각 속성의 <color> 구성요소에 대해, 계산값이 시스템 색상이 아닌 색상인 경우, 사용값은 아래와 같이 시스템 색상으로 강제됩니다:

• 특히 background-color는 color 속성의 시스템 색상 값에 대해 시스템 색상 짝으로 반대되는 색상으로 강제됩니다. CanvasText는 Canvas의 반대입니다. 단, 알파 채널은 원래 background-color 값에서 가져와 투명 배경은 계속 투명하게 유지됩니다.

• 그 외의 경우, UA가 적절한 강제 시스템 색상을 결정합니다. 이 색상은 모든 영향받는 속성이 UA 결정일 때 비어 있는 작성자 스타일시트에서 나올 색상과 일치해야 합니다.

  UA는 색상 강제 시 상속 관계에 주의해야 합니다. 예를 들어, UA의 버튼 color와 background-color가 캔버스 color와 background-color의 반대일 때, 아래와 같은 마크업이 있다고 가정합니다:

  <button>Push <em>this</em> button</button>
  

  일반적으로 em 은 button 으로부터 상속받아 가독성을 보장합니다. 하지만 강제 색상 모드에서는, color가 button 과 em 모두에 강제 적용되어야 합니다. button의 색상이 버튼 색상으로 강제되는 것은 당연하지만, em 역시 버튼 색상으로 강제되어야 합니다. 만약 문서의 다른 부분처럼 캔버스 color로 강제한다면, 텍스트가 읽기 어려워집니다.

추가적으로:

• box-shadow와 text-shadow는 none으로 계산됩니다.

• background-image는 원래 값에 url() 함수가 포함되지 않는 한 none으로 계산됩니다.

• color-scheme는 light dark로 계산됩니다.

• scrollbar-color는 auto로 계산됩니다.

• accent-color는 auto로 계산됩니다.

• font-variant-emoji가 normal 또는 unicode로 계산되면, UA는 페이지의 이모지를 가능한 경우 단색(monochrome) 변형으로 강제해야 합니다.

UA는 더 나은 사용자 경험을 위해 이러한 강제 색상 모드 휴리스틱을 추가로 조정할 수 있습니다.

.example {
  color: color-mix(in srgb, CanvasText, Canvas);
}

3.2. 강제 색상 팔레트 해제: forced-color-adjust 속성

forced-color-adjust 속성은 작성자가 특정 요소에 대해 강제 색상 모드 적용을 해제하여, 색상에 대한 완전한 제어권을 CSS로 복원할 수 있도록 해줍니다. 값의 의미는 다음과 같습니다:

auto

요소의 색상은 강제 색상 모드에서 UA에 의해 자동으로 조정됩니다.

none

요소의 색상은 강제 색상 모드에서 UA에 의해 자동으로 조정되지 않습니다.

작성자는 사용자의 색상 및 대비 요구에 맞게 직접 색상을 조정하고, 해당 요소에 대해 UA의 기본 조정을 변경해야 할 필요가 있을 때만 이 값을 사용해야 합니다.

preserve-parent-color

강제 색상 모드에서, color 속성이 부모로부터 상속받는 경우 (즉, cascaded value가 없거나, cascaded value가 currentColor나 inherit 등의 부모로부터 상속되는 키워드인 경우), 해당 값은 부모의 color의 사용값으로 계산됩니다.

그 외의 측면에서는 none과 동일하게 동작합니다.

참고: 이 값은 외부 문서의 텍스트 색상을 SVG에 전달받아 일관성을 유지하고(강제 색상 모드의 조정과도 일치), SVG는 기본적으로 정확한 색상을 유지하도록 하기 위한 용도입니다. 강제 색상 모드는 일러스트레이션에는 일반적으로 유용하게 적용할 수 없습니다.

SVG 콘텐츠가 깨지지 않도록, UA는 아래와 같은 규칙을 UA 스타일시트에 추가해야 합니다:

@namespace "http://www.w3.org/2000/svg";
svg|svg { forced-color-adjust: preserve-parent-color; }
svg|foreignObject { forced-color-adjust: auto; }

UA는 루트 요소에 설정된 forced-color-adjust 값을 문서 뷰포트로 전달해야 하며(예: 캔버스 배경에 영향), forced-color-adjust는 HTML body에서는 전달되지 않습니다.

4. 성능 기반 색상 조정

대부분의 모니터에서는 작성자가 선택한 색상이 디바이스 성능에 큰 차이를 주지 않습니다; 흰색 배경이나 검은색 배경으로 문서를 표시하는 것이 거의 동일하게 쉽습니다.

그러나 일부 디바이스에는 이러한 가정이 성립하지 않는 제한이나 특성이 있습니다. 예를 들어, 프린터는 일반적으로 흰색 용지에 인쇄합니다; 흰색 배경의 문서는 배경을 그리는 데 잉크를 거의 쓰지 않지만, 검은색 배경의 문서는 배경색을 채우기 위해 많은 잉크를 소모합니다. 이는 인쇄 결과가 좋지 않고, 종이에 물리적 손상이 생길 수 있으며, 잉크 소모가 크게 늘어 비용이 증가합니다. 아주 작은 차이(예: 검은색 텍스트와 어두운 회색 텍스트)도 인쇄 시에는 차이가 큽니다. 검은색 잉크 하나만 쓰는 것과 시안/마젠타/노랑 잉크 혼합을 쓰는 것은 잉크 사용량과 해상도에 영향을 줍니다.

이 결과, 어떤 상황에서는 사용자 에이전트가 작성자가 지정한 스타일을 출력 장치와 사용자의 선호에 더 적합하게 자동 조정할 수 있습니다. 하지만 어떤 경우에는 문서에서 색상이 중요한 의미를 갖고 있을 수 있으므로, 작성자는 사용자 에이전트에 페이지의 색상 선택을 존중해 달라고 힌트를 줄 필요가 있습니다. 이 섹션에서는 이러한 자동 조정을 제어하는 속성을 정의합니다.

4.1. 잉크 절약: print-color-adjust 속성

print-color-adjust 속성은 프린터 등에서 비용이 많이 들거나 권장되지 않는 색상/스타일 선택(예: 어두운 배경에 밝은 텍스트)에 대해 사용자 에이전트가 어떻게 처리해야 하는지 힌트를 제공합니다. 만약 사용자 에이전트가 이 부분의 표시를 사용자가 직접 제어할 수 있게 한다면, 사용자의 선호가 print-color-adjust의 힌트보다 우선적으로 존중되어야 합니다. 값의 의미는 다음과 같습니다:

economy

사용자 에이전트가 출력 장치에 알맞게 필요에 따라 스타일을 자동 조정해야 합니다.

예를 들어, 인쇄 시에는 배경을 무시하거나 텍스트 색상을 충분히 어둡게 조정하여 잉크 사용량을 최소화할 수 있습니다.

exact

이 값은 페이지가 지정한 요소에 색상과 스타일을 중요한 방식으로 사용하므로 사용자가 직접 요청하지 않는 한 자동 조정이나 변경을 하지 않아야 함을 나타냅니다.

예를 들어, 지도 웹사이트에서 인쇄용 길찾기 안내를 제공할 때, 각 단계에 흰색과 밝은 회색 배경을 교대로 적용해 "지브라 스트라이프"를 만들 수 있습니다. 이 배경이 모두 흰색으로 바뀌면 운전 중 빠르게 확인할 때 읽기 어려워질 수 있습니다.

UA는 루트 요소에 설정된 print-color-adjust 값을 문서 뷰포트로 전달해야 하며(예: 캔버스 배경에 영향), print-color-adjust는 HTML body에서는 전달되지 않습니다.

4.2. color-adjust 단축 속성

color-adjust 단축 속성은 작성자가 성능 기반 색상 조정 관련 속성을 한 번에 선언할 수 있게 해줍니다. (현재로서는 해당 속성이 print-color-adjust 하나뿐이지만, 앞으로 더 추가될 수 있습니다.)

color-adjust 단축 속성은 현재 더 이상 권장되지 않습니다. 작성자는 print-color-adjust와 같이 더 구체적인 속성을 사용하여 의도와 다른 상황에서 성능 기반 색상 조정을 실수로 초기화하는 것을 피해야 합니다.

5. 에뮬레이션

5.1. 강제 색상 모드 에뮬레이션

각 최상위 traversable에는 에뮬레이션 강제 색상 테마 데이터가 연관되어 있으며, 이는 ForcedColorsModeAutomationTheme을 나타내는 데이터입니다. 초기값은 "none"입니다.

enum ForcedColorsModeAutomationTheme {
  "none",
  "light",
  "dark"
};

에뮬레이션 강제 색상 테마 데이터 설정을 위해, navigable navigable과 emulatedThemeData가 주어질 때:

1. emulatedThemeData가 ForcedColorsModeAutomationTheme임을 확인한다.

2. traversable을 navigable의 최상위 traversable로 설정한다.

3. traversable이 null이 아니면:

   1. traversable의 에뮬레이션 강제 색상 테마 데이터를 emulatedThemeData로 설정한다.

   2. UA는 이를 스타일 재계산이 필요한 변경으로 간주해야 한다.

에뮬레이션 강제 색상 테마 데이터 가져오기를 위해, ForcedColorsModeAutomationTheme theme가 주어질 때:

1. navigable을 theme의 관련 글로벌 객체의 연관 Document의 node navigable로 설정한다.

2. navigable이 null이면 null을 반환한다.

3. traversable을 navigable의 최상위 traversable로 설정한다.

4. traversable이 null이면 null을 반환한다.

5. traversable의 에뮬레이션 강제 색상 테마 데이터를 반환한다.

5.2. 강제 색상 모드 색상 팔레트

6. 개인정보 보호 고려사항

색상 테마 또는 강제 색상 모드를 통해 사용자의 색상 선호를 적용하면, getComputedStyle()를 통해 페이지에 사용자의 색상 선호가 노출되어 지문 채집 위험 표면이 증가할 수 있습니다.

7. 보안 고려사항

내장 문서가 타이밍 공격을 사용해 자신의 color-scheme이 외부 iframe과 일치하는지 여부를 판별할 수 있는 가능성이 있습니다.

8. 감사의 글

이 명세서는 Apple, Google, Microsoft의 다양한 색상 조정 기능 개발 노력과 www-style에서의 인쇄 조정 논의 없이는 불가능했을 것입니다. 특히 CSS 워킹 그룹은 아래 분들께 감사를 표합니다: Alison Maher, François Remy, イアンフェッ티

추가로 MSFT / Apple / Google 인물을 여기에 기재하세요.

9. 변경 사항

2022년 2월 10일 후보 권고안 스냅샷 이후 변경 사항:

• color() 폴백 시스템 색상의 특수 처리 제거. 해당 기능은 [CSS-COLOR-4]에서 삭제됨. (Issue 7007)
• 강제 색상 모드의 테스트 개선을 위한 에뮬레이션 지원 추가. (Issue 11824)
• 강제 색상 모드에 적용되는 속성을 보다 일반적으로 모든 속성의 <color> 구성요소에 적용하도록 변경. 특정 속성은 주석으로 이동. (Issue 11857)
• 강제 색상 모드의 폰트 이모지 폴백 로직 추가. (Issue 8064)

후보 권고안 이전 변경 사항도 참고.