Forced Colors Mode
강제 색상 모드
강제 색상 모드는 여러 페이지 색상 대신 사용자가 선택한 시스템 팔레트를 사용합니다. 이는 컨트롤과 텍스트를 구별하기 쉽게 만들 수 있습니다.
@media (forced-colors: active) -> system colors + visible shape and statebackground + box-shadowButtonText · ButtonFace · borderoutline: 2px@media (forced-colors: active) -> system colors + visible shape and stateA11Y다른 예시
버튼은 작성자의 배경과 그림자를 잃습니다. 하지만 버튼의 테두리, 텍스트, 포커스 표시기는 여전히 버튼의 모양과 상태를 보여줍니다.
주요 부분
- 01작성자 팔레트
- 02사용자가 강제한 팔레트
- 03보이는 테두리
- 04시스템 색상
- 05포커스 표시기
- 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.