CSS media - prefers-contrast

prefers-contrast

prefers-contrast는 사용자가 시스템 수준에서 높은 대비 모드, 저 대비모드를 선택했는지의 여부를 나타낸다.

사용자의 시스템 설정에 따라 css가 동적으로 적용되도록 웹사이트나 웹 애플리케이션을 조정할 수 있게 해주는 방식으로. 웹 접근성을 향상하는 데 사용될 수 있다.

 

기능이 생긴 이유

웹 사이트를 이용하는 사용자들 중 시력에 불편함이 있는 사용자나 고령의 사용자 등이 웹사이트를 조금 더 쉽게 읽는 데 도움을 줄 수 있게 하기 위함이다

또한 일부 사용자들은 눈의 피로를 줄이거나 특정 타입의 색안경을 착용하는 등의 이유로 낮은 대비를 선호하는 경우가 생기게 되는데 이러한 부분을 지원하기 위해 prefers-contrast가 생겨나게 되었다.

prefers-contrast 는 개발자들이 사용자의 시스템 설정에 따라 높은 대비 또는 낮은 대비 스타일을 동적으로 적용할 수 있게 해 주어 웹사이트의 사용성과 접근성을 크게 향상할 수 있습니다.

설정 값의 종류

• no-preference : 사용자가 대비 설정에 대해 선호 사항을 지정하지 않았음을 나타낸다.
• more : 사용자가 시스템 설정에서 높은 대비를 선호하도록 선택했음을 나타낸다.
• less : 사용자가 시스템 설정에서 낮은 대비를 선호하도록 선택했음을 나타낸다.
• custom : 사용자가 시스템 설정에서 사용자 지정 대비를 선택했음을 나타낸다.

 

예제

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

위 코드와 같은 스타일이 적용된다면 contrast라는 클래스 명을 가진 요소에서 색상대비가 높을 경우 outline의 속성을 지정해주는 스타일로 이해할 수 있다.

 

지원 브라우저

 

prefers-contrast 브라우저 지원

 

2023년 7월 기준으로 위와 같이 지원을 하고 있다

지원이 가능한 브라우저들의 가장 최근 업데이트 버전을 본다면 firefox의 101 (Released 2022-05-31) 버전이 2022년 5월 31일에 업데이트되어 데스크탑의 브라우저에서는 최신 버전을 유지할 경우 모든 브라우저에서 지원이 가능하고 모바일의 경우에는 Opera Android에서만 지원을 하지 않기 때문에 모바일의 브라우저에서 적용을 하기 위에선 브라우저간 호환성을 고려해야 한다.