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 中的默认调色板提供了 Ionic 颜色，当与适当的对比色一起使用时，该 Ionic 颜色 满足 Web 内容可访问性指南 (WCAG) 定义的 AA 级色彩对比度。高对比度调色板中的 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';

当 prefers-contrast 的 CSS 媒体查询 为 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.

信息

不确定如何更改系统设置？以下是如何在 视窗 11 和 苹果系统 上启用高对比度模式。

¥Not sure how to change the system settings? Here's how to enable high contrast mode on Windows 11 and on macOS.

提醒

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

¥The high contrast light palette must be imported after core.css, and the high contrast dark palette must be imported after dark.system.css. Otherwise, the standard contrast palette will take priority.

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.

信息

不确定如何更改系统设置？以下是如何在 视窗 11 和 苹果系统 上启用高对比度模式。

¥Not sure how to change the system settings? Here's how to enable high contrast mode on Windows 11 and on macOS.

提醒

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

¥The high contrast light palette must be imported after core.css, and the high contrast dark palette must be imported after dark.class.css. Otherwise, the standard contrast palette will take priority.

提醒

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

¥The .ion-palette-high-contrast class must be added to the html element in order to work with the imported high contrast palette.

自定义 Ionic 高对比度主题​

¥Customizing Ionic High Contrast Theme

Ionic 有一个推荐的高对比度调色板，可以通过三种不同的方式启用：always，基于 system 设置，或使用 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. 为所有 modes 设置 Ionic 颜色，以补充 :root 选择器中的高对比度调色板。:root 选择器与选择器 html 相同，只是 specificity 更高。

    ¥Sets the Ionic colors for all modes to complement a high contrast palette in the :root selector. The :root selector is identical to the selector html, except that its specificity is higher.

  2. 使用 :root.ios 选择器在 ios 设备上设置高对比度调色板的变量。

    ¥Setting variables for the high contrast palette on ios devices using the :root.ios selector.

  3. 使用 :root.md 选择器在 md 设备上设置高对比度调色板的变量。

    ¥Setting variables for the high contrast palette on md devices using the :root.md selector.

目录