Skip to main content

Contrast

Create sufficient contrast between foreground and background so text is discernible.

Use a tool to check the contrast ratio:

The recommended contrast ratio is 4.5 to 1 (for WCAG AA level) but you should strive to meet WCAG AAA level (7.0 to 1).

Brand colors are a common issue. You can use this tool to check for ADA compliance.

For "large" text (size 18 point) the recommended contrast ratio is 3 to 1.

Contrast Settings

The option to increase contrast is available in:

  • iOS - Settings > Accessibility > Display & Text Size > Increase Contrast

The prefers-contrast CSS media feature is used to detect if the user has requested that an increase in contrast.

You can use this property to programmatically increase contrast. For example: a default Ionic application will have a primary color --ion-color-primary of #3880ff. When used with a white background this equates to a Contrast Ratio of 3.68 which does not meet the WCAG Level AA recommendation of 4.5, so lets increase it:

@media (prefers-contrast: more) {
  :root {
    --ion-color-primary: #2561c9;
  }
}

This contrast ratio of this color compared with white is 5.78 which is great.

Dark Mode

Lets not forget that your app can also be used in dark mode, or can be used together with a color other than white.

In our case we also need additional contrast in dark mode:

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  body {
    --ion-color-primary: #7c9bd1;
  }
}

For dark mode our color scheme may use lighter colors but be sure to look for exceptions in this: For example an iOS check box in dark mode will have a white check icon. It is always important to test!

note

If you make your changes for contrast in the variables.scss file you'll notice that the default theme css variables are applied to :root and the dark theme is applied to body.