forced-color-adjust

Definition

The forced-color-adjust CSS property is used to specify whether or not the user agent should adjust colors to meet the user's accessibility preferences. This property is particularly useful when applying custom styles to form controls or other UI elements that might be affected by the user's browser or operating system settings.

Examples

This example sets the forced-color-adjust property to none, which disables the user agent's color adjustment and preserves the element's original colors:

button {
  background-color: #007bff;
  color: #fff;
  forced-color-adjust: none;
}

This example sets the forced-color-adjust property to auto, which enables the user agent's color adjustment:

input {
  border: 1px solid #ccc;
  padding: 8px;
  forced-color-adjust: auto;
}

Values

Best Practices

• Use the forced-color-adjust property to ensure that your custom styles are accessible and legible for all users, regardless of their browser or operating system settings.
• Consider using forced-color-adjust: none on elements with high-contrast colors or custom styles, to ensure that the colors are preserved and not adjusted by the user agent.
• Test your styles on a range of devices and with different accessibility settings to ensure that they are effective and legible.
• Be aware that some user agents may not support the forced-color-adjust property or may have limited support for certain values.
• Use other accessibility techniques, such as using appropriate contrast ratios and accessible fonts, in conjunction with the forced-color-adjust property to create truly accessible designs.

Browser Compatibility

The forced-color-adjust property is a relatively new addition to the CSS specification and may not be fully supported in all browsers. However, it is supported in modern versions of Chrome, Firefox, and Edge. Safari has limited support for this property.