Skip to main content

高对比度模式

Ionic 提供了为低视力用户设计的高对比度调色板。这些调色板通过增强前景内容（如文本）与背景内容（如 UI 组件）之间的对比度来起作用。Ionic 提供了亮色和暗色两种版本，以实现高对比度。

🌐 Ionic offers palettes with increased contrast for users with low vision. These palettes work by amplifying the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides both light and dark variants for achieving high contrast.

概述​

🌐 Overview

Ionic 中的默认调色板提供符合 Web 内容可访问性指南（WCAG）中定义的 AA 级别颜色对比 的 Ionic 颜色，前提是与适当的对比颜色一起使用。高对比度调色板中的 Ionic 颜色 已更新，以在与适当的对比颜色一起使用时达到 AAA 级别颜色对比。值得注意的是，UI 组件的对比度得到了改进，包括边框、文本和背景颜色。然而，需要注意的是，在高对比度调色板中，文本的可读性优先。这意味着，如果调整 UI 组件与页面背景的对比度会显著影响组件文本与其背景之间的对比度，则 UI 组件背景的对比度将保持不变。

🌐 The default palette in Ionic provides Ionic colors that meet Level AA color contrast as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The Ionic colors in the high contrast palette have been updated to meet Level AAA color contrast when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged.

启用高对比度主题​

🌐 Enabling High Contrast Theme

在应用中启用高对比度调色板有三种提供的方法：始终，基于系统设置，或使用 CSS 类。

🌐 There are three provided ways to enable the high contrast palette in an app: always, based on system settings, or by using a CSS class.

总是​

🌐 Always

可以通过在相应的文件中导入以下样式表来启用高对比度调色板。此方法将启用高对比度调色板，而不考虑系统的对比度偏好设置。

🌐 The high contrast palette can be enabled by importing the following stylesheet in the appropriate files. This approach will enable the high contrast palette regardless of the system settings for contrast preference.

@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 来应用。

🌐 The high contrast dark palette can be applied by importing high-contrast-dark.always.css instead of high-contrast.always.css.

以下示例将始终显示高对比度浅色调色板，无论用户偏好高对比度还是夜间模式。

🌐 The following example will always display the high contrast light palette, regardless of the user's preference for high contrast or dark mode.

系统​

🌐 System

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

🌐 The system approach to enabling high contrast mode involves checking the system settings for the user's preferred contrast. This is the default when starting a new Ionic Framework app. Importing the following stylesheets in the appropriate file will automatically retrieve the user's preference from the system settings and apply the high contrast palette when high contrast is preferred.

下面的示例显示了如何同时包含高对比度的浅色调和高对比度的深色调调色板。系统的夜间模式偏好将被检查，以显示高对比度调色板的浅色或深色变体。

🌐 The following example shows how to include both the high contrast light palette as well as the high contrast dark palette. The system's dark mode preference will be checked to show either the light or dark variant of the high contrast palette.

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

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

🌐 This approach activates the high contrast palette when the CSS media query for prefers-contrast is more. The prefers-contrast media query is supported by all modern browsers. If support for an older browser is required, we recommend using the CSS class approach.

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

🌐 The following example uses the system settings to decide when to show high contrast mode.

info

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

caution

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

CSS 类​

🌐 CSS Class

虽然之前的方法仅通过文件导入就能很好地启用高对比度调色板，但有些情况下你可能需要更多地控制其应用位置。在需要有条件地应用高对比度调色板的情况下，例如通过切换，或者你希望基于系统设置扩展功能，我们提供了高对比度调色板类文件。该文件在向应用添加特定类时应用高对比度调色板。将以下样式表导入到相应文件中，将为使用该类的高对比度调色板提供必要的样式：

🌐 While the previous approaches are excellent for enabling the high contrast palette through file imports alone, there are scenarios where you may need more control over where it is applied. In cases where you need to apply the high contrast palette conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a high contrast palette class file. This file applies the high contrast palette when a specific class is added to an app. Importing the following stylesheets into the appropriate file will provide the necessary styles for using the high contrast palette with the class:

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

当在 html 元素上设置 .ion-palette-high-contrast 类时，该方法会激活高对比度调色板。该类必须由开发者应用。可以将其与 .ion-palette-dark 类 结合使用，以有条件地应用高对比度暗色调色板。

🌐 This approach activates the high contrast palette when the .ion-palette-high-contrast class is set on the html element. This class must be applied by the developer. This can be combined with the .ion-palette-dark class to conditionally apply the high contrast dark palette.

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

🌐 The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.

info

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

caution

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

caution

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

自定义 Ionic 高对比度主题​

🌐 Customizing Ionic High Contrast Theme

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

🌐 Ionic has a recommended high contrast palette that can be enabled in three different ways: always, based on system settings, or by using a CSS class. Each of these methods involves importing the high contrast palette file with the corresponding name.

主题变量是通过导入相关的高对比度调色板文件来设置的，不需要复制到应用中。有关被更改变量的更多信息，包括用于进一步自定义的其他变量，请参阅 主题 部分。

🌐 The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the Themes section.

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

🌐 The following provides details on how to customize the high contrast palette depending on how it was applied in an application.

始终高对比度调色板可以通过导入 high-contrast.always.css 获取亮色版本，通过导入 high-contrast-dark.always.css 获取暗色版本。

🌐 The always high contrast palette can be accessed by importing high-contrast.always.css for the light variant and high-contrast-dark.always.css for the dark variant.

“始终”高对比度调色板的表现如下：

🌐 The always high contrast palette behaves in the following ways:

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

目录