Visual Designer Responsibilities Mapping

From Education & Outreach

Parent document:

Visual Design

Visual Design focuses largely on the look and feel of an application, as an end user would experience it, visually or otherwise. This includes specifying original design of interface elements and layout, choosing fonts and colors, and more. While UX design is focused on how something works, visual design is focused on how it looks and feels.

Key Deliverables include

  • Style guides
  • Page comps
  • Design mockups
  • Image files
  • Etc.

Tasks include

  • Visual styling
  • Logos and branding
  • Animation and iconography design
  • Etc.

Example job titles for this role

Visual Designer, Web Designer, User Interface (UI) Designer, Graphic Designer

Visual Design Checkpoints: Starter List

Here is a list of checkpoints for Visual designers to get started. If these design checkpoints aren't met, your design can cause significant barriers to users.

This list is taken from the full list of Visual Design checkpoints.

For all role checkpoints, see the [Checkpoint Full List].

ID WCAG SC Conformance Level Content Type Checkpoint Main Role Role Ownership
Primary Secondary Contributor(s)
INP-017 2.4.7 AA Input Methods Every element that receives keyboard focus is designed to display a visible focus indicator. Design Visual Design UX Design none
CSS-006 1.3.3 A CSS Shape and location are never used as the only way to convey information and relationships between page components. Design Visual Design UX Design Content Authoring
CSS-009 1.4.1 A CSS Color is never used as the only way to convey information, context, indicate selection or the presence of errors. Design Visual Design UX Design Content Authoring
IMG-018 1.1.1 A Images and Graphs Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information. Design Visual Design UX Designer none
CSS-010 1.4.1 A CSS For a link that is not underlined and in a paragraph text, its text color is sufficiently contrasted by providing a luminosity ratio of at least 3:1 against its surrounding text. Design Visual Design none none
CSS-011 1.4.3 AA CSS Regular-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 4.5:1. Design Visual Design none none
CSS-012 1.4.3 AA CSS Large-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 3:1. Design Visual Design none none
1.3.1 A Navigation Active objects and other calls to action are visually identifiable as such. Design Visual Design none none
3.2.4 AA Navigation Navigational graphics and icons used throughout the site or application are designed to always serve the same function and or meaning. Design Visual Design UX Design none
CSS-013 1.4.4 AA CSS Users can resize the text on the page up to 200% without any loss of content or functionality. Design Visual Design Front-end Development UX Design
CSS-019 1.4.10 AA CSS Displaying content on narrower screens or magnifying it does not cause multidirectional scrolling. Design Visual Design Front-End Development UX Design
FRM-022 3.2.4 AA Form Interactions Visual indicators are presented to support error messages when errors are returned. Design Visual Design UX Design none
FRM-031 3.3.2 A Form Interactions Instructions provided in forms are presented in a clear and unambiguous way. Design Visual Design UX Design none
IMG-021 1.4.5 AA Images and Graphs Unless a particular presentation of text is essential to the information being conveyed, all images that contain text are only used for purely decorative purposes. Design Visual Design UX Design none

Case Study: How to use the Starter List

A good way to get familiar with the checkpoints is to do a short case study. Think about how you might tackle the checkpoint in your role.

Then, think of how meeting this checkpoint impacts an end user.


IMG-018: Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information.

Primary Role: Visual Designer

"As the primary owner of this checkpoint, I will ensure I don't use color alone when I'm creating a highly visual graphical representation of data (numbers, relationships between items, etc.) - for example a pie chart, line graph, bar graph or any other infographic that relies heavily on symbols or color.

I will work with the content author or stakeholder to ensure there's an alternative way of perceiving the data and relationships between the data sets. This could be a matrix/ table, or bullet list, or simple text format.

The secondary owner here is the UX designer, who will assist me in ensuring there is space for both the visual representation (also known as "complex images") on the page along with the text alternative, which should be adjacent to the visual design so it's accessed easily.

At the same time, the visual representation is ideally not navigable by keyboard and screen reader, as it is likely not linear. A good practice is to make the visual - a pie chart, bar graph, line graph, etc. an image and add a short description to it to summarize it. Example: "Graph showing the most downloaded songs between January and December 2022".

Then the text alternative for the data will provide full details."

Secondary Role: UX Designer

The secondary owner of the checkpoint is the UX Designer. They design the page layout, functionality and interactions with the content on the web page or screen.

The UX designer should support the Visual Designer when they create both the visual representation of data and the text alternative. They ensure that all users can access both through navigation.

End user persona: Lee, an online shopper who is colorblind

Lee is colorblind and encounters barriers when shopping online. He has one of the most common visual disabilities that affect men: red and green color blindness. Lee frequently shops online and sometimes encounters problems on websites and with apps where the color contrast of text and images is not adequate and where color alone is used to indicate required fields and sale prices.

When red and green color combinations are used, Lee cannot distinguish between the two, since both look brown to him. It is also very difficult for him to make product choices when color swatches are not labeled with the name of the color.

Read Lees's full story and learn about other design checkpoints that benefit users like him.


Exercise: Role-based Decision Tree Example

Who is the primary owner of checkpoint IMG-018?

Let's get started on IMG-018: Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information.

Using the Role-based Decision Tree, let's see how we might assign ownership.

Step A: Is this checkpoint business-related?

No. Of course Business Analysts want the business value to be conveyed through the information to all users, but they not involved at this level.

Step B: Is this checkpoint about content authoring?


Step C: Is this checkpoint about UX design?

No. This is about the visual communication of data through graphics, not the interactions or page layout.

Step D: Is this checkpoint about visual design?

Yes. This checkpoint, and these elements, are the responsibility of the visual designer to create and make accessible. Graphs, charts, and the other highly visual materials must have another indicator of the values and relationship between values, other than what is presented in a graphic format. For example, a pie chart may have three portions, one green representing 60%, another red representing 30% and yellow representing 10%. But for those users who cannot perceive colour, the values, e.g. 60%, must also be presented in text.

A legend, where the values are in a simple text list, would also help screen reader users access that information without having to interact with a non-liner representation of the same data, e.g. a pie chart.

The checkpoint is precisely are about selections of color and presentation. Therefore, the Visual Designer provides the final choices in nearly all such situations.

Step E: Is this checkpoint about front-end development?


Step F: Is this checkpoint about testing?


The exercise ends at Step D, as it has been determined that the primary owner of this checkpoint is the Visual Designer.

Does this checkpoint require a secondary owner?

Yes. The UX Designer, as they have designed the page or screen layout and there may be changes to the space if the graphics are updated and/or text content is added.

Does this checkpoint require a contributor?


Try it for yourself!

Try the exercise with another checkpoint from the Starter List above.