1. Graphics Contrast Quiz
Overview & Test graphics
This was something I first presented at a conference in Bristol,
and I have since added to with some of the changes that have happened since June.

2. © Copyright Nomensa Ltd.
Hello
Scope of the SC
Identifying images that are in scope
Testing images
Links are at:
As a quick introduction I am Director of Accessibility at Nomensa…
Not going to talk about why accessibility is important. There are many good talks on that, I’m going to assume you’ve seen one and pick up from there.
I’m also not going to introduce accessibility,
As a show of hands, how many people are familiar with the current WCAG guidelines?
I have collated the links used in the presentation, and I’ll show that again at the end.
© Copyright Nomensa Ltd.

3. Scope of Graphics Contrast SC

4. SC text
The visual presentation of graphical objects that are required 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.

5. “Required for understanding”
Means the SC does not apply to a graphic when:
It has text embedded or overlaid 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 in order 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.

6. Graphics contrast
Which graphics are relied on, and do they have sufficient contrast?
Taking this graphical page, only a few icons are actually required for understanding.

7. Graphics contrast
When graphics are relied on, and do they have sufficient contrast?
Those icons without text are required for understanding, so we test them.
Obviously black and white is fine, but a thin, medium grey on white isn’t so good.

8. Graphical object
Not every graphical object needs to contrast with its surroundings, only those that are required to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphics or colors.

9. Graphical object
What is the minimum you need to ‘see’ in order to understand it?

10. More complex graphics
If you delete the overlaps, can you still understand it?

11. More complex graphics
If you delete the overlaps, can you still understand it?

12. Gradients Original Low contrast removed - pass
Low contrast removed - fail

13. Simple diagrams
Pass – with text
Pass – with contrast
Fail

14. Exercise 1 – How many graphics are in scope?

16. 25

17. Testing icons

18. Testing more complex graphics

19. Testing more complex graphics

20. Discussion?
Any questions?