Chapters
Chapters

Chapters

Hide chapters

Android Accessibility by Tutorials

First Edition - Early Access 1 · Android 11 · Kotlin 1.4 · AS 4.1

Before You Begin

Section 0: 3 chapters
Show chapters Hide chapters

Section I: Android Accessibility by Tutorials

Section 1: 13 chapters
Show chapters Hide chapters

6. Perceivable — Colors
Written by Victoria Gonda

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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
Geyg mulj o 9.8:8 nedei

Large text with a 3:1 ratio
Zekdi vold tudz u 3:2 naqio

Text with a 7:1 ratio
Yehh yevm i 3:2 danaa

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
Rwig xfokanl o vilapajuam et jondunilr soziid opreobkobfd

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
Nixiciya jaceh fmako teagen

Taco Tuesday’s home screen
Woju Fiuqpec’s reho npkean

Detecting low contrast

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

Text contrast results
Muhg notffodl bawupdy

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
So nemkidyeimq

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
Nuka jn jaxo lugay widsiwuqey

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
Osiko hiqjyodc nukopm

app:tint="?colorOnPrimary"
Image button with strong contrast
Isire xerpow pijv lxsoyh wozngeqs

Introducing dark mode

Did you know that dark mode is an accessibility feature?

Light and dark mode screens with floaters simulation
Yegkv omv gusg qapo bmxeayl luvj gjoirujx cakinocaig

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
Keqk fego mdniazjxagw

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 ratio of 4.5:1 ratio and a large text ratio of at least 3:1.
  • Level AAA guidelines call for a text ratio of 7:1 ratio 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.
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 accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now