Home Android & Kotlin Books Android Accessibility by Tutorials

6
Perceivable — Colors Written by Victoria Gonda

When you design a color scheme, it’s crucial to consider more than just the appearance. The palette you choose can be the difference between somebody being able to use your app or not.

This is the last chapter that will focus on the perceivable concept. You’ll explore tactics to help you meet this guideline from WCAG:

Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Specifically, you’ll learn how to optimize colors and enable dark mode so those who live with color blindness and other vision impairments can enjoy these premium taco recipes. By the end of this chapter, Taco Tuesday will be much more friendly to users who see color differently.

Measuring color contrast

Color contrast is the difference in lightness between two colors. Higher contrast improves readability for text and other elements, especially for those who live with color blindness and other vision impairments.

One way to think of it is to imagine your app under a grayscale filter. How distinguishable would the grays be? The more different they are, the more contrast your colors have.

You measure the differences between colors using a color contrast ratio. The highest contrast, black and white, is 21:1, while the lowest contrast, two items of the same color, is 1:1. Don’t worry, you don’t have to learn any tricky equations. You’ll use tools to measure contrast.

WCAG has laid out specific contrast ratios in Success Criterion 1.4.3:

Success Criterion 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

∙ Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1

∙ Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

∙ Logotypes: Text that is part of a logo or brand name has no contrast requirement.

Level AA

There are a number of details to unpack over the next several pages:

  • The base rule
  • Large text
  • Different levels of compliance
  • Which elements are not subject to this guidance

Understanding color contrast

The base rule says that text and text images need to have a ratio of at least 4.5:1.

Text with a 4.5:1 ratio.
Rigm gozc i 3.5:4 pagoe.

Large text with a 3:1 ratio.
Keyya somg kiwj u 6:5 hefao.

Text with a 7:1 ratio.
Xazt joxy o 6:3 pomia.

Understanding vision impairments

Having a robust color contrast helps everyone who uses your app, whether they have a vision impairment or not. There are several types of disabilities — some of which are temporary — where high contrast is of particular value to the user.

Grid showing a simulation of different vision impairments.
Bpiz wgakisb a wafexaseak uj firmutuwj capuuv egqounbuckr.

Simulating color blindness

Color blindness means that you don’t see some or all colors the way you’d expect. For example, reds and greens can look quite similar. A person living with color blindness doesn’t necessarily see the world in black and white — although some do — but rather, their eyes perceive a specific combination of colors differently.

Simulate color space dialog.
Fenebaqi rafum flobo kaajot.

Taco Tuesday’s home screen.
Xika Vaujxib’v xuga kzbuim.

Detecting low contrast

Accessibility Scanner, which you used in Chapter 3, “Testing & Tools”, detects low contrast.

Text contrast results.
Qaxy lajccifk cakopyk.

Improving color contrast

Most color contrast issues in Taco Tuesday happen where the orange accents are close to white. You’ll see this combination as accent text on a white background or white text on an orange background. The contrast ratio between these two colors is 4.15:1.

Updating the palette

Open colors.xml and notice that the accent color is #c75f00. Using a color generator of your choice, compare #c75f00 to white, #FFFFFF. You’ll get a suggestion, possibly #bf5800. Recommendations will vary across color generators.

<color name="colorAccent">#FFbf5800</color>
No suggestions.
Wu fotbummeapc.

Implementing next-level compliance

Right now, Taco Tuesday is cruising along at Level AA compliance. The scanner helps you conform to Level AA, but sometimes 4.5:1 isn’t enough. Sometimes you need Level AAA compliance, which is 7:1. Taco Tuesday isn’t there yet, so you’re going to make more changes.

<color name="colorPrimary">#006635</color>
<color name="colorAccent">#FF983800</color>
Side by side color comparison.
Vaku jx cati suwec cevkivoway.

Handling non-text contrast

Text isn’t the only element that people consume in an app, so it’s not the only type of view that is subject to WCAG’s contrast guidance. Take a look at this criterion:

Increasing button contrast

Go to the list of saved recipes and run the Accessibility Scanner.

Image contrast result.
Awuyo liwgbafx bafiyk.

app:tint="?colorOnPrimary"
Image button with strong contrast.
Utava zitcom vuwj qvbogp sibdyuch.

Introducing dark mode

Did you know that dark mode is an accessibility feature?

Light and dark mode screens with floaters simulation.
Wajhb akq tamg qoxi xnduemw gayb mveojijq pububopuem.

Adding support for dark mode

Lucky for you, Taco Tuesday uses semantic names for all the colors, so you only need to provide colors for the dark theme and enable it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="colorPrimary">#52a871</color>
 <color name="colorAccent">#FFe6782a</color>
</resources>

Theme.MaterialComponents.DayNight.NoActionBar

override fun onCreate() {
 super.onCreate()
 AppCompatDelegate.setDefaultNightMode(
   AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
}
Dark mode screenshots.
Rovg xusi ffdiedvxemk.

Selecting dark mode colors

One last note about choosing dark mode colors for your app: While black text on a white background is the most readable for a light theme, the reverse is not true for a dark theme.

Key points

  • Color contrast is a comparison of lightness between two colors. It’s expressed as a ratio, with 21:1 being the highest and 1:1 the lowest.
  • Higher color contrast makes your app easier to perceive, while lower contrast makes it more difficult.
  • Level AA guidelines call for a text color ratio of 4.5:1 and a large text ratio of at least 3:1.
  • Level AAA guidelines call for a text color ratio of 7:1 and a large text ratio of at least 4.5:1.
  • Non-text elements, such as button icons, must have a ratio of at least 3:1.
  • Dark mode support makes your app more accessible to people with certain vision impairments, and it makes your app more friendly to people who prefer dark mode.

Where to go from here?

In the next chapter, you’ll start looking at the category Operable.

7. Operable — Navigating the Screen 5. Perceivable — Time-Based Media & Cues

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99 $29.99