Skip to main content

Color and Contrast

The following criteria are not necessary to achieve PDF/UA compliance, but must be observed for WCAG compliance. Nevertheless, it is important for people with visual impairments and color vision deficiencies that you take these points into account when designing your presentation.

Contrast Ratio of Text to Background

Texts should have a good contrast ratio to the background. Large texts with a minimum font size of 18 pt or bold texts with a minimum font size of 14 pt should have a contrast ratio of at least 3:1 to the background. For all smaller texts, a contrast ratio of at least 4.5:1 to the background applies.

For example, black text on a white background has the highest contrast ratio of 21:1, whereas yellow text on a white background does not have a sufficient contrast ratio.

You can, for example, display contrast ratios using the free "Colour Contrast Analyzer (CCA)" program from TPGi.

Further recommendations for designing your text can be found in the article on Text Formatting.

Contrast Ratio of Graphic Objects to Background

Graphic objects relevant to the content should have a contrast ratio of at least 3:1 to the background. This also applies to, for example, adjacent areas in diagrams and graphics which must be distinguishable.

Information Is Not Conveyed Exclusively by Color

Make sure that information is not conveyed exclusively by color. Use labels, symbols or patterns in addition to color.

For example, in a bar chart, you can also label the colored bars and/or provide them with a clear pattern.

People with certain visual impairments or color blindness cannot distinguish red text from surrounding black text, for instance. Therefore, include the information you want to convey with the colors in the text or work with additional symbols. If the red-colored text is an important notice, you could write the text "Caution" in front of it, behind it, or insert an icon of a warning sign with alt text.

Tip: View your presentation in grayscale and check whether all important information is still transmitted. To do this, click on the View tab in the ribbon and then on the Grayscale button in the Color/Grayscale function group.

Screenshot: The 'View' tab with the 'Grayscale' button highlighted.

The new Grayscale tab opens . Select the Grayscale button there. To exit the view, click on the Back To Color View button.

Screenshot: The 'Grayscale' tab with the highlighted 'Grayscale' and 'Back To Color View' buttons.

Avoid Red-Green Combinations

People with common red–green color blindness cannot distinguish between red and green tones well. Therefore, avoid red-green color combinations.