5

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?

"Darken Colors" switch on iOS "High contrast text" switch on Android

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)

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.

  • 1
    Thanks for the great answer, especially the quotes on the contrast modes counting as assistive technology. To be clear, I am interested in taking the burden of users. There's middle ground between "medium contrast" (say, 2.9:1) and "strong contrast" (7:1). Your answer is helpful to understand how these relate to standard compliance. – bootsmaat Feb 7 at 9:14
2

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.

  • Thanks. About "Not worry about aesthetics": I think designing, shaping the user experience, is about balancing function and aesthetics. Ignoring one will not make good overall user experience. – bootsmaat Feb 6 at 12:49
  • Like I said, it is a personal decision. – Arriving From The Sky Feb 7 at 0:46
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.

  • what is this: "WCAG AA compliant"? – Confused Feb 6 at 12:22
  • He is referring to the Web Content Accessibility Guidelines, a set of standards on accessibility. The standards have 3 levels of strictness, A being the most relaxed and AAA the strictest. – bootsmaat Feb 6 at 12:50
  • They're not "levels of strictness," they're levels of access which show how great a problem it would be for disabled people if the criteria weren't met, with level A meaning "This has a massive impact for a lot of people" and level AAA being "This has a big impact but for a smaller number of people" – Karl Brown Feb 7 at 9:56

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.