[a11y]: Contrast on tiles/cards is below 3:1

[mbgower]

Package

carbon-components

Browser

Chrome

Operating System

MacOS

Package version

Take your pick :)

React version

take your pick :)

Automated testing tool and ruleset

n/a

Assistive technology

n/a

Description

As discussed on some recent cards, there are a variety of implementations of cards in IBM:

• Some are actionable
• some are sortable
• some are selectable
• some are just holding static text
• some are themselves non-actionable but contain a link or other actionable item
• some have multiple actionable items

Especially when we get into Carbon flavours, similarly functioning cards share very few attributes, in regard to placement, stroke width, stroke strength, spacing, etc., etc. I think overall there are challenges for all users trying to discriminate between actionable cards/tiles and non-actionable content holders. But for users with disabilities, the problems of discernment and interaction become more pronounced.

One clear way to improve this situation is to undertake a clearer division between when a card is actionable, and when it is just a visual container for other content. There is a requirement called Non-text Contrast that I think can help with this.

Visual information required to identify user interface components and states

1.4.11 Non-text Contrast requires that controls (AKA user interface components) have a 3:1 contrast against adjacent colors for visual information required to identify them. So, if a card is actionable -- a control -- it should have something like a stroke around it that contrasts 3:1 against the page background so that users can understand it is actionable. There are other ways besides strokes to do this, for instance the entire card could be 3:1 against the background.

And of course it follows that although there is no requirement saying this, a tile/card that is NOT actionable shouldn't have a 3:1 contrast. That way everyone would be able to better tell when there is an intended interaction on the page, and when it is just 'decorative'.

This isn't a magic bullet to solve all the challenges making consistent and beautiful cards, but I recommend this basic rule of 3:1 contrast as a way of better defining intended interaction, while improving the accessibility of components for everyone :)

WCAG 2.1 Violation

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-tile--default

Steps to reproduce

1. Look at just about any card/tile in Carbon, including https://react.carbondesignsystem.com/?path=/story/components-tile--default
2. Use a contrast checker to check the card for 3:1 contrast against adjacent colors.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

So, if a card is actionable -- a control -- it should have something like a stroke around it that contrasts 3:1 against the page background so that users can understand it is actionable.

@mbgower just to confirm here, this stroke needs to be applied to the default state, independent of focus state? For example, clickable tile has no stroke by default and then on focus has a stroke that meets 3:1 contrast

default	focus

[mbgower]

this stroke needs to be applied to the default state, independent of focus state?

That's correct, the visual information that distinguishes the control has to be 3:1 in all states, including unfocused and unselected. So in your two illustrations, the clickable tile in the default (unfocused) state either needs to have its grey fill bumped up to 3:1, or have a stroke added around the gray that is 3:1 against the page background, or some other contrasted indicator that means to the user 'this is an actionable tile' It's really useful to look at the definition of user interface component to help with this:

a part of the content that is perceived by users as a single control for a distinct function

So, for instance, if you use a giant pickle to identify each of your cards, each pickle would need to contrast 3:1. A stroke around the outside is, of course, a more common identifier than a pickle.

BTW, normally focus indicators are offset outlines, so they aren't just replacing the control's 'border' stroke, they're outside it. That said, for now you can get away with replacing a thin grey line contrasting 3:1 with a thicker blue line that also contrasts 3:1. However, there are bigger requirements for Focus appearance coming up with the release of WCAG 2.2, so I would recommend offsetting focus indicators. We can pick that up in discussions later; it's a separate consideration.

[ljcarot]

Let's move this in to next Sprint please. Thy is best person to work on this. Thanks @sstrubberg @tay1orjones

[thyhmdo]

Updating these actionable tiles with a stroke: border-strong (gray 50) @abbeyhrt

• Clickable
• Expandable (no interaction)
• Selectable (checkbox)
• Selectable (radio)

[dakahn]

@mbgower diving into the guidance for non-text contrast and in the Boundaries section it states--

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed.

Based on that it would seem to me that cards with stuff inside them indicating a control would pass. Granted its a usability loophole probably created due to the proliferation of boundary-less controls, But in terms of the WCAG pass/fail binary it seems to me that this and this are functionally equivalent to a low vision user, right?

[mbgower]

Yes. However, the borderless 'button' (which isn't something I'd hold up as the apex of good design) has other ways it is getting a bit of a boost for being perceived as a control. Foremost of these is the very fact it is small text string separated by white space from any other text. As well, button text tends to be uniform in font, and often placement. So both the length of the text string and its presentation suggests 'control'.

You don't get that with tiles. Their content is frequently laid out in a grid, but so is content that is NOT actionable. The text in a tile has no particular difference from other text, nor is text in a tile consistently of a certain length or form of speech. So how do users differentiate?

Finally, the tiles do have some visual border -- even if it is only created by a 10% grey fill. If you don't think the tiles have any visual cue, I suggest you remove the fill and any perimeter that exists and see if users have an increased time on task -- or cannot even complete tasks. That is a cue that someone with typical sight is benefitting.

Part of the challenge in this conversation is that tile interaction is sometimes not great for users without disabilities. Sometimes you have to explore what changes the cursor shape or try clicking to see if there is an action. So a consistent, more clear visual differentiation between something you click and don't is going to benefit everyone.

[sstrubberg]

Connecting to #10493

[tay1orjones]

We've refined this down and are now tracking the eventual implementation of this over in https://github.com/carbon-design-system/carbon/issues/12278

[tay1orjones]

Duplicate of https://github.com/carbon-design-system/carbon/issues/12278