웹사이트를 만들 때 접근성은 종종 나중으로 밀린다. 운영체제의 접근성 또는 디스플레이 설정에 맞춰 CSS 미디어 쿼리를 사용하면 디자인을 처음부터 바꾸지 않고도 대비, 움직임, 색 구성표, 투명도를 조정할 수 있다.

prefers-contrast는 대비를 더 높이길 원하는 사용자에게만 콘텐츠의 대비를 높이는 데 쓸 수 있다. 기본 디자인은 그대로 유지할 수 있다.

.blue {
 color: rgb(117, 105, 255);

 @media (prefers-contrast: more) {
 color: rgb(44, 0, 255);
 }
}

기기에서 고대비 모드를 켜면 위의 낮은 대비 텍스트가 높은 대비 텍스트로 바뀌는 모습을 확인할 수 있다. 개발자 도구에서 색상을 클릭하면 배경과의 대비 비율을 확인할 수 있으며, WCAG 2는 작은 텍스트에 최소 4.5, 제목처럼 큰 텍스트에 최소 3.0의 대비 비율을 권장한다. 대부분의 브라우저에는 웹사이트의 대비 문제를 자동으로 목록화하는 도구도 있다.

움직임이나 깜박이는 애니메이션으로 불편을 겪는 사용자에게는 prefers-reduced-motion으로 필수가 아닌 애니메이션을 끄거나 줄일 수 있다.

.jello {
 &:hover {
 animation: jello 1s ease;
 }

 @media (prefers-reduced-motion: reduce) {
 animation: none;
 }
}

움직임 줄이기 설정을 켜면 왼쪽 원에 마우스를 올리거나 터치해도 애니메이션이 실행되지 않아야 한다. 다음 CSS로 페이지의 모든 애니메이션을 끌 수도 있지만, 적용한 뒤 의도하지 않은 부작용이 없는지 확인해야 한다.

@media (prefers-reduced-motion: reduce) {
 * {
 animation: none !important;
 transition: none !important;
 }
}

prefers-color-scheme은 사용자의 밝은 모드 또는 어두운 모드 설정에 맞춰 색을 바꾼다. 색상마다 CSS 변수를 정의하고 사이트 전체에서 사용하면 미디어 쿼리를 한 번만 작성하면 된다.

:root {
 --color-text: black;
 --color-background: white;
}

@media (prefers-color-scheme: dark) {
 :root {
 --color-text: white;
 --color-background: black;
 }
}

.theme-aware-element {
 color: var(--color-text);
 background-color: var(--color-background);
}

2024년 기준으로는 color-scheme과 light-dark()로도 같은 결과를 낼 수 있다. color-scheme은 스크롤 막대와 선택 영역 등에 브라우저 기본 색을 선호하는 색 구성표에 맞춰 적용하는 데 도움이 된다.

:root {
 color-scheme: light dark;
 --color-text: light-dark(black, white);
 --color-background: light-dark(white, black);
}

.theme-aware-element {
 color: var(--color-text);
 background-color: var(--color-background);
}

prefers-reduced-transparency는 실험적인 기능이며, 작성 당시 Firefox와 Safari에서는 기본 지원되지 않았다. 해당 지원이 이뤄지지 않는 동안에는 반투명 효과를 보수적으로 사용하는 편이 좋다.

.translucent {
 opacity: 0.6;

 @media (prefers-reduced-transparency) {
 opacity: 1;
 } 
}

투명도 줄이기가 켜져 있으면 브라우저에 따라 두 원이 불투명하게 보여야 한다.

접근성 설정은 대체로 켜고 끄는 방식이지만, 개인이 겪는 어려움은 더 넓은 범위에 걸쳐 있다는 점도 고려해야 한다. 이런 미디어 쿼리가 모든 문제를 해결해 주지는 않으므로, 우선 합리적인 수준의 접근성을 갖춘 인터페이스를 설계하는 것이 좋다.

WCAG 2 성공 기준 · 대비 설정 · 움직임 줄이기 설정 · 색 구성표 설정 · 투명도 줄이기 설정