Comment on 1.4.11 Graphics Contrast

[AidanA11y]

I have combined comments for these two criteria.

I definitely see increased contrast as beneficial but as written I think the scope is too broad.

I suggest this apply only to icons and other actionable controls and only when these do not have visible text labels. Where an image is described by an adjacent label (such as a printer icon and the word "print" beside it) it does not make sense to require both the image and text meet the 4.5:1 contrast ratio.

I do not think it is practical to expect all images with "essential for understanding the content" to meet 4.5:1. Varying levels of contrast allows designers to create a visual hierarchy. If all the items on a screen have strong contrast the screen may actually become harder to read for many sighted users as everything has the same importance. Good design draws the eye to key elements and use of contrast is an effective technique.

The term "object" is not very clear especially since it has specific meaning in web content already (e.g ) which does not seem to be intended here.

[alastc]

Hi Aidan,

By two, I assume you mean graphics contrast and component contrast?

Just a preliminary comment before the full working group approves a reply, I thought it would help to know:

As it stands, the graphics contrast SC does not apply if there is text that fulfils the same purpose (that's part of the "required for understanding" concept), there is a new understanding doc that might help with that.

The User Interface Component Contrast would apply if the control had a border or background (visual indicator that it is a button).

For example, on this page this button falls under component contrast but not graphics contrast:

And the cog icon on the right falls under graphics contrast but not component contrast:

A conforming version of that cog would be:

(That's probably a bit aggressive, I'm not great with graphics tools, it is aiming for 3:1.)

Regarding visual hierarchy, there are several ways of creating that including colours and sizing. It is also worth noting that if the graphics are thicker (which only needs 3px lines) the requirement is 3:1, which should make that aspect easier.

Does that help, or are there aspects you are still concerned with?

Kind regards,

-Alastair

[AidanA11y]

Thanks @alastc Your comments and the pages on Understanding User Interface Component Contrast and Understanding Graphics Contrast helped me understand. Its a surprisingly complex topic to make testable.

[awkawk]

Changed ratio to 3:1, so that should be easier. The text for graphical objects has been updated