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. https://alastairc.ac/tests/gq/

© Copyright Nomensa Ltd. Hello Scope of the SC Identifying images that are in scope Testing images Links are at: https://alastairc.ac/tests/gq/ 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.

Scope of Graphics Contrast SC

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.

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

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.

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.

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.

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

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

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

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

Simple diagrams Pass – with text Pass – with contrast Fail

Exercise 1 – How many graphics are in scope?

25

Testing icons

Testing more complex graphics

Testing more complex graphics

Discussion? Any questions?