Graphics Contrast

[allanj-uaag]

Current version of SC and Definitions

• Current version for viewing | Current version for editing
• Definition of CSS pixels for viewing | Definition of CSS pixels for editing
• SC in full draft guideline
• Understanding doc for viewing | Understanding doc for editing | Understanding doc in master

Open issues and Surveys

(Links to surveys require W3C Member access)

Open issues: SC Status page

Success Criteria (SC) Shortname

Graphics Contrast

SC Text

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 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.

Suggested Priority Level

Level AA

Related Glossary additions or changes

CSS Pixels

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 CSS Values and Units Module Level 3 [reference pixel](https://www.w3.org/TR/css3-values/#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).

What Principle and Guideline the SC falls within.

Principle 1, Guideline 1.4

Description

The intent of this success criterion is to apply the contrast requirements to important graphical elements in a similar way that it is applied to text in 1.4.3 Contrast (Minimum).

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.

The term "graphical object" is intended to apply to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. Not every graphical object needs to have sufficient contrast with its surroundings, only those that are required to understand what the graphic is conveying.

Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The term essential information is used as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. 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.

For designers developing icons that need to be perceived clearly, the following is an example of several sizes of icon having sufficient contrast at different sizes.

The thicker lines (3px or more) have 3:1 contrast (#949494 on #FFFFFF), the small lines (2px or less) need a darker grey (#777777 on #FFFFFF).

Benefits

The intent of this Success Criterion is to provide enough contrast for graphics that convey important information so they can be perceived by people with moderately low vision.

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 4.5:1 or greater can make these items more distinguishable when the person does not see a full range of colors and does not use assistive technology.

Examples

1. Status icons on an application's dashboard (without associated text) have a 4.5:1 minimum contrast ratio.
2. A pharmacy web site uses a warning image to indicate allergic reactions between medications. The image has a 4.5:1 minimum contrast ratio between the image's colors and its background.

Pie Charts

Pie charts make a good case study for this success criteria, the following pie charts are intended to convey the proportion of market share each browser has. NB: The actual figures are made up, these are not actual market shares.

Fail: The following pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not over 3:1.

Not applicable: The following pie chart has visible labels and values that convey equivalent information to the graphical objects (the pie slices):

Pass: The following pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects):

Note that on the last example, the spaces between the small slices is less than 3px wide, therefore those slices need a 4.5:1 contrast ratio against the white background.

Many other examples have been worked through on different graphic types.

Notes on how the contrast and thickness were derived

The contrast levels are transferred directly from the current 1.4.3 Contrast (Minimum).

The size of 3px for 'thicker' was selected as it aligns with the large-text requirement of 1.4.3 Contrast (Minimum).

The following images show 24px (large) text, and a zoomed in view of a 24px word to show the pixels that make it up. The "i" character is 3 pixels wide.

Testability

For each graphic that conveys important information:

1. Change the viewport width until the graphic is the smallest it can be at the default zoom level.
2. Check whether there is an input agnostic way of showing more information (e.g. pop-overs or enhanced contrast shown with mouse, touch or keyboard interaction), if so that graphic / graphical object can be skipped.
3. Check that each remaining graphical object has a contrast ratio of at least 3:1 with adjacent colors;
4. If the thickness of the graphical object or its adjacent color(s) is less than 3px wide & high, check it has a contrast ratio of 4.5:1.

Expected Results

• # 3 and # 4 are true.

See Graphical element examples for specific examples.

Techniques

Existing Relevant Techniques for 1.4.3

• G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
• G183: Using a contrast ratio of 4.5:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

New Techniques

• Using sufficient contrast for images that convey information (Draft)
• use other means of conveying information in a graphic
  • include labels and values with the graphic
  • contrasting differentiated pattern
  • include contrasting lines between adjoining colors.
  • include data within graphic (red piece of pie chart - white circle within red piece - 37% written in white circle)
  • Icon Font with an On-Screen Text Alternative

Related Information on LVTF WIKI

[alastc]

@allanj-uaag Could you edit the SC text so the bullet work please? It's rather difficult to read at the moment.

[WilcoFiers]

I left a lot of feedback on #10, most of which are applicable to this SC as well, so I won't repeat them.

Alternative: Graphical elements that have an alternative conforming version available from the same page have no contrast requirement

I don't think explicitly mentioning the possibility of a conforming alternate version in this SC is right. It gives the impression that that might not be the case for other criteria. I would much prefer adding a note that points this out, if we want to mention it at all.

[lauracarlson]

• Survey Results - 22 November 2016
• Minutes - 29 November 2016
• RESOLUTION: Laura and Alistair to work on an updated proposal on Informational Graphic Contrast (Minimum)

[jnurthen]

• this is so subtly different than the prior SC that I see no reason not to merge them
• after reading it multiple times I am still confused as to what requires the contrast - content totally within the image, and/or the image relative to the page?
• the example of the 'wider' text is confusing here since the SC specifically is for graphics
• the flower pots example is confusing - what is the reason for showing the total width of each picture, and doesn't the last example fail the width yet that is not indicated?
• It is hard to see how any of the 3 examples are required per the current text of the SC. 1 and 3 are basically the same, mentioning differences of colors within the image, but the standard only requires contrast to the 'immediate surrounding background'. Perhaps the SC text needs to be expanded to include 'adjacent content within the image' ? And example 2 just doesn't convey enough info, such as the width of the lines, colors used, etc.

[alastc]

Thanks @jnurthen, and to anyone looking at this, there is one critical principle that needs to be understood & agreed, and then things like wider text and the examples can be refined. It also defines the difference between this SC and the interactive one.

From my email to the WCAG-WG list:
Several people noted the difficulty with testing contrast on complex graphics which have multiple colours, which is true on the face of it.

I think there is a reasonable way to approach this, which I tested by presenting it to 8 people in our design team. They didn’t go pale or get angry, and after a couple of examples it seemed quite reasonable.

We obviously haven’t conveyed it in the SC text well enough yet, but if a few of the respondents could read this and think through the objections, I think we can clear that stumbling block:

Graphics Contrast Testing Explanation

The nub of it is that the test should be: For each element of a graphic required for understanding, it is discernible.
That is very different from contrast-testing every combination of elements, and IMHO much more feasible.

In that page I work through a couple of the examples to show what’s needed. It is also worth noting that the current “1.4.1 Use of Color“ catches most current “difficult” examples, the contrast aspect would help catch the remaining ones.

I’ve worked through a dozen examples, I’m happy to tackle more so long as they pass the color-alone SC and are different from ones I’ve already done.

[alastc]

After a catchup call, a slight refinement to the SC text is:

The visual presentation of graphical elements that are essential for understanding the content have a contrast ratio of at least 4.5:1 against their immediate surrounding background, except for the following:

• Thicker: where the minimum width and height of the element is at least 3px the graphic has a contrast ratio of at least 3:1
• Photographs or paintings have no minimum contrast requirement
• Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.

That uses 'essential' instead of 'important', adds 'for understanding the content', updates the 'thicker' definition, and adds photographs/paintings as an exception.

[alastc]

I've made some changes to the SC, the latest is available here, or the exact version at this time.

This slightly updates the SC text (as per comment above) and improves the description and examples. There are a few things I'll call out for particular people:

Thick / stroke width

Addressing comments from @joshueoconnor @jnurthen @michael-n-cooper and Michael Gower

The text example has been moved out of the description into a section "Notes on how the contrast and thickness were derived" to prevent confusion. The flowerpot example has been updated so the 'thin' one has more contrast than the 'thick' one.
The exception for 'thicker' has also been refined so it applies to shapes or lines.

Immediate surroundings & multiple colours

Addressing comments from @awkawk, Kathleen, Rachael, MichaelG & James

There were several comments around how you define a graphical element, and how different colours interact. I think the "are essential for understanding the content" part of the SC should address this, and the new examples (showing pass/NA/fail) should also help.

That was also the topic of my "critical principle" email, and feedback from James & @WilcoFiers indicates that has been addressed by the further examples.

I've just come across the WAI-ARIA graphical objects concept, which I'm exploring as a potential spec to align with, but it at least indicates that it is definable.

For Bruce - We've added an exclusion for pictures and paintings. It isn't that well defined in WCAG 2.0, not enough to point to or copy, but hopefully that's enough.

PX as unit for thickness

For Wilco and MichaelC

We've had the pixel/PT discussion recently regarding the definition of large text in 1.4.3.
@patrickhlauke & I have made the argument (successfully I think) that PX is the more appropriate unit to use:
https://lists.w3.org/Archives/Public/w3c-wai-gl/2016AprJun/0298.html

We weren't allow to change the use of PT in the definitions of 2.0, but going forward we should use PX because:

• All the other units (including PT) are anchored on CSS-PX anyway. Any testing procedure created will have to fall back to CSS-PX units as the basis at some stage.
• Digital designers (and the tools) tend to think in (CSS) pixels.
• People often assume 1pt = 1px, which isn't actually the case and makes the text smaller in practice because 1pt = 1.33px
• The CSS-PX is based on a reference pixel that includes viewing distance as part of the definition.
• CSS-PX is the most reliable unit across devices because if the manufacturer screws it up, websites look too big or too small to the general public.

Note that we mean the "CSS pixel" rather than "Device pixel", which as PPK's various publications make clear is the better unit to use. Perhaps that could be clearer in the description?

I've also added to the testing procedure to ensure that the image tested is the smallest possible at the default zoom level.

Important vs essential

For Andrew and Wilco:
We've switched to essential (as defined in WCAG2.0), and removed the explicit exception for non-essential, as it is covered in the main text.

[alastc]

Adding a couple of comments from Bruce Bailey:

1. Improved exclusion text for the paintings / pictures aspect:

Definite improvement, I've replaced the current exclusion with:
Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement;
Added to this version of the SC.

2. Questioning whether to include the definition of "graphical elements".

I'm not sure about that, I think we need to be clear about what is needed for testing this, as 1.4.3. says "of text", we need an "of XXXX".

I'm getting in touch with one of the editors of ARIA graphics module as that includes similar definitions. However, I would have to munge two of the definitions together (graphic object and symbol) as it should cover both those levels.

E.g.
"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."

If other people are happy that the SC does not need to have a glossary definition of "graphical element" linked directly from the SC text, then I don't feel strongly about it being a glossary definition, but we do need something for the understanding document.

[alastc]

Amelia Bellamy-Royds replied to me and kindly allowed me to quote her entirely:

It's an interesting question, and not one we've discussed.

As you note, the ARIA roles model definitions only apply directly to graphics with a DOM structure (SVG or HTML). So for example, graphics-object was specifically about distinguishing a grouping of elements that represent a complex object from a grouping of distinct-and-equal elements. The repeated emphasis on "semantic meaning" in a lot of the definitions is a reflection of the fact that many SVG editors add grouping elements for all sorts of reasons, and when we started work, some browsers were exposing all of these as groups in the accessibility tree.

That said: the concepts would apply to bitmap representations of the same images, even without the DOM structure.

A graphics-object in the role taxonomy is very similar, I think, to your "graphical element" definition.

I am a little concerned about the phrase "graphical element" because I think it might be confused with DOM elements. E.g., someone thinking the is the graphical element, instead of the meaningful parts of the image. You've got a couple good examples of icons where the contrast between the edges of the icon image and the page background is fine, but the actual meaningful part of the image doesn't have sufficient contrast.

Alternatively, someone reading "graphical element" could interpret it that every or element in an SVG is a graphical element, and try to insist they should all have contrast with each other, even when they are just parts of the same icon that is distinguished by its overall shape.

So if you want to call them graphical objects, I think that would be reasonable and wouldn't conflict. I think you've drafted a fair adaptation of our definition for your purposes:

"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."

If you keep the term you're currently using, clearly emphasize that it isn't necessarily about elements in the DOM, but about meaningful parts of the image. Either way, you can add a link to the graphics-object role as a related concept.

In the Graphics roles module, graphics-symbol is a sub-class of graphics-object, so you shouldn't need to worry about that distinction. It's mostly about giving extra information to assistive tech, for navigation or for substituting alternative symbols.

The role module doesn't really focus on which parts of an object are important for visually interpreting the meaning, so that is unique for your use case, but I think you emphasize that enough elsewhere in your criteria.

I have updated the SC text with 'graphical object' and the new definition. Dec 13th version of the SC text.

[AmeliaBR]

@alastc
Thanks Alastair,

You currently have a couple spots in the Description section where you revert back to "graphical element", but otherwise looking good.

[allanj-uaag]

Current DRAFT 15 Dec 2016

SC Shortname

Informational Graphic Contrast (Minimum)

(Please note: this SC is separate from the Interactive Element Contrast (Minimum) SC.

SC Text

The visual presentation of graphical objects that are essential for understanding the content have a contrast ratio of at least 4.5:1 against their immediate surrounding background, except for the following:

1. Thicker: where the minimum width and height of the graphical object is at least 3px the graphic has a contrast ratio of at least 3:1;
2. Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement;
3. Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.

Suggested Priority Level

Level AA

Related Glossary additions or changes

essential

WCAG 2.0's definition of essential

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 visual objects within them.

immediate surrounding background

a 3px area adjacent to the entire length of the outer perimeter of the graphical object.

What Principle and Guideline the SC falls within.

Principle 1, Guideline 1.4

Description

The intent of this success criterion is to apply the contrast requirements to important graphical elements in a similar way that it is applied to text in 1.4.3 Contrast (Minimum).

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.

The term "graphical object" is intended to apply to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. Not every graphical object needs to have sufficient contrast with its surroundings, only those that are required to understand what the graphic is conveying.

Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The term essential information is used so that many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. 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.

For designers developing icons that need to be perceived clearly, the following is an example of several sizes of icon having sufficient contrast at different sizes.

The thicker lines (3px or more) have 3:1 contrast (#949494 on #FFFFFF), the small lines (2px or less) need a darker grey (#777777 on #FFFFFF).

Benefits

The intent of this Success Criterion is to provide enough contrast for graphics that convey important information so they can be perceived by people with moderately low vision (who do not use contrast-enhancing assistive technology).

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 4.5:1 or greater can make these items more distinguishable when the person does not see a full range of colors and does not use assistive technology.

Examples

1. Status icons on an application's dashboard have a 4.5:1 minimum contrast ratio.
2. A pharmacy web site uses a warning image to indicate allergic reactions between medications. The image has a 4.5:1 minimum contrast ratio between the image's 2 colors as well as between the image and its background.

Pie Charts

Pie charts make a good case study for this success criteria, the following pie charts are intended to convey the proportion of market share each browser has. NB: The actual figures are made up, these are not actual market shares.

Fail: The following pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not over 3:1.

Not applicable: The following pie chart has visible labels and values that convey equivalent information to the graphical objects (the pie slices):

Pass: The following pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects):

Note that on the last example, the spaces between the small slices is less than 3px wide, therefore those slices need a 4.5:1 contrast ratio against the white background.

Many other examples have been worked through on different graphic types.

Notes on how the contrast and thickness were derived

The contrast levels are transferred directly from the current 1.4.3 Contrast (Minimum).

The size of 3px for 'thicker' was selected as it aligns with the large-text requirement of 1.4.3 Contrast (Minimum).

The following images show 24px (large) text, and a zoomed in view of a 24px word to show the pixels that make it up. The "i" character is 3 pixels wide.

Testability

For each graphic that conveys important information:

1. Change the viewport width until the graphic is the smallest it can be at the default zoom level.
2. Check whether there is an input agnostic way of showing more information (e.g. pop-overs or enhanced contrast shown with mouse, touch or keyboard interaction), if so that graphic / graphical object can be skipped.
3. Check that each remaining graphical object has a contrast ratio of at least 3:1;
4. If the thickness of the graphical object is less than 3px wide & high, check it has a contrast ratio of 4.5:1.

Expected Results

• # 3 and # 4 are true.

See Graphical element examples for specific examples.

Techniques

Existing Relevant Techniques for 1.4.3

• G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
• G183: Using a contrast ratio of 4.5:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

New Techniques

• Using sufficient contrast for images that convey information (Draft)
• use other means of conveying information in a graphic
  • include labels and values with the graphic
  • contrasting differentiated pattern
  • include contrasting lines between adjoining colors.
  • include data within graphic (red piece of pie chart - white circle within red piece - 37% written in white circle)
  • Icon Font with an On-Screen Text Alternative

Related Information on LVTF WIKI

[mbgower]

I'm not sure where to comment on the Graphics Contrast Testing Explanation, so I'll included it here.
I think this approach is interesting, but Example 2 is not appropriate. Since you have included the text percentages on the pie chart itself, it merely becomes an exercise in Contrast Minimum. I strongly urge you to remove the percentages from the pie (e.g., "20.4%). At that point, the Example 2 pie chart will not involve any Use of Color considerations (because of the labels) nor the text Contrast Minimum considerations (because the black text is now all on the white background). It is now strictly concerned with graphic contrast -- differentiating between the pie chart and its background, and between the wedges. I would advocate that this be a failure. By removing the percentages entirely, this happens. Then you can make a point of how to overcome this -- either by upping the contrast between wedges or by including the percentages as text.

[mbgower]

I suggest adding an exception that covers the text equivalent you list later inside the content:

A graphic with text embedded or overlayed that conveys the same information, such as labels and values on charts.
The information is available in another form elsewhere on the page, or linked from the page.

This is a crucial exception to understand, but it needs to be phrased clearly and explicitly, and I think listed at the top as a clear exception is the way to do this. When it comes to techniques, I also would like a bit more language around this second point, as I'm not comfortable with someone hunting around for the information elsewhere on the page. It needs to be more obvious and explicit. Consider the verbiage about proximity in these general techniques: " G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content"; "G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description"

[mbgower]

I'd like to understand what folks perceive as the limit of the definition of "essential for understanding the content"
As an example, on this github page, the read-only comments previously posted by users are delineated by very low contrast rule lines and a low-contrast background 'header' section which lists the author's name and timestamp plus a toolbar (limited a React control for items one hasn't authored; plus Edit and Delete controls for comments one authored).
Is any of this considered "essential". I would assume the toolbar would fail the proposed Interactive Element Contrast, but would any of these elements fall under the current proposed SC for Informational Graphics?

[mbgower]

In one of the examples, it states there is a pharmacy website warning icon:

image has a 4.5:1 minimum contrast ratio between the image's 2 colors as well as between the image and its background.

I'm not clear on why the two colors used in the image need to have a 4.5:1 ratio between them. What does it matter if the icons colors do not have sufficient contrast amongst themselves? I don't think you can say that part of an icon contains "semantic meaning", in the same way a piece of a pie chart does. As long as the icon is distinguishable from the background to a sufficient contrast shouldn't it pass?

[DavidMacDonald]

Is there an overlap with Issue #36 and #10?

[mbgower]

@DavidMacDonald , yes I would see an overlap between the first bullet in #36 and this SC.
It seems like Clear content is mashing up "perceivable", as represented here, with "understandable", as represented by the concept of "clear".
I would like to see contrast considerations removed from Clear Content so that it is primarily concerned with the principle of Understandable.

[joshueoconnor]

Surveyed: https://www.w3.org/2002/09/wbs/35422/SC_review_Jan2017/

[lseeman]

can we add a technique to achive this via personalization

[alastc]

That's certainly possible (and doesn't affect the upcoming pull request), but it would be equivalent to an alternative version I think? Or at least it wouldn't be a required technique.

[alastc]

Kim wrote (in the survey):

I agree we need more contrast, but 4.5:1 may be too high. (May not be realistic for all sites, still thinking about this one.)

It aligns with the text-contrast one, with a similar exception for 3:1 for thicker lines/objects. Please have a look through the examples linked in the description above, I found doing those really helped make sure it was feasible.

[shwetank]

I just need some more clarity on this.

Let's consider on online examination of a course in medical college, and students are given this http://i.imgur.com/qsSD0VH.png or http://i.imgur.com/aUwHwwk.png

Over here, we can't have proper labelling because its an exam.

Would this fly as an exception according to this SC? It's not clear, because it clearly has semantic value and its not for aesthetic purposes, can't be labelled and further info can't be provided anywhere on the page or even linked to it (because its an exam page), is not part of a logo or brand name - Yet, I still feel this should be exempted from the SC.

In the field of online exams we might have a lot of these cases where we can't change the diagram (Especially in the medical fieled where accuracy is especially important). We can't label them because sometimes the questions are about identifying the labels according to the diagram.

What do we do in this case?

[alastc]

Hi @shwetank, we've moved over to the pull request #100, so I'll reply there...

[allanj-uaag]

see pull request #100

[awkawk]

Updated the issue description to reflect the FPWD text and reopening issue.

[spanchang]

Consider qualifying graphical objects with 'that have no significant text within' (or the like. This will make the normative requirement more explicit.
At present one has to interpret the term 'essential' as defined to make a determination that an icon such as a print icon with an image of printer + the word "Print" within is excluded by 1.4.12 (but covered by 1.4.3).
The 'intent' notes, "The term "graphical object" is intended to apply to stand-alone icons such as a print icon (with no text)".
Thanks,

[alastc]

Hi @spanchang,

This has come up before, we started out with an explicit reference to text, but we had comments to remove that aspect.

The reasoning was that part of being ‘essential’, means that you have to discern the graphical object to understand the content/functionality. If there is text that says the same thing (and meets WCAG), then the graphic is not essential.

If we call out text as an exception, we'd need to specify that it isn't just any text, it is text that fulfils the same purpose as the graphic. Otherwise people could embed any old text into a complex graphic and bypass the SC.

Assuming that there is a reasonable explanation of what 'essential' means for this SC (I've been drafting an example here), can you live with not calling that out in the SC text? It would help to keep the SC text concise and accurate.

[joshueoconnor]

I'm wondering if "Graphical objects - Parts of graphics required to understand the content," needs to "Graphical objects - Parts of graphics required to understand the content or purpose" as graphical elements may perform a function that may not be clear due to illegibility/poor contrast etc.