접근성
forced-color-adjust
강제 색상 조정을 활성화하거나 비활성화하는 유틸리티입니다.
| Class | Styles |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
예제
강제 색상 모드에서 제외하기
forced-color-adjust-none 유틸리티를 사용하면 강제 색상 모드에서 적용되는 색상을 특정 엘리먼트에서 제외할 수 있습니다. 이는 제한된 색상 팔레트를 강제로 적용할 경우 사용성이 저하되는 상황에서 유용합니다.
개발자 도구에서 `forced-colors: active`를 에뮬레이트하여 변경 사항을 확인해 보세요
Basic Tee
$35
<form> <img src="/img/shirt.jpg" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Choose a color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">White</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>또한 강제 색상 변형을 사용하여 사용자가 강제 색상 모드를 활성화했을 때 조건부로 스타일을 추가할 수도 있습니다.
강제 색상 모드 복원
forced-color-adjust-auto 유틸리티를 사용하면 강제 색상 모드에서 적용된 색상을 요소가 따르도록 할 수 있습니다.
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>색상 선택:</legend> <select class="hidden lg:block"> <option value="White">흰색</option> <option value="Gray">회색</option> <option value="Black">검은색</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>이 기능은 더 큰 화면 크기에서 forced-color-adjust-none 유틸리티를 되돌리고 싶을 때 유용합니다.
반응형 디자인
접두사 a forced-color-adjust 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
