By: Tamara Sawyer, Minnesota Management and Budget and Jennie Delisi, Office of Accessibility

Web Content Accessibility Guidelines (WCAG) – most people do not consider documents when they read this phrase. Minnesota does! Our state digital accessibility standard covers more than Section 508 (as amended). It specifically includes WCAG 2.0 A and AA success criteria. 

The standard also applies to internal and external digital information, including documents. Because of this, it applies to PDFs. So, why would Minnesota consider applying the next version of WCAG – WCAG 2.1 to PDFs? Here are just a few of many reasons:

• Minnesota’s Executive Orders are published as PDFs, such as Executive Order 19-15 (PDF) that requires our state to hire people with disabilities.     
• Minnesotans use PDFs everywhere (phone, tablets, laptops…). 
• PDFs are part of communication campaigns for both our staff and our publicly available information.
• PDFs are key parts of conference, training, and meeting materials.
• Agencies, the Governor’s office, and the legislature use PDFs for official communications.

Many people have questions about how WCAG 2.1 will affect PDFs.

• How will this improve access to PDFs by people with disabilities?
• Are the impacts different for simple PDF workflows versus more complex ones?
• Will the updated standard apply to PDFs?

With answers to these questions and more, we have so much information we needed two installments! We divided them to support different styles of PDF creators and testers. This month covers basic information, including information needed to create simple documents. Do you work with more complex PDFs? Be sure to check out next month’s newsletter! It will include information like considerations for using JavaScript, InDesign, and complex charts and graphs.

What You Need to Know – Average/Light User

If you routinely create PDFs using Microsoft Word, PowerPoint, and Excel, and you stick with the basics found in most documents (headings, text, images, tables, hyperlinks, and charts and graphs), then this section is for you. There are just a few things you should be aware of once we start following the updated standard.

While there are 12 new A and AA level success criteria, some will not apply to PDFs. In addition, many of those will only apply in special situations when people create unusual content or do specific coding for special circumstances. So, let’s look at what the average PDF creator will need to know.

1.4.11: Non-text Contrast – Level AA

As you already know, you must always make sure your text has enough contrast for people to see and read it. If you are a state of Minnesota employee and are using branded templates, you do not need to check your font color unless you change from the default color scheme. And you should already have a color contrast checker (such as the Colour Contrast Analyser) downloaded onto your computer. Need a refresher on how to use it? Check out the PDF 101 module 7 (video).  

With the adoption of WCAG 2.1, you need to make sure your graphics also pass a color contrast standard. 

Check color contrast on these two types of images:

• Graphical objects such as graphs and charts, icons and symbols, and infographics (covered under more advanced users).
• User interface components such as form fields, buttons, and visible focus (we cover this in the advanced section).

The new success criteria for non-text contrast is a color contrast ratio of 3:1 - the same as the requirement for large text. This will apply to charts and graphs, lines around form fields, and all other non-text elements that contain information. 

No Contrast Check Required

We’ll look at instances where you need to check your color contrast, but first let’s see what you do NOT need to worry about. Here are some examples of when you will not need to check.

Graphic with text embedded or overlayed that conveys the same information 

• This pie chart has labels and values that pass color contrast requirements. The slices themselves do not need to pass color contrast because the category and percentage of each slice is visually available outside of each slice.

Graphic that is part of a logo or brand 

• Our state logo has a dark blue M and a lime green N – and the N fails color contrast. Because it is a logo, it is exempt from the color contrast success criteria.

Graphic information available nearby

• A graph (or other graphic) where the information is available in another form – for example, a graph with the tabular information available in a table directly following it.

Figure: This is a screenshot of a real-text table underneath a chart. The chart does not pass color contrast. The table in this case satisfies the requirement.

Other examples 

• Decorative images that contain no usable information.
• Photos of real-life scenes. 
• Screenshots representing how something appears to others.
• Color gradients used to measure something - for example, a heat map.

Check Color Contrast

Now let’s look at some examples of when you must check color contrast.

Charts and graphs 

Many default graphs are inaccessible when first added to your Word document. Let’s look at the sample pie charts below.

The pie chart on the left uses a default setting. Remember, if a table accompanied this chart, then you do not need to worry about the color contrast success criteria for the chart. However, since we don’t have a table with it and we know your goal is to improve accessibility for everyone, let’s look at how to ensure it meets the success criteria.

• Yellow, gray, and orange all fail color contrast success criteria, both against the white background and each other (they do not meet the minimum 3:1 contrast requirement).
• Numbers on top of color background also fail to meet the color contrast criteria (4.5:1).

You can use simple, quick fixes to make your charts and graphs pass the color contrast success criteria. Let’s look at the second chart:

• The numbers have been moved off the color background and enlarged. The color for both the numbers and lead lines have been changed from gray to black.
• At this point, the color contrast between the slices do not matter as the end users can glean the information from the numbers. However, the added black outlines give users a better experience.

Icons and symbols

Let’s look at icons and symbols. Sometimes you may use icons that are universally understood in place of text.  However, it is important that they meet or exceed the success criteria stating the color contrast must be 3:1 or greater. There are two home icons below. The lime green icon fails color contrast criteria with a 2.3:1 ratio. By contrast, the blue and white icon on the far right passes with a contrast level of 3.7:1.

But Wait, There’s More!

Next edition we will share information for those who go beyond these simple structures. You can expect information for those who create infographics, data visualizations, and forms. Subscribe so you don’t miss out!