example of 1.4.1 Use of Color?

[Ignacio-de-Loyola]

Have a question on Success Criterion 1.4.1 Can it be an example of 1.4.1 if it is divided into patterns as in the example? I wonder if this example is an accessibility error.

[JAWS-test]

Do you mean the color difference between "Book" and "Mileage Booking"? That depends:

• If it is simply two buttons and the color only symbolizes the border between the buttons, the color contrast is not ideal, but acceptable because there is enough space between the words so that it is recognizable that they are two separate buttons. Not to mention that the contrast is not only too low between the buttons with 1.1:1, but also to the background (2:1 and 2.3;1) - i.e. it would have to be clarified whether the buttons can be recognized as such at all. But this can only be decided when a larger section of the page is visible. However, insufficient contrast of the buttons to the background is not a violation of 1.4.1, but would be one of 1.4.11
• If the color represents the status of the buttons (e.g. pressed and not pressed), it is a violation of 1.4.1 (contrast 1,1:1)

[Ignacio-de-Loyola]

@JAWS-test Doesn't the shape of the button indicate pressed and not pressed regardless of the color contrast? I wonder if there is a standard for color contrast in 1.4.1.

[patrickhlauke]

Doesn't the shape of the button indicate pressed and not pressed regardless of the color contrast?

it doesn't if you can't tell what the shape is (because of the low 1.4.11 non-text contrast which makes it difficult to actually tell there IS a shape)

I wonder if there is a standard for color contrast in 1.4.1.

second note on https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

[Ignacio-de-Loyola]

@patrickhlauke If the brightness contrast between buttons is 4.5:1 or higher, isn't it an error?

[JAWS-test]

Doesn't the shape of the button indicate pressed and not pressed regardless of the color contrast?

As @patrickhlauke already wrote, the shape is recognizable only if it has sufficient contrasts (at least 3:1 to neighboring shapes). But even if the contrast would be sufficient, I wouldn't know which of the two buttons is pressed. But that would be a usability issue, not an accessibility issue.

If the brightness contrast between buttons is 4.5:1 or higher, isn't it an error?

3:1 as explained in the second note on https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html. 4.5:1 is only required for text to background (SC 1.4.3)

[Ignacio-de-Loyola]

@JAWS-test In the above example, if the contrast between buttons and between buttons and background is 3:1 or higher, Can I understand that it is not a issue of accessibility? What I find difficult to judge is whether the blue round shape is divided into colors only.

[JAWS-test]

I have measured all contrasts and mentioned them in my first comment. The contrasts of the background colors among each other are all below 3:1 and thus insufficient.

Only the text contrasts (white on blue) are sufficient, because they are above 4.5:1.

[JAWS-test]

To be able to assess what contrasts are necessary here, more of the page needs to be visible, as I wrote above. Only then can it be assessed whether the buttons can be recognized as controls at all.

The screenshot of you is only sufficient to say that the status of the buttons (pressed or not pressed) is not transmitted with sufficient contrasts. Apart from the fact that I still don't know which of the two buttons has the status "pressed". What about when neither or both are pressed? Or can only one of the two be pressed? Then just use radio buttons.

Also, always keep in mind that pure color coding (even with contrast above 3:1) is always problematic, because when using a High Contrast Mode, the colors are no longer visible. Therefore, information should not be transmitted exclusively by color.

[detlevhfischer]

Proposed working group answer:

Generally, If color alone is used to expose information about a state or role of an object in context, for example, the state of a button in a row of buttons, the currently selected tab in a tablist, or a link within unlinked inline text, then contrast between the exposed object and its unexposed context needs to be 3:1 or better. In the example included by @Ignacio-de-Loyola it is not entirely clear if a state or role is exposed. Provided that change of shape is used here to indicate a pressed state, this shape would need a contrast of 3:1 or better to the adjacent control to expose this state visually, and, lacking that minimum contrast, may fail 1.4.1 Color.

[Myndex]

Hi @Ignacio-de-Loyola

If the brightness contrast between buttons is 4.5:1 or higher, isn't it an error?

No, there Is no error for high contrast. If I can ask, what or where did you read that gave you the impression that having higher contrast would somehow be an error?

What I find difficult to judge is whether the blue round shape is divided into colors only.

In your example it's mostly saturation differences.

What is color

For the purposes of our discussion, "Color" means hue (uniqueness) and colorfulness (saturation and chroma), and disregarding luminance (lightness/darkness/brightness).

The human vision system processes color (hue, colorfulness) separately from luminance (achromatic lightness). Color and luminance serve different functions, or perhaps I should say they are used differently and for different purposes by the human vision system.

Why this matters

The luminance carries all the fine detail, edge information, etc. The color carries the unique hue and colorfulness, i.e. distance from grey, sometimes referred to as saturation or chrome.

Color is weak compared to luminance. Color contrast is a third the strength and a third the resolution of luminance contrast. Color contrast and luminance contrast are not additive in effect.

Object shape and definition is via luminance. Object differentiation, discrimination, uses color (hue/sat) contrast. Together luminance and color are used for object recognition. Text needs luminance only.

This means that If you need to define shape or border of something, you need to have adequate luminance contrast, regardless of any color (hue/sat) contrast.

Your buttons

$CIELUV$ is a semi-perceptually-uniform color model. $L^$ is perceptual lightness, $Sat$ is saturation, meaning colorfulness relative to the lightness. The $L^u^v^sh$ values are:

Button	$L^*$	$Sat$	$Hue$
"Book"	$45$	$2.35$	$258$
"Mileage"	$48$	$0.47$	$250$
Backgrnd	$25$	$1.96$	$260$

What we see is that between "book" and "mileage booking", there is almost no lightness difference and almost no hue difference. The only substantial difference is saturation, with "book" almost 5 times more saturated than "mileage booking".

Also to draw your attention to "book" which might appear to be brighter than "mileage booking", even though "book" calculates as darker. This is attributable to the HK effect, and also to known errors in $1931\ CIEXYZ$ blue.

The perceived lightness of the background is half that of the buttons, (the actual luminance is a quarter, due to the non-linear aspect of human vision). Look at how much more clearly defined the outer edge of the button is against the background because of this small amount of luminance or lightness contrast.

Edge detail is in luminance.

So, in your sample the only substantial contrast between the buttons is the saturation or chroma contrast. If differentiation is important to understanding the purpose of the buttons, i.e. one is on and one is off, then The contrast is very insufficient.

Buttons against background

Your buttons against that background calculate as 2.28:1 under WCAG2, however because WCAG2 overstates dark colors, it's useful to mention the equivalent for light colors is even lower about 1.35:1. The lightness contrast is about Lc 19, this level might be passible for something like a disabled button, but not for something active.

However, since each button has clickable text on it, under 1.4.11 the button itself doesn't have to meet a contrast level to BG, so long as the clickable text has sufficient contrast.

The text appears to be 20px and bold, So the WCAG2 threshold is 3:1 contrast (For reference the equivalent threshold is Lc45 for 20px and bold @ APCA subfluent, which is suitable for words on a button with 0.5em padding).

Regarding blue

Generally speaking pure blues should be the darkest of a color pair, particularly when it involves text. In this case the text is very light, So the text contrast is OK.

But the colors for the buttons and background are blue on blue on blue. The BG and Mileage button are desaturated so they have green and red in them, the "book" button is #0064de.

Blue is the lowest resolution color, because the blue photoreceptors in the eye (S cones) are sparsely scattered around the peripheral vision with none in the central vision. The S cones also do not contribute to luminance, and the blue primary in an sRGB monitor only calculates to about 7% of the total luminance, with green at 71%, and red at 21%.

But we can lighten blue by adding green and red to improve the luminance or lightness contrast. This will slightly desaturate the blue as well as lightning it, but we're not particularly interested in saturation contrast so much as we are interested in luminance contrast.

Color vision examples

Here's a slide with some samples processed for some common types of color vision deficiency. The upper left sample is standard vision, the top button is your original button and the bottom one has two minor changes: The active button was lightened to #3892ff And text on the inactive button was darkened to #C6CDD2

Notice that all vision types see improvement in the revised button with these minor changes, and most especially the rare tritanopia.

"Make it right in black-and-white"

Here the buttons are reduced to black-and-white (Which in my generation means grayscale)

A black-and-white image Is useful because it shows only the luminance information. Ideally any design should be perceivable and useable in black-and-white to ensure there's enough detail in the luminance channel for all vision types.

Thank you for reading.