color-adjust 属性用于控制浏览器自动调整元素颜色的行为，提升可读性或满足辅助功能需求。其核心是允许开发者覆盖默认的颜色调整机制，常见于打印或高对比度模式。主要取值包括 auto（默认，允许浏览器调整）、none（禁用所有调整）和 exact（声明颜色已优化，无需修改）。例如深色背景配浅色文字时，使用 color-adjust: exact 可防止打印时背景被重置为白色导致文字不可见。但需谨慎使用 exact，避免损害可访问性。对于不支持该属性的旧浏览器，可通过 @media print 手动设置安全颜色，或用 javascript 检测支持性并添加降级类。结合 css 变量可实现灵活的主题适配，如根据 prefers-color-scheme 切换亮暗色系，并配合 color-adjust 确保一致性。然而，部分浏览器在打印中对 css 变量支持不佳，需充分测试以保障可读性。
CSS
color-adjust属性允许你控制浏览器如何调整元素及其内容的颜色，以提高可读性或满足特定的辅助功能需求。它主要用于打印或强制对比度模式下，但也可以用于更精细的主题适配。
解决方案
使用
color-adjust的核心在于理解它允许你覆盖用户代理（浏览器）默认的颜色调整行为。通常，浏览器会在打印或高对比度模式下自动调整颜色，以确保内容的可读性。
color-adjust可以让你选择性地禁用或修改这种行为。
最常见的用法是
color-adjust: exact或
color-adjust: none。
exact告诉浏览器，你已经充分考虑了颜色对比度，不需要进行任何额外的调整。
none则完全禁用颜色调整。
立即学习“前端免费学习笔记（深入）”；
例如，假设你有一个深色主题的网站，背景颜色是
#333，文字颜色是
#fff。在打印时，浏览器可能会自动将背景颜色调整为白色，导致文字不可见。你可以使用
color-adjust: exact来防止这种情况发生：
body {
background-color: #333;
color: #fff;
color-adjust: exact;
}这告诉浏览器，你已经考虑了颜色对比度，不需要进行任何额外的调整。
除了
exact和
none，还有一个
auto值，这是默认值，允许浏览器根据需要进行颜色调整。
在主题适配方面，
color-adjust可以用于确保某些元素在不同主题下保持一致的颜色。例如，你可能希望某些图标始终以特定的颜色显示，无论用户选择什么主题。
需要注意的是，过度使用
color-adjust: exact可能会导致可访问性问题。确保你已经充分考虑了颜色对比度，并且你的网站在不同的环境和设备上都具有良好的可读性。
color-adjust的兼容性也需要考虑。虽然大多数现代浏览器都支持它，但旧版本的浏览器可能不支持。你可以使用 CSS 的
@supports特性来检测浏览器是否支持
color-adjust，并提供备选方案。
如何处理不支持
color-adjust的浏览器？
对于不支持
color-adjust的旧版本浏览器，你需要提供备选方案来确保可读性。这通常涉及到使用媒体查询来检测打印或高对比度模式，并手动调整颜色。
例如，你可以使用以下 CSS 来检测打印模式，并调整颜色：
@media print {
body {
background-color: #fff !important; /* 强制白色背景 */
color: #000 !important; /* 强制黑色文字 */
}
}这会在打印时强制将背景颜色设置为白色，文字颜色设置为黑色，从而确保可读性。
另一种方法是使用 JavaScript 来检测浏览器是否支持
color-adjust，并根据结果动态地调整颜色。
if (!('colorAdjust' in document.documentElement.style)) {
// 浏览器不支持 color-adjust
// 提供备选方案
document.body.classList.add('no-color-adjust');
}然后，你可以使用 CSS 来针对
no-color-adjust类应用不同的样式：
.no-color-adjust body {
background-color: #fff;
color: #000;
}哪种情况下应该避免使用
color-adjust？
过度使用
color-adjust: exact是一个常见的错误。在以下情况下，你应该避免使用它：
- 当你没有充分考虑颜色对比度时。
- 当你依赖浏览器自动调整颜色来提高可读性时。
- 当你无法测试你的网站在不同的环境和设备上的可读性时。
color-adjust应该只用于你确信已经充分考虑了颜色对比度，并且你希望阻止浏览器进行任何额外的调整的情况。
如果你不确定是否应该使用
color-adjust，最好让浏览器自动调整颜色。
color-adjust与 CSS 变量结合使用有哪些技巧？
CSS 变量（也称为自定义属性）可以与
color-adjust结合使用，以实现更灵活的主题适配。
例如，你可以定义一组 CSS 变量来表示不同的颜色方案：
:root {
--bg-color: #333;
--text-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
color-adjust: exact;
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #fff;
--text-color: #000;
}
}这定义了两个 CSS 变量：
--bg-color和
--text-color。
body元素的背景颜色和文字颜色都使用这些变量。
@media (prefers-color-scheme: light)媒体查询用于检测用户是否选择了浅色主题。如果用户选择了浅色主题，则会覆盖 CSS 变量的值，从而改变网站的颜色方案。
通过结合使用 CSS 变量和
color-adjust，你可以轻松地创建适应不同主题的网站，同时确保在打印或高对比度模式下具有良好的可读性。
但是，需要注意的一点是，某些浏览器可能不会在打印时正确地应用 CSS 变量。因此，最好在使用 CSS 变量时进行彻底的测试。
