1

WCAG guidelines say that we should not rely on color to be the only visual cue conveying information for level A accessibility

At the moment, we have tappable texts that are coloured to indicate they are tappable. It can be in the header like a "Back" button or "New" to create content or text directly on a screen to start an action or navigate to another screen. Based on the guidelines they are not accessible because only color is use to indicate they are tapple so they need another visual cue.

One solution would be to use bold text or add an underline. If adding an icon is a possible option, a lot of our tappable text won't be able to accommodate one.

I've been looking at different apps on iOS and can't find any that add any visual cue to colored text like an underline. Does that mean most apps are not level A ,AA or AAA ?

I noticed a setting in iOS accessibility called "Button shapes" that add an underline to tappable text. Is it what most apps rely on? This does not seem to exist on Android, so it's still a problem for android.

What are the best practices here?

1
  • For SC 1.4.1: Use of Color (Level A) you can check here ways of meeting the requirements: w3.org/WAI/WCAG21/Understanding/use-of-color.html#techniques Material uses all caps for buttons (including 'ghost' buttons). If you use verbs for the labels, it will be also easier for the user to identify them as actions. Have in mind that those are only guidelines, but they do not guarantee that you will have an accessible product. I would say you need to test it.
    – ananeto
    Jan 4, 2023 at 14:58

3 Answers 3

1

I assume you refer to the WCAG 2.1 Success Criterion 1.4.1: Use of Color

It is a little more nuanced. Color alone can meet the success criterion if the contrast ratio is high enough between the background and between the surrounding text. From the page in the link above:

If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1. Similarly, if content is distinguished by inverting an element's foreground and background colors, this would pass (again, assuming that the foreground and background colors have a sufficient contrast).

The page links to technique G183 which describes this in a more practical way:

The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different than the surrounding text by people with all types of color blindness, including those individuals who cannot see color at all.

But as webaim.org mentions:

If you start exploring this, you’ll find that this requirement leaves only a small window of available page and link colors. For example, if your page has black text on a white background and you use the standard blue color for links, the link color must be between approximately this color of blue (#6a5eff) and this color of blue (#531fff). Any lighter or darker and it will not have sufficient contrast to the adjacent black text or to the white background, respectively. And if your text/background colors aren’t pure black and white, this significantly narrows or eliminates the window of colors with sufficient contrast.

You will still need to account for hover and focus states making this only more difficult. So it is technically possible to meet the criterion and some companies/designers may find that sufficient, but it is still not recommended. From the page on technique G183 above:

While using this technique is sufficient to meet this success criterion, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with low vision. If there are not a large number of links in the block of text, underlines are recommended for links in blocks of text.

0

Let's assume by 'tappable text' you mean a link. Consulting the guidelines, I'm able to find the following passage from this page:

The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

Note that this guideline only mentions the hover and focus states, and doesn't say anything conclusive about the default state. It advocates that links are decorated with an underline, but it doesn't enforce it.

So it looks like you're good to go, but if you want to stay compliant, provide a 'non-color designator' cue on hover/focus.

0

Bold, italic, double-underlined, dotted-underlined, different font family, different font size, bordered, shadowed, made an indented block—or any other distinguishing treatment. Ideally no 2 such texts are too close together, to prevent mistapping.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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