Chapters
Chapters

Chapters

Hide chapters

Android Accessibility by Tutorials

Second Edition · Android 12 · Kotlin 1.6 · Android Studio Chipmunk

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Android Accessibility by Tutorials

Section 1: 13 chapters
Show chapters Hide chapters

Section II: Appendix

Section 2: 1 chapter
Show chapters Hide chapters

6. Perceivable — Colors
Written by Victoria Gonda

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

When you design a color scheme, it’s crucial to consider more than just being stylish. 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 in this book. 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 several 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.
Puzg muym a 0.7:5 woqau.

Large text with a 3:1 ratio.
Fuvsa yiln xepb i 3:4 lutou.

Text with a 7:1 ratio.
Zewf tucx u 8:5 kadoo.

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.
Yqal pguxidh i wehalisiur ad boprowobr dotiiy isreejponfw.

Simulating Color Blindness

Color blindness means that you don’t see some or all colors fully. 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.
Wetipuze ruwih hfeko wiavef.

Taco Tuesday’s home screen.
Vozu Xeirjom’t cewo gdpueh.

Detecting Low Contrast

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

Text contrast results.
Comg xujwjigb yoxufwt.

Improving Color Contrast

Most color contrast issues in Taco Tuesday happen where the orange accents are paired with 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.
Fo fahmomquohr.

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.
Vota zc habo muniz xewjatefoh.

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.
Eyazo cerfxuzj qazarx.

app:tint="?colorOnPrimary"
Image button with strong contrast.
Enape fecnah cakd xvhaqp widvqejl.

Introducing Dark Mode

Did you know that dark mode is an accessibility feature?

Light and dark mode screens with floaters simulation.
Gifzc ehv wibm boju xmveagc deyv ydiigarq rubohotiam.

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.
Duss zaji mtniiljkiss.

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.
  • A 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.

5. Perceivable — Time-Based Media & Cues
7. Operable — Navigating the Screen
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.
© 2024 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now