Adding issue #9 Graphics Contrast

[alastc]

Adding the graphics contrast SC #9 plus two glossary terms for graphical object, and CSS pixel.

Latest text:

Graphics Contrast

The visual presentation of graphical objects that are essential for understanding the content or functionality have a contrast ratio of at least 4.5:1 against the adjacent color(s), except for the following:

• Thicker: For graphical objects with a minimum width and height of at least 3 CSS pixels, the graphic has a contrast ratio of at least 3:1.
• Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement;
• Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.
• Essential: A particular presentation of the graphical is essential to the information being conveyed.

Glossary items

graphical object

A graphic or section of a graphic that represents a distinct object or sub-component with semantic meaning. It may be a component of a larger structured graphic such as a chart or map. There is a related concept in the ARIA graphics module for graphics with a document structure but this applies to bitmap and vector graphics, or distinct visual elements within them.

CSS Pixel

A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the reference pixel, which takes into account the physical dimensions of the display and the assumed viewing distance (factors which cannot be determined by content authors).

[patrickhlauke]

This definition could do with a bit of tightening/tweaking. Possibly something along the lines of

A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the reference pixel, which takes into account the physical dimensions of the display and the assumed viewing distance (factors which cannot be determined by content authors).

[alastc]

Looks good to me, thanks. Pull request updated.

[alastc]

Responding to comments in the 7th Feb survey:

@johnfoliot wrote:

What is thicker? If I have a "printer icon" that is 8px X 8px it will be larger than "3 CSS pixels" (right?),

Yes, assuming it is solid. So the printer symbol is the 'graphical object', and without associated text it would be 'essential for understanding'. If it is not solid, then the stroke/border needs to be greater than 3px to qualify for 3:1.

Thus this seems to indicate that in this case, the icon only needs to meet the 3:1 contrast ration. I don't think this is the intention

It is the intent, although it might be a small for an icon, it is bigger than the stroke of large text (as per the current colour contrast SC).

what is critical is the line/stroke width used in the icon, and not the icon itself (correct?)

For a solid icon it would be large enough, but if the icon is an outline, then the 'stroke' / border thickness would need to be > 3px (not possible for an 8px icon??).

Proposed change:
For single-color icons or graphical object where the line-stroke is at least 3 CSS pixels wide, the graphic has a contrast ratio of at least 3:1.

We have a whole host of possible 'graphical objects', some solid, some lines, some graduated, some moving?!! I think we need to keep the exception as simple as possible, if the 'graphical object' you need to perceive for understanding is over 3px square then is easier to see, and therefore the lower contrast threshold can apply. The LVTF went through quite a few examples, that principle seemed to work well for finding things that didn't need so much contrast.

If it weren't for the WCAG format we'd probably say "3:1 for graphics is ok unless it is small, then use 4.5:1".

Greg Lowney (no @ for github?) suggested a slight text change back to a previous iteration, but that change came from following the WCAG convention for exceptions, following the 1.4.3 example.

@KimberleeD wrote:

1. If someone passes contrast for the icon's outline, do they also need to pass contrast for the interior/content of the graphic? (I'm assuming yes)

No, if perceiving the outline is what you need in order to understand the icon then it would be the outline against the background of the icon. (If that failed then, you could possibly pass if the interior of the icon had good contrast against the outline and that were sufficient for understanding.)

Would that be at 3:1 or 4.5:1?

See the response to John above.

2. Does "4.5:1 against the adjacent color(s)" mean that the page color needs to pass against the outline of the icon, plus the outline ... plus the symbol/content... against the interior color...?

Nope, hopefully that is answered above.

I know I will be arguing with designers about their graphics and whether they meet this SC.

Yep, me to, so I tested it out with 10 of our designers first! :-)

Adam Lund wrote:

when there is text to accompany the image, which communicates the same information (is redundant)?

No, that is what the 'essential to understanding' is intended to convey.
And thanks for offering to help, yes please!

@mbgower commented:

Consider incorporating the following text (which appears later in the text) as an exception or a note:
That is not a requirement for:
A graphic with text embedded or overlayed that conveys the same information, such as labels and values on charts.
The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
The information is available in another form elsewhere on the page, or linked from the page.
The graphic is part of a logo or brand name.

I really think that "essential to understanding" covers this, but obviously it will be a big topic of the understanding document. We also had a comment earlier on (not from me!) to take that type of note out of the SC as it duplicates the core SC text.

[alastc]

Hi @shwetank,

You asked:

http://i.imgur.com/qsSD0VH.png or http://i.imgur.com/aUwHwwk.png
we can't have proper labelling because its an exam.
Would this fly as an exception according to this SC?

I would like to keep this under the 'essential to understanding' aspect, where the answers are not essential to understanding the exam question, but other aspects are:

• The blue boxes against the white background. These are currently 2.9:1, so they would need a stronger border or a slight tweak to the box colour.
• The lines going to sections of the brain are well-done because they are black with a little white halo, so small but good contrast against any adjacent colours.
• The sections of the brain, I don't know what the question was, but if those areas are important they should be distinguishable. They mostly have black borders and light colours, but a couple of areas merge in together, so some kind of overlay/border would help with that.

It is a good example, can we use that in the understanding document? (I.e. what's the licensing?)

Does that 'essential to understanding' interpretation seem reasonable? If not, we could add an exception similar to alt text:

Test: The graphical object is part of a test or exercise that would be invalid if presented with sufficient contrast or with associated text.

[shwetank]

Hi @alastc

A lot of times these courses have diagrams scanned from a book (would that come under 'photograph' and hence exempted?). It won't be possible to change any of the diagrams in that case as that would involve changing and republishing the entire back-catalog of the books and then scanning the new diagrams - a task nobody will do. A person might display an X-ray and making that conform to this SC would also probably not be possible without damaging the integrity of that x-ray (again, would this come under 'photograph'?). Sometimes anatomy diagrams need to show the muscles and other internal organs, and having to conform to the contrast requirements would be painful. Sometimes the use of translucency might be essential to understand the diagram which will again run counter to the SC.

Would it be possible to reframe this SC to apply to graphs, charts, icons and maybe simple illustrations? Either that or treat such complex diagrams as photographs or paintings (so that they are not required to have the contrast requirement). Because once we go in the territory of complex diagrams (like, but not limited to, the medical field) then as I have pointed out in above examples, things become very tricky.

In case of something like a test or exam, I think we would need to add an exception as you suggested. Big +1 to that.

Regarding the images I shared as example in my previous post, I am not sure of the licensing. However, the images linked here in this post are all from Wikipedia, so I think they are good enough to be used.

[alastc]

It sounds similar to the "essential" exception of 1.4.5:

Essential: A particular presentation of text is essential to the information being conveyed.

Instead of text, it would be the graphic... I think that would cover all those scenarios? And can be further demonstrated with examples in the Understanding doc.

[shwetank]

Instead of text, it would be the graphic... I think that would cover all those scenarios? And can be further demonstrated with examples in the Understanding doc

Yes, that sounds good to me (along with the exception regarding the test/exam discussed above). I think that should cover everything that I can think of atm.

[alastc]

I think the "essential" one covers the test/exam examples as well? Not providing the answers is essential!

[shwetank]

Yeah, makes sense!

[DavidMacDonald]

First bullet needs an "If, then". I think there could be an exception for photos:

The visual presentation of graphical objects that are essential for understanding the content or functionality have a contrast ratio of at least 4.5:1 against their adjacent color(s), except for the following:

• Thicker: If the minimum width and height of the graphical object is at least 3 CSS pixels, then the graphic has a contrast ratio of at least 3:1.
• Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement;
• Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.
• Essential: A particular presentation of the graphical is essential to the information being conveyed.
• Photographs: If the graphical object is a photograph of the natural world, then there is no contrast minimum.

GLOSSARY
Natural world: Material things that exist and have height, width and depth.

[alastc]

Hi @DavidMacDonald,

The lack of "if-then" for thicker keeps it to the same format as text contrast, should we change that?

Also, I started with a similar exception for photographs, but from the discussion with @bruce-usab the "sensory" exception was intended to cover photographs and more.

[DavidMacDonald]

the "sensory" exception was intended to cover photographs and more.

@bruce-usab I don't think the photo exception proposal a direct match to sensory experience ... what if the "primary intent" of the photo was not to provide a "sensory experience" but rather to increase understanding of the content.

In WCAG, the sensory exception was primarily meant for Picasso paintings etc...so alt text wouldn't have to explain every swirl. It wasn't really meant for photos of explainable things in the natural world. We expected alt text for those. I'd say leave the exception in for first draft.

[DavidMacDonald]

Hmmm... but it doesn't read as clearly as 1.4.3... let's see...

Thicker: Graphical objects with a minimum width and height of at least 3 CSS pixels have a contrast ratio of at least 3:1.

I think that's a better match.

[alastc]

Ok, I've updated 'thicker' (PR and description), thanks.

On the photographs, if you look at @shwetank's examples we need a fairly broad category of: stuff that would become invalid if you changed the appearance. I think the "sensory" is "essential" is a good approach, but of course we'll get more examples when it goes out to a wider audience...

[DavidMacDonald]

OK, let's see what the public says.

[awkawk]

merged to FPWD_review

[DavidMacDonald]

The First Public Working Draft FPWD, is a good test case of this. The orange boxes around the "proposed" SCs Mike Elledge asks:

Any concerns that the orange square for proposed SC does not meet contrast requirements?

I think this is a good test for the new SC 1.4.12 Graphic contrast. How would I evaluate this in an audit?

• Is the CSS box a graphic?
  I'd say yes.

• Is the CSS box is "essential"?
  I'd say yes, because it indicates that the section is a proposed SC.

There is a non graphical alternative, the word "Proposed". But there does not appear to be a provision for a visual text alternative under this SC. There is no exception where the important information is provided in another way such as in text.

So I don't know whether I'd pass this orange box or not... I'm leaning toward "no".... but I think the word "proposed" is a sufficient means of conveying the information and would like to see an exception

• an alternative to the essential information is available in text which is visible

Or

• ​an alternative ​means of visually displaying the essential information​ is provided. (e.g., visible text)

OR

Add to the understanding

• If the graphic is providing information that is already in text which provides the essential information, then the requirement of the Success Criteria has been met.

[alastc]

I think this is covered the core SC, a graphic is not “essential for understanding” if there is a visible text alternative.

There used to be an explicit exception for conforming alternates, but we had comments to take it out as it duplicates the core text (I think Wilco was one, what's his github handle?)

See the wiki page for a 1st draft understanding doc.