Can I use medium color contrast in native mobile apps? Android & iOS have high contrast modes

Question

I design native apps for Android and iOS. Both Android and iOS have high contrast modes. With this in mind, can I use low-contrast colors (say, 3:1 instead of the 4.5:1 that WCAG Level AA requires), knowing that users with bad eyesight can turn on the high contrast mode?

And a detail question related to compliance with the WCAG: Do these high contrast modes count as "assistive technology"? (The WCAG say that content should be readable by people "who do not use contrast-enhancing assistive technology". Source)

Answer 1

Nobody can stop you if you insist on using low contrast, but you should consider the following points:

• Apple's Human Interface Guidelines contain a chapter on colour that recommends using sufficient contrast:

  Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

• The Android Developers site refers developers to Material Design for aspects such as style and usability. The section on Legibility standards for Material Design refers to WCAG 2.0's contrast requirements:

  All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5.1 color contrast between text and background for normal text, and 3:1 to large text.

• The accessibility section in Material Design has a section about colour contrast that also bases its recommendations on WCAG 2.0:

  The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

The current version of the Web Content Accessibility Guidelines is version 2.1, where the relevant success criterion (1.4.3) has not changed since version 2.0. However, WCAG 2.1 introduced success criterion 1.4.11, which requires a contrast of at least 3:1 for "[v]isual information required to identify user interface components and states" and "[p]arts of graphics required to understand the content" (with certain specific exceptions).

The high contrast modes built into operating systems count as assistive technology. See WCAG's definition of assistive technology:

hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents

A note to that definition clarifies that this includes (emphasis mine)

other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, (...) in order to improve the visual readability of rendered text and images;

Even if you are/were not interested in meeting accessibility guidelines, it is worth considering the following: a developer who creates content or a user interface with insufficient contrast forces (potentially) tens of thousands of users to do part of the accessibility effort for him/her, whereas a developer who uses sufficient contrast relieves the users of that burden. Which developer will have more satisfied users? I think this is the single most important consideration.

Answer 2

can I use low-contrast colors...knowing that users with bad eyesight can turn on the high contrast mode?

You can but you would not be WCAG AA compliant.

Do these high contrast modes count as "assistive technology"?

Yes, the contrast modes are considered assistive technology, which is really the answer to your first question. If you use lower contrast colors and the mobile device you're on does not have settings to improve the contrast, then the user is out of luck. Your app should be usable "out of the box" regardless of what settings are available on the device.

Answer 3

Firstly, according to Apple, make sure there is ample contrast between the font color and the background so text is legible. I don't know if there is a right answer to this question, but what I can say is that a lot of factors need to be considered -

1. Will the colors you plan to use, still meet the WCAG after the darken colors or high contrast mode is turned on?

2. Turning the High Contrast mode will most certainly drain the battery life of the device quicker, so would you still consider it a good user experience for users who will be using your app in this mode?

Designing for users with a broad range of abilities can be super challenging. Smart designs use design elements like color, placement, and interaction in very intentional ways to help site visitors accomplish their goals — while giving the user the most enjoyable experience possible.

You should aim for a design that lets your users reach the goal as easily as possible, so maybe not worry about the app aesthetics. But that is entirely a personal decision.

If you design keeping accessibility in mind, it is also called as Universal Design. From my experience, I doubt if a product can be 100% universal, and it is upto you if you can afford to miss out on that small percentage of users who cannot use your products.