강제 색상 조정

강제 색상 조정 (Forced Color Adjust)

forced colors 모드(고대비 등)가 강제로 적용하는 색상 팔레트에 요소가 따를지 말지 정해 주는 유틸리티예요. 제한된 색만 쓰는 환경에서 가독성이 떨어지는 컴포넌트를 보호할 때 유용해요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

forced-color-adjust-auto forced-color-adjust: auto;

forced-color-adjust-none forced-color-adjust: none;

강제 색상에서 제외하기 (Opting out of forced colors)

forced-color-adjust-none 유틸리티를 사용하면 강제 색상 모드가 적용하는 색상에서 요소를 제외할 수 있어요. 제한된 색상 팔레트를 강제하면 사용성(usability)이 떨어지는 상황에서 특히 유용해요.

개발자 도구에서 forced-colors: active를 에뮬레이션해 보면 변경 사항을 확인할 수 있어요.

Basic Tee $35 Choose a color WhiteGrayBlack

<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>

강제 색상 variant를 사용하면 사용자가 강제 색상 모드를 켰을 때만 조건부로 스타일을 추가할 수도 있어요.

강제 색상 복원하기 (Restoring forced colors)

forced-color-adjust-auto 유틸리티를 사용하면 요소가 강제 색상 모드가 적용하는 색상을 따르도록 만들 수 있어요.

<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>Choose a color:</legend>
    <select class="hidden lg:block">
      <option value="White">White</option>
      <option value="Gray">Gray</option>
      <option value="Black">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 유틸리티를 되돌리고 싶을 때 유용해요.

반응형 디자인 (Responsive design)

forced-color-adjust 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="forced-color-adjust-none md:forced-color-adjust-auto ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

강제 색상 조정