6. Perceivable — Colors

Written by Tori 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.

Search online for a color contrast calculator to run some experiments. Play with different palettes until you find a contrast ratio close to 4.5:1. One example is to try is #767676 and #FFFFFF.

Note: At the time of writing, this was a reliable contrast checker: https://webaim.org/resources/contrastchecker.

For larger text, the minimum ratio of 3.1 is lower than for the main text. Why is this? What is considered large text?

Bigger text is easier to read, and “large” is somewhat subjective. In general, you can follow the rule that 18 sp regular text or 14 sp bold text is sufficient to fall under the guidance for “large text”.

Use your contrast checker tool to see how a 3:1 ratio looks. An example is #949494 compared to #FFFFFF.

Success Criterion 1.4.6 Contrast (Enhanced) prescribes ratios of 7:1 for regular text and 4.5:1 for large text, which is AAA level compliance. You’ve already looked at 4.5:1. Now see what 7:1 looks like. Try out the hex codes #595959 and #FFFFFF.

Now turn your attention to the elements you can exclude from these requirements — reference the last two bullet points on Success Criterion 1.4.3. You’ll see that incidental items are excluded. These include decorative text, disabled buttons and hidden elements.

If you decide an element can use low-contrast colors, make sure the user has all the information they need if they can’t see it. For example, toggle the enabled attribute on a button so the accessibility services understand this button’s state.

Logos and brand names are also excluded. You can decide if you need to adjust them so that they are visible.

Now that you know what this guideline means, you have the context to dig into the vision impairments that inspired these guidelines.

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.

When making tacos in bright conditions: Think about how hard it can be to see your screen in the sun. High contrast ratios improve the user experience in bright conditions.

When your device is at a distance: If you’re looking at your phone from a distance, maybe because your hands are full of taco ingredients, you’ll comprehend more of the content at a distance when the contrast ratios are higher.

When your glasses are MIA: Don’t forget about those who remove their glasses or contacts before bed. If they wanted to review taco recipes while in bed, a high color contrast means they may be able to see without those glasses or contacts.

When you live with a vision impairment: Some impairments make parts of a person’s vision blurry or dark. Some cause floaters, while others bring double-vision. Each impairment manifests with varying levels of severity. Higher contrast makes it easier for many people who live with these, and other impairments, to see your taco recipes.

Do you now understand how improved contrast can help people?

Exercise: Explore how these impairments affect someone’s vision with simulators.

Are you curious how it feels to live with vision impairments? Browser plugins can help you get a glimpse into life for some of your users. The NoCoffee Chrome Extension created the above simulations.

Try it for yourself: Search for a vision simulator for your favorite browser to experience these changes yourself.

Remember that these simulations won’t capture the full experience of living with a vision impairment. The nature of the impairment, severity and length of time a person has lived with a vision issue affects how the user interacts with the world. Simulators simply help you put yourself in your user’s shoes so that you can do better when making your apps accessible.

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.

For these cases, the relative lightness in color is essential.

Android devices provide a way to simulate color blindness. Turn it on now by going to Settings ▸ Developer options ▸ Simulate color space. You can find it under Hardware accelerated rendering or just search for it.

Note: For help with the developer settings, go back to Chapter 3, “Testing & Tools”.

Here, you’ll find several different options. Try a couple of them to simulate color blindness and note the color changes in different apps. Make sure you try Monochromacy to see what your apps look like in full grayscale.

Did you spot any views that might benefit from increased color contrast?

Open the project you used for the previous chapter, or get the starter project from this chapter’s materials.

Disable the color blindness simulations then build and run.

Detecting low contrast

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

Turn it on in Settings ▸ Accessibility ▸ Accessibility Scanner. Open Taco Tuesday and scan the main screens.

Review any suggestion labeled Text contrast.

In these suggestions, you’ll see your existing contrast, as well as the contrast needed to meet guidelines. Use these hints to inform decisions about the palette.

If the suggestion is about a decorative text element, you can leave it be because it’s acceptable to inform the accessibility services to ignore it. If it’s large text and the scanner doesn’t detect that, it’s also OK to leave it.

As you can see from the suggestions, you have some fixes to make. In a few more paragraphs, you’ll get to making those changes.

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.

The Level AA guidance specifies that 4.5:1 should be the minimum text contrast. How do you implement this guideline? You have some options:

• Use a different color from your design system
• Add a new color
• Update your color palette

Contrast issues are less burdensome to tackle when your app is young or undergoing a redesign. In both cases, you have the flexibility to change the design system or color palette, which are the most efficient ways to modify colors across an app.

For Taco Tuesday, which is a young app, you’ll change the color palette. Specifically, you’ll change the orange accent to another orange with a higher contrast ratio to white.

Note: How can you find more accessible colors? The most straightforward way is to play around with different colors in a contrast checker or use an online tool to find an alternate color similar to your existing color.

If your team has a designer, you should consult with them. What you consider a minor change could “break” a color scheme.

Accessible Color Generator generated the colors for this chapter. You can find it here https://learnui.design/tools/accessible-color-generator.html, and you can search for an accessible color generator online to find alternatives.

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.

In colors.xml, replace the value for colorAccent with the suggested color. Append the alpha value FF to the start of the hex code because some places in the app require it:

<color name="colorAccent">#FFbf5800</color>

Build and run, then scan the same places that triggered the contrast suggestions. You should see no more suggestions!

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.

Your new contrast for the orange accent color, #bf5800on white is 4.55:1, and the primary green color, #006837 with white is 6.91:1.

Go to colors.xml. Change the primary color to #006635 and the accent color to #FF983800:

<color name="colorPrimary">#006635</color>
<color name="colorAccent">#FF983800</color>

Build and run. Depending on how well you distinguish color, you might notice that the new accent color is much darker. It now meets the color contrast requirements for text for Level AAA!

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:

Success Criterion 1.4.11 Non-text Contrast: The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

∙ User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

∙ Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Level AA

The short version of this criterion is that, if you have a view that the user needs to perceive, understand and use, it needs a contrast ratio of at least 3:1.

Image buttons and icons fall into this category!

Increasing button contrast

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

Look for a suggestion for the View Details button. It has a 2.11:1 ratio, far short of the suggested ratio of 3:1. You can fix the contrast by making the button white to match the text on the card.

Open item_try_it_recipe.xml and find the view with the ID item_recipe_details. Add the following attribute to the ImageView:

app:tint="?colorOnPrimary"

The ?colorOnPrimary value is the same white as the text uses. The reason you’re using semantic names like “colorOnPrimary” rather than color names like “white” will become apparent soon enough. Until then, build and run to see your changes.

For now, you can ignore the suggestion that says the button is too small — the contrast is now acceptable, and this task is done.

Introducing dark mode

Did you know that dark mode is an accessibility feature?

“A dark theme is a low-light UI that displays mostly dark surfaces”, according to Android’s Material Design guidelines.

While using dark mode is more commonly thought of as a style preference, for some people, it can be the difference between being able to use an app or not.

Consider if you lived with floaters in your vision, for example. They float around, obstructing your vision wherever they are. How frustrating that could be.

It turns out that floaters are more visible on a bright background, so choosing a dark background improves the experience for many who live with this condition.

Next up, you’ll set up Taco Tuesday to support dark mode.

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.

Start by creating a file to hold your dark theme colors:

1. In Android Studio’s Project pane, select the Project tab.
2. Then create colors.xml in app/src/main/res/values-night.

Note the values-night part of the file path, which specifies that this is for the “night” configuration. If the project doesn’t contain the values-night directory, create it.

Add this content to the file:

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

With this, you’re overriding the primary and accent colors.

These colors already meet accessibility guidelines for color contrast. The Material theme handles all the other colors.

Next, you’ll instruct the theme to allow dark mode.

1. Open styles.xml and find the AppTheme style.
2. Change the value of the parent attribute to the following:

Theme.MaterialComponents.DayNight.NoActionBar

This DayNight theme knows how to handle dark mode for elements such as text and backgrounds.

Finally, you need a way to turn night mode on and off. You’ll set it so that the app follows the device’s system settings.

Open TacoTuesdayApp.kt and override onCreate() with the following code:

override fun onCreate() {
 super.onCreate()
 AppCompatDelegate.setDefaultNightMode(
   AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
}

Now, Taco Tuesday will use whatever theme the user has chosen.

It’s essential to provide a way to turn dark mode on and off. For some users, dark mode makes things harder. Defaulting to the device settings is the best way to support it.

If you have Android 10 or higher, go to Settings ▸ Display ▸ Dark theme or Settings ▸ Accessibility ▸ Dark theme to turn on dark mode.

Then, build and run to see Taco Tuesday in dark mode.

Congratulations! Taco Tuesday’s colors now meet WCAG accessibility guidelines, and these fantastic taco recipes are easier to read and understand.

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.

Pure white text on a pure black background can be too harsh, especially for users with astigmatisms, which involve deformed lenses in the eyes. A slightly softer contrast of light text on a dark background is better for everybody.

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.

Before moving on, you should look at the full “WCAG: Perceivable” list on https://www.w3.org/TR/WCAG21/#perceivable to get an overview of additional topics you’ll want to study further.

When you’re done with that, please proceed full steam ahead to the next chapter!