This repository has been archived by the owner. It is now read-only.

Graphics Contrast #9

Closed
allanj-uaag opened this Issue Sep 15, 2016 · 28 comments

Comments

Projects
None yet
@allanj-uaag
Contributor

allanj-uaag commented Sep 15, 2016

Current version of SC and Definitions

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

Icon shown at 100px wide down to quite a small version.

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.

Fail of this SC

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

Pass

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

Pass

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.

Screen capture of 24px text.
Enlarged view of a word of 24px text.

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

New Techniques

Related Information on LVTF WIKI

@joshueoconnor joshueoconnor added the LVTF label Sep 18, 2016

@allanj-uaag allanj-uaag changed the title from Informational Graphic Contrast (Minimum) (LV) to Informational Graphic Contrast (Minimum) (LV) !!ready for review Nov 17, 2016

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Nov 21, 2016

Contributor

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

Contributor

alastc commented Nov 21, 2016

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

@WilcoFiers

This comment has been minimized.

Show comment
Hide comment
@WilcoFiers

WilcoFiers Nov 23, 2016

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.

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.

@jnurthen

This comment has been minimized.

Show comment
Hide comment
@jnurthen

jnurthen Dec 6, 2016

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

jnurthen commented Dec 6, 2016

  • 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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 6, 2016

Contributor

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.

Contributor

alastc commented Dec 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 7, 2016

Contributor

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.

Contributor

alastc commented Dec 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 8, 2016

Contributor

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.

Contributor

alastc commented Dec 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 9, 2016

Contributor

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.

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

Contributor

alastc commented Dec 9, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 13, 2016

Contributor

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.

Contributor

alastc commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@AmeliaBR

AmeliaBR Dec 13, 2016

@alastc
Thanks Alastair,

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

@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

This comment has been minimized.

Show comment
Hide comment
@allanj-uaag

allanj-uaag Dec 15, 2016

Contributor

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

Icon shown at 100px wide down to quite a small version.

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.

Fail of this SC

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

Pass

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

Pass

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.

Screen capture of 24px text.
Enlarged view of a word of 24px text.

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

New Techniques

Related Information on LVTF WIKI

Contributor

allanj-uaag commented Dec 15, 2016

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

Icon shown at 100px wide down to quite a small version.

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.

Fail of this SC

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

Pass

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

Pass

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.

Screen capture of 24px text.
Enlarged view of a word of 24px text.

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

New Techniques

Related Information on LVTF WIKI

@allanj-uaag allanj-uaag changed the title from Informational Graphic Contrast (Minimum) (LV) !!ready for review to Informational Graphic Contrast (Minimum) (LV) -- Updated 15 Dec 2016 Dec 16, 2016

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 10, 2017

Contributor

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.

Contributor

mbgower commented Jan 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 10, 2017

Contributor

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"

Contributor

mbgower commented Jan 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 11, 2017

Contributor

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?

Contributor

mbgower commented Jan 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 11, 2017

Contributor

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?

Contributor

mbgower commented Jan 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Jan 17, 2017

Contributor

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

Contributor

DavidMacDonald commented Jan 17, 2017

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

This was referenced Jan 17, 2017

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 17, 2017

Contributor

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

Contributor

mbgower commented Jan 17, 2017

@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

This comment has been minimized.

Show comment
Hide comment

@allanj-uaag allanj-uaag changed the title from Informational Graphic Contrast (Minimum) (LV) -- Updated 15 Dec 2016 to Graphic Contrast (Minimum) (LV) -- Updated 29 Jan 2017 Jan 30, 2017

@allanj-uaag allanj-uaag changed the title from Graphic Contrast (Minimum) (LV) -- Updated 29 Jan 2017 to Graphic Contrast (LV) -- Updated 29 Jan 2017 Jan 30, 2017

@lseeman

This comment has been minimized.

Show comment
Hide comment
@lseeman

lseeman Jan 30, 2017

Contributor

can we add a technique to achive this via personalization

Contributor

lseeman commented Jan 30, 2017

can we add a technique to achive this via personalization

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Jan 31, 2017

Contributor

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.

Contributor

alastc commented Jan 31, 2017

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Feb 1, 2017

Contributor

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.

Contributor

alastc commented Feb 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@shwetank

shwetank Feb 8, 2017

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?

shwetank commented Feb 8, 2017

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

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Feb 8, 2017

Contributor

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

Contributor

alastc commented Feb 8, 2017

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

@allanj-uaag

This comment has been minimized.

Show comment
Hide comment
@allanj-uaag

allanj-uaag Feb 10, 2017

Contributor

see pull request #100

Contributor

allanj-uaag commented Feb 10, 2017

see pull request #100

@awkawk

This comment has been minimized.

Show comment
Hide comment
@awkawk

awkawk Feb 27, 2017

Member

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

Member

awkawk commented Feb 27, 2017

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

@awkawk awkawk reopened this Feb 27, 2017

@spanchang

This comment has been minimized.

Show comment
Hide comment
@spanchang

spanchang Mar 21, 2017

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,

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 alastc changed the title from Graphic Contrast (LV) -- Updated 29 Jan 2017 to Graphic Contrast Mar 22, 2017

@alastc alastc changed the title from Graphic Contrast to Graphics Contrast Mar 22, 2017

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Mar 23, 2017

Contributor

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.

Contributor

alastc commented Mar 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@joshueoconnor

joshueoconnor Nov 15, 2017

Contributor

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.

Contributor

joshueoconnor commented Nov 15, 2017

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.