테마
테마 (Theming) — 고대비 모드 개발자 핸드북
고대비 모드는 PatternFly 컴포넌트의 대비를 높여, 저시력이나 기타 시각 장애가 있어 더 높은 대비가 필수인 사용자를 지원해요. 표준 라이트·다크 모드는 WCAG AA 대비 비율(텍스트 4.5:1)을 충족하지만, 고대비 모드는 더 나아가 WCAG AAA 텍스트 대비 비율 7:1을 목표로 해요. 또한 비텍스트 요소(대화형 요소와 경계선) 대비를 4.5:1로 높이고, 고대비 환경에서 사라질 수 있는 그림자와 미묘한 배경 채움 대신 명확한 경계를 정의하는 전역 테두리 규칙을 적용해요.
출처: 문서
본문
고대비 모드는 기본(Default) 테마와 Project Felt 테마 양쪽에서 라이트·다크 컬러 스킴으로 동작해요.
고대비 모드 vs. forced colors 모드 (High contrast mode vs. forced colors mode)
우리 고대비 모드는 PatternFly 컴포넌트의 대비를 높이며, 종종 미묘한 배경색에 의존하는 요소·상태·상호작용을 구분하기 위해 추가 테두리를 도입해요. 고대비 모드는 prefers-contrast: more 미디어 쿼리를 대상으로 하는 스타일을 적용해 활성화되는데, 이 모드는 macOS에서 시스템 설정 > 손쉬운 사용 > 디스플레이 > 대비 높이기로 트리거돼요.
이는 forced-colors: active와는 달라요. forced colors 모드는 브라우저가 웹페이지에 제한된 사용자 선택 색상 팔레트를 강제하는, 더 공격적인 대비 모드예요. 보통 작성자가 정의한 색상을 CSS 시스템 색상으로 대체하고 배경색이나 box-shadow 같은 스타일을 제거해요. forced colors 모드의 일반적인 트리거는 Windows High Contrast Mode와 Firefox High Contrast Mode를 활성화하는 것이에요. "자동 고대비" 섹션에서 설명하듯, 우리는 forced-colors 미디어 쿼리 값이 활성일 때 고대비 모드를 적용하는 것을 권장해요.
고대비 모드 활성화 (Enabling high contrast mode)
고대비 모드는 표준 라이트·다크 테마 양쪽에서 동작하도록 설계됐으며, PatternFly에서 기본으로 제공돼요. 고대비 모드를 활성화하려면 애플리케이션의 <html> 태그에 .pf-v6-theme-high-contrast 클래스를 추가하면 돼요. 이 클래스는 동적으로 추가해 애플리케이션에서 고대비 모드를 켜고 끌 수 있어요.
Adam Argyle의 "Building a theme switch" 글은 고대비 모드 테마 전환기에 적용해야 할 원칙을 설명해요.
자동 고대비 (Automatic high contrast)
사용자 OS와 브라우저의 대비 선호에 따라 고대비 모드를 자동으로 적용하려면 window.matchMedia()로 브라우저의 prefers-contrast와 forced-colors 미디어 쿼리를 감지하면 돼요. 고대비 모드는 종종 추가 테두리를 도입하므로, forced-colors를 감지하고 그 값이 활성일 때 고대비 스타일을 적용하는 것을 권장해요.
고대비 모드가 자동으로 활성화되더라도, 사용자가 테마를 켜고 끌 수 있는 수동 토글(toggle)도 함께 추가하는 것이 중요해요. 사용자의 고대비 수동 토글은 항상 OS와 브라우저 선호를 덮어써야 해요.
동적 고대비 (Dynamic high contrast)
사용자가 OS와 브라우저 선호와 무관하게 고대비 모드를 동적으로 적용하게 하려면 애플리케이션의 눈에 띄는 위치에 대화형 토글을 배치할 수 있어요. 사용자의 가장 최근 토글 선택을 localStorage에 저장해 두고, 사용자가 돌아왔을 때 고대비 모드를 자동으로 활성화하거나 비활성화하는 것이 모범 사례예요.
고대비 디자인 토큰 (High contrast design tokens)
다음 토큰은 고대비 모드에서 사용하기 위해 특별히 도입됐어요.
| 토큰 (Token) | 기본 테마 값 (Default theme value) | 고대비 모드 값 (High contrast mode value) |
|---|---|---|
--pf-t--global--border--color--high-contrast |
transparent |
--pf-t--global--border--color--default (라이트 모드: #4D4D4D, 다크 모드: #C7C7C7) |
--pf-t--global--border--width--high-contrast--regular |
0px |
--pf-t--global--border--width--regular (값: 1px) |
--pf-t--global--border--width--high-contrast--strong |
0px |
--pf-t--global--border--width--strong (값: 2px) |
--pf-t--global--border--width--high-contrast--extra-strong |
0px |
--pf-t--global--border--width--extra-strong (값: 3px) |
참고:
--pf-t--global--border--color--high-contrast토큰은forced-colors모드의 스타일을 지원하기 위해 전략적으로 사용될 수 있어요. 이 모드가 활성화되면 투명 테두리가 보이게 되기 때문이에요.
플레인 액션 토큰 (Plain action tokens)
또한 플레인 액션(투명 배경을 가진 동작)을 위해 다음 토큰을 추가했어요. 이 토큰은 이제 플레인 버튼이나 네비게이션 항목처럼 동작이 투명 배경을 가진 PatternFly의 모든 곳에서 사용돼요.
| 토큰 (Token) | 기본 테마 값 (Default theme value) | 고대비 모드 값 (High contrast mode value) |
|---|---|---|
--pf-t--global--border--width--action--plain--default |
0px |
0px |
--pf-t--global--border--width--action--plain--hover |
0px |
--pf-t--global--border--width--100 (값: 1px) |
--pf-t--global--border--width--action--plain--clicked |
0px |
--pf-t--global--border--width--200 (값: 2px) |
고대비와 글라스 모드 (High contrast and glass mode)
사용자가 필요로 할 때 기능적 접근성이 항상 우선하도록, 고대비 모드와 글라스 모드는 상호 배타적이에요. 고대비 모드가 수동으로 또는 OS 수준의 prefers-reduced-transparency 미디어 쿼리를 통해 활성화되면, 모든 글라스 모드 효과가 자동으로 비활성화돼요.
모범 사례 (Best practices)
일반 테마 모범 사례에 더해, 고대비 모드에서 작업할 때 다음 지침을 준수하세요.
색상과 대비 (Color and contrast)
- 텍스트 대비 비율 충족: 모든 일반 텍스트는 배경 대비 최소 7:1을 충족해야 해요. WCAG는 큰 텍스트(18px 이상)에 4.5:1을 허용하지만, 최대 가독성을 보장하려면 모든 텍스트 크기에서 7:1을 목표로 하는 것이 좋아요.
- 비텍스트 대비 비율 충족: 아이콘이나 테두리 같은 다른 모든 UI 요소는 배경 대비 최소 4.5:1을 충족해야 해요.
경계선 (Boundaries)
- 명확성을 위해 테두리 추가: 요소의 배경색이 4.5:1 대비 비율이 없다면 보이는 테두리를 추가하세요. 예를 들어 기본 배경 위에 놓이는 보조 배경색 요소에 테두리를 추가하세요.
- 그림자를 테두리로 대체: 기본 테마에서 그림자에 의존하는 요소는 배경과 적절히 분리되도록 테두리를 추가하세요.
- 상호작용 시 테두리 굵게: 대화형 상태에 대한 명확한 피드백을 제공하려면 테두리 너비를 사용하세요. 요소의 테두리는 hover, focus, click에서 점점 더 굵어져야 해요.
- 예시: 기본 테두리가 없는 요소는 hover 시 1px 테두리, 클릭 시 2px 테두리를 가져야 해요.