인터페이스 더 많은 세부 정보 A2 · 공식 명세 플랫폼: 웹

Forced Colors Mode

강제 색상 모드

강제 색상 모드는 여러 페이지 색상 대신 사용자가 선택한 시스템 팔레트를 사용합니다. 이는 컨트롤과 텍스트를 구별하기 쉽게 만들 수 있습니다.

당신은 이것을 이렇게 부를 수 있습니다 Forced Colors Mode강제-색상사용자가 강제한 팔레트

작동 방식을 확인하세요

원본 작업 예제강제 색상 모드
ACCESSIBLE UI RULE강제 색상 모드@media (forced-colors: active) -> system colors + visible shape and state
버튼 상태forced-colors: active
AUTHOR PALETTE변경 사항 저장background + box-shadow
시스템 팔레트▣ 변경 사항 저장ButtonText · ButtonFace · border
⌨보이는 키보드 포커스윤곽선이 색상 교체를 유지함outline: 2px
형태와 상태 유지border + text + focus
통과시스템 팔레트에서 텍스트, 테두리 및 포커스는 명확하게 유지됩니다.AVOID배경이나 그림자만 의존하지 마세요.
@media (forced-colors: active) -> system colors + visible shape and stateA11Y
강제 색상 모드접근 가능한 인터페이스 실습

다른 예시

버튼은 작성자의 배경과 그림자를 잃습니다. 하지만 버튼의 테두리, 텍스트, 포커스 표시기는 여전히 버튼의 모양과 상태를 보여줍니다.

주요 부분

  1. 01작성자 팔레트
  2. 02사용자가 강제한 팔레트
  3. 03보이는 테두리
  4. 04시스템 색상
  5. 05포커스 표시기
  6. 06색상 조정 예외

사용할 때

강제 색상이 활성화된 상태에서 컨트롤을 테스트하세요. 중요한 경계는 보이게 유지하고 필요한 조정에는 시스템 색상을 사용하세요.

다음 경우에는 사용하지 마세요

색상이나 상자 그림자만 의존하지 마십시오. 색상을 보존하는 것이 필수적인 경우에만 forced-color-adjust none을 사용하십시오.

코드에서 사용된 이름

@media (forced-colors: active) -> system colors + visible shape and state

출시하기 전에

Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.

복사 가능한 요청

Outcome:Complete the task with 강제 색상 모드 (Forced Colors Mode)。 User context:버튼은 작성자의 배경과 그림자를 잃습니다. 하지만 버튼의 테두리, 텍스트, 포커스 표시기는 여전히 버튼의 모양과 상태를 보여줍니다. Recommended pattern:강제 색상 모드 (Forced Colors Mode)。 Why it fits:강제 색상이 활성화된 상태에서 컨트롤을 테스트하세요. 중요한 경계는 보이게 유지하고 필요한 조정에는 시스템 색상을 사용하세요. Do not use it when:색상이나 상자 그림자만 의존하지 마십시오. 색상을 보존하는 것이 필수적인 경우에만 forced-color-adjust none을 사용하십시오. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary):공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.

이 요청을 확인하세요

Review how 강제 색상 모드 (Forced Colors Mode) is used now. Definition: 강제 색상 모드는 여러 페이지 색상 대신 사용자가 선택한 시스템 팔레트를 사용합니다. 이는 컨트롤과 텍스트를 구별하기 쉽게 만들 수 있습니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.

A2
이 용어는 얼마나 공식적인가요?

공식 명세

출판된 공식 규격이 나열된 기술 범위에서 이 용어를 정의해요.

공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요.

범위
소스가 포함하는 것만:정규 이름、정의、의미론、구현
문서 상태
릴리스 후보
선택됨
2026-07-30

증거 출처 및 범위

권위 있는 출처 + 용어 참조 · W3C CSS Working Group · 릴리스 후보 CSS Color Adjustment Module Level 1 — Forced Color Palettes Forced Color Palettes 범위: 정규 이름、정의、의미론、구현 여기 역할: 직접 용어 참조 출처 범위: 정규 이름, 정의, 의미론, 구현 권위 있는 출처 · W3C CSS Working Group · 릴리스 후보 CSS Color Adjustment Module Level 1 범위: 정규 이름、정의、의미론、구현 여기 역할: 명시된 범위 안의 권위 출처 범위: 정규 이름, 정의, 의미론, 구현 권위 있는 출처 · W3C CSS Working Group · 초안 Media Queries Level 5 범위: 정규 이름、정의、의미론、구현 여기 역할: 명시된 범위 안의 권위 출처 범위: 정규 이름, 정의, 의미론, 구현 배경 근원 Media Queries Level 5 — forced-colors 여기 역할: 정의가 아닌 유용한 배경

직접 복사

브라우저가 이것을 복사할 수 없습니다. 아래 요청을 선택하고 직접 복사하세요.