跳至主要内容
版本: v8

高对比度模式

Ionic 提供了针对弱视用户的色板，这些色板具有更高的对比度。 这些色板通过放大文本等前景内容与 UI 组件等背景内容之间的对比度来工作。Ionic 提供了亮色和暗色变体来实现高对比度。

概述​

Ionic 中的默认色板提供了 Ionic 颜色，这些颜色符合 AA 级颜色对比度，如 Web 内容无障碍指南 (WCAG) 中所定义，前提是与适当的对比度颜色配合使用。 高对比度色板中的 Ionic 颜色 已更新为符合 AAA 级颜色对比度，前提是与适当的对比度颜色配合使用。 值得注意的是，UI 组件的对比度得到了改进，包括边框、文本和背景颜色。 但是，需要注意的是，在高对比度色板中，文本可读性优先。 这意味着，如果调整 UI 组件相对于页面背景的对比度会显着影响组件文本与其背景之间的对比度，则 UI 组件背景的对比度将保持不变。

启用高对比度主题​

有三种方法可以在应用程序中启用高对比度色板：**始终**、根据**系统**设置或使用 CSS **类**。

始终​

可以通过在适当的文件中导入以下样式表来启用高对比度色板。 这种方法将启用高对比度色板，而无论对比度偏好的系统设置如何。

@import '@ionic/angular/css/palettes/high-contrast.always.css'; // Light palette
// @import '@ionic/angular/css/palettes/high-contrast-dark.always.css'; // Dark palette

可以通过导入 high-contrast-dark.always.css 而不是 high-contrast.always.css 来应用高对比度暗色色板。

以下示例将始终显示高对比度亮色色板，而无论用户对高对比度或暗黑模式的偏好如何。

系统​

启用高对比度模式的系统方法涉及检查系统设置以了解用户首选的对比度。 这是开始使用新的 Ionic Framework 应用程序时的默认方法。 在适当的文件中导入以下样式表将自动从系统设置中检索用户的偏好，并在首选高对比度时应用高对比度色板。

以下示例显示了如何同时包含高对比度亮色色板和高对比度暗色色板。 系统的暗黑模式偏好将被检查以显示高对比度色板的亮色或暗色变体。

@import '@ionic/angular/css/palettes/high-contrast.system.css';
@import '@ionic/angular/css/palettes/high-contrast-dark.system.css';

这种方法在 prefers-contrast 的 CSS 媒体查询 为 more 时激活高对比度色板。 prefers-contrast 媒体查询受 所有现代浏览器 支持。 如果需要支持旧版浏览器，我们建议使用 CSS 类 方法。

以下示例使用系统设置来决定何时显示高对比度模式。

信息

不知道如何更改系统设置？ 以下是如何在 Windows 11 和 macOS 上启用高对比度模式。

注意

高对比度亮色色板必须在 core.css 之后导入，高对比度暗色色板必须在 dark.system.css 之后导入。 否则，标准对比度色板将优先使用。

CSS 类​

虽然上述方法非常适合仅通过文件导入来启用高对比度色板，但有些场景需要更多地控制应用位置。 如果需要有条件地应用高对比度色板，例如通过切换，或者如果要根据系统设置扩展功能，我们提供一个高对比度色板类文件。 此文件在将特定类添加到应用程序时应用高对比度色板。 将以下样式表导入适当的文件将提供使用高对比度色板与类一起使用的必要样式。

@import '@ionic/angular/css/palettes/high-contrast.class.css';
@import '@ionic/angular/css/palettes/high-contrast-dark.class.css';

这种方法在将 .ion-palette-high-contrast 类设置为 html 元素时激活高对比度色板。 此类必须由开发人员应用。 它可以与 .ion-palette-dark 类 结合使用，以有条件地应用高对比度暗色色板。

以下示例结合了站点设置、系统设置和切换来决定何时显示高对比度模式。 站点的色板优先于系统设置。 如果系统设置在演示加载时与站点的色板不同，它将使用站点的色板。

信息

不知道如何更改系统设置？ 以下是如何在 Windows 11 和 macOS 上启用高对比度模式。

注意

高对比度亮色色板必须在 core.css 之后导入，高对比度暗色色板必须在 dark.class.css 之后导入。 否则，标准对比度色板将优先使用。

注意

.ion-palette-high-contrast 类**必须**添加到 html 元素才能与导入的高对比度色板一起使用。

自定义 Ionic 高对比度主题​

Ionic 有一个推荐的高对比度色板，可以通过三种不同的方法启用：始终、根据 系统 设置或使用 CSS 类。 每种方法都涉及导入具有相应名称的高对比度色板文件。

主题变量通过导入相关的高对比度色板文件来设置，无需将其复制到应用程序中。 有关正在更改的变量的详细信息，包括用于进一步自定义的附加变量，请参阅 主题 部分。

以下提供了有关如何根据应用程序中应用方式自定义高对比度色板的详细信息。

可以通过导入 high-contrast.always.css（亮色变体）和 high-contrast-dark.always.css（暗色变体）来访问**始终**高对比度色板。

**始终**高对比度色板的行为方式如下

  1. 在 :root 选择器中设置 Ionic 颜色，以补充所有 模式 的高对比度色板。 :root 选择器与选择器 html 相同，但其 特异性 更高。
  2. 使用 :root.ios 选择器设置 iOS 设备上的高对比度色板的变量。
  3. 使用 :root.md 选择器设置 MD 设备上的高对比度色板的变量。

目录

编辑此页面