Accesibilidad
forced-color-adjust
Utilidades para activar o desactivar los colores forzados.
| Clase | Estilos |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
Ejemplos
Desactivar colores forzados
Utiliza la utilidad forced-color-adjust-none para desactivar en un elemento los colores impuestos por el modo de colores forzados. Esto es útil en situaciones donde imponer una paleta de colores limitada reduciría la usabilidad.
Intenta emular `forced-colors: active` en tus herramientas de desarrollador para ver los cambios
Camiseta básica
$35
<form> <img src="/img/shirt.jpg" /> <div> <h3>Camiseta básica</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Elige un color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">Blanco</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>También puedes usar la variante de colores forzados para agregar estilos condicionalmente cuando el usuario haya habilitado un modo de color forzado.
Restaurar colores forzados
Utiliza la utilidad forced-color-adjust-auto para hacer que un elemento se adhiera a los colores impuestos por el modo de colores forzados:
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>Elige un color:</legend> <select class="hidden lg:block"> <option value="White">Blanco</option> <option value="Gray">Gris</option> <option value="Black">Negro</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>Esto puede ser útil si deseas deshacer la utilidad forced-color-adjust-none, por ejemplo en un tamaño de pantalla más grande.
Diseño responsivo
Antepone a la utilidad forced-color-adjust el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.