CSS 미디어 쿼리 - forced-colors

forced-colors

CSS 미디어 특성 중 하나로 고대비 모드의 사용 유무에 따라 스타일을 지정할 수 있도록 하는 기능을 가지고 있다.

저시력이거나 특정 색상을 구분하기 어려운 사용자에게 중요한 기능으로 동작할 수 있으며 이런 접근성의 향상은 사용자들에게 더 좋은 웹 경험을 제공하고 서비스를 제공할 수 있게 된다.

forced-colors는 사용자가 강제로 시스템 색상을 선택했는지 여부를 감지하도록 디자인 되어있으며, 일부 사용자들은 특정 색상, 특히 고대비 색상 스킴을 사용하여 컨텐츠를 더 잘 볼 수 있게 된다.

 

고대비 모드란?

사용자의 컴퓨터 시스템에서 제공하는 기능 중 하나로 사용자의 시각적 경험을 향상시키기 위해 화면에 표시되는 색상 대비를 높이는 설정이다.

이 모드는 저시력 사용자나 색상을 구분하기 어려운 사용자에게 도움이 되는 기능이다.

 

일반적으로 고대비 모드를 활성화하면 배경이 흰색이고 텍스트가 검은색인 화면에서 배경이 검은색이고 텍스트가 흰색인 화면으로 바뀌게 된다. 이렇게 하면 텍스트와 배경 사이의 대비가 높아져 텍스트가 더 잘 보이게 된다. 그러나 고대비 모드의 정확한 효과는 운영 체제와 시스템 설정에 따라 다르기 때문에 해당 부분에 대해 주의해야 한다.

고대비 모드는 종종 웹 사이트와 애플리케이션의 색상, 텍스트 크기 및 폰트를 바꿈으로써 향상된 가독성을 제공한다. 따라서 웹 개발자와 디자이너는 넓은 접근성을 위한 웹사이트를 구성하게 된다면, 저시력자, 색상을 구분하기 어려운 사용자를 위해 고대비 모드를 고려하여 애플리케이션을 설계하고 구현해야 한다.

이를 통해 모든 사용자가 웹사이트나 애플리케이션을 이용할 수 있도록 접근성을 높일 수 있기 때문이다.

 

다크모드와 차이점?

다크 모드와 고대비 모드는 모두 사용자 인터페이스를 사용하기 쉽게 만드는 데 기여하며, 사용자의 시각적 경험을 개선하려는 같은 목표를 가지고 있다. 하지만 두 기능을 사용 목적과 구현 방식에서 차이가 있다.

1. 다크 모드: 다크 모드는 주로 애플리케이션 또는 웹사이트의 전반적인 테마를 어둡게 만드는 것을 목표로 한다. 이는 사용자의 눈에 덜 부담을 주고, 특히 어두운 환경에서 디지털 디바이스를 사용할 때 눈의 피로를 줄일 수 있다. 또한 일부 사용자는 다크 모드가 더 세련되고 안정감 있게 느껴지며, 이는 주관적인 색상 및 디자인 선호에 관한 부분이다.
2. 고대비 모드: 고대비 모드는 주로 저시력 사용자나 특정 색을 구별하기 어려운 사용자를 위한 기능이다. 고대비 모드는 배경과 텍스트, UI 요소 간의 대비를 크게 증가시킴으로써 가독성을 향상시킨다. 일반적으로 이 모드는 사용자의 운영 체제 설정에서 활성화되며, 모든 애플리케이션과 웹사이트에 영향을 미칠 수 있다.

 

기능 알아보기

forced-colors는 none과 active 두 가지 값을 가지고 있다.

• none: 강제 색상 모드가 활성화되지 않았음을 의미한다.
• active: 사용자나 운영 체제가 강제로 색상 스킴을 적용했음을 의미한다.

@media (forced-colors: active) {
  body {
    forced-color-adjust: auto;
    color: CanvasText;
    background: Canvas;
  }
}

만약 웹 사이트의 특정 색상 스킴을 강제로 적용하는것을 허용하도록 구성하고 싶다면 위와 같이 CSS를 적용할 수 있다.

여기서 forced-color-adjust는 브라우저가 요소의 색상을 조정할 수 있는지를 지정하며, CanvasText와 Canvas는 각각 시스템 텍스트 색상과 배경색을 나타내는 시스템 색상 키워드이다.

 

브라우저 호환성

forced-colors 브라우저 호환성

 

아직 forced-colors는 모든 브라우저에서 지원하지 않기 때문에 해당 기능을 적용하기 전 브라우저의 호환성을 고려하여 적용해야 한다.