Informational Graphic Contrast (Minimum)

From Low Vision Accessibility Task Force

Updated version: Graphics Contrast

SC Shortname

Graphic 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:

  1. Thicker: where the minimum width and height of the graphical object is at least 3 CSS pixels 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.
CSS Pixels
The browser-calculated value of pixels, which may be different from the physical device pixels. Browsers set the measure of 1px in CSS as closely as possible to that of the reference pixel, which takes into account the assumed viewing distance. For example, 1px on a TV display at 3.5m away is much larger than 1px on a phone 30cm feet away. The CSS pixels on a high-resolution screen create text and objects that are the same size as a low-resolution screen if they both use CSS pixels.

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-width-test-v2.png

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

alt="Fail of this SC"
Graphics-example-xls-pie_04.png

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

alt="Pass"
500px-Graphics-example-xls-pie_02.png

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

alt="Pass"
500px-Graphics-example-xls-pie_06.png

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.

alt="Screen capture of 24px text."
Text24px.png
alt="Enlarged view of a word of 24px text."
350px-Text-enlarged-from-24px.png

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

Actions

Articles

Email

GitHub

Minutes

Resolutions

Surveys

Tools

TPAC 2016

  • TPAC Minutes - September 19, 2016
    • Jim: Number 9, Informational graphics. We've discussed it a lot, e.g. having a pie chart how do you get 4.5:1 for 5 colours? Perhaps using a pattern, or put a key on the thing. We came up with those but thought we'd leave it in anyway. Issues with colour blindness where you can't tell one piece from another.
    • MichaelC: Clarification, is this proposing a different thing to the same SC?
    • Joshue: wonders if it should be called Informational charts and graphics Contrast (Minimum)
    • Jim: The previous one was more interactive, this is static image that isn't interactive, but both are modifications to 1.4.3.
    • shawn: LVTF not sure about separate vs. grouped points and welcomes WCAG WG guidance on that in general
    • AWK: Not modifying 1.4.3, could be additional.
    • Kathy: Talking about many different things, again calling out 4.5:1, but then could be 3.5:1 for slices of a pie chart. There are other ways to make things distinguishable, and don't want to stifle creativity around how people can achieve that.
    • Jim: agree
    • Kathy: E.g. having different slices of the pie become interactive. There are many ways to do it, and there was a lot of push back against 4.5:1, because it conveyed specific information. So we came up with other ways of doing it, which was visually apparent (tested with real users with LV). If we have something that states a minimum contrast, we need to add some exceptions, and there are other ways to achieve that from a usability point of view.
    • Jim: Good feedback, we're still working on it.
    • Rachael: I've run into issues where visual distinction applies, this seems like a technique to achieve something rather than the requirement itself.
    • David: If we start limiting colours in the graphs, that will be a nightmare from a design perspective, I don't see how we can limit the colours without impacting other people. What is it contrasting against? The background? Each other? That needs some work.
    • Rachael: Contrast is one technique to clearly distinguish borders in graphics and maps.
    • AWK: In the task force, this is a slippery slope item. E.g. with an icon conveying information in a page (with alt text), it is functioning like text to convey the content, but without good contrast. E.g. a 'new' icon next to a movie in a listing. How to we make sure that sort of icon is accessible with contrast requirements, without impacting complex implementations like heat maps.
    • laura: Example: Status icons on an application's dashboard.
    • AWK: If you are a Christmas store with red & green icons...
    • Kathy: It is largely about single colour icons conveying information. (Not a problem if also has text.)
  • Jim's TPAC notes - 27 September 2016
    1. there are other design ways to make an informational graphic accessible besides 4.5:1. don't limit creativity.
    2. how is this different from you "can't use color alone"
    3. seems more of a technique rather than an SC.
    4. 4.5:1 contrast ratio with what

Wiki Pages

Retrieved from "https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/index.php?title=Informational_Graphic_Contrast_(Minimum)&oldid=2960"