{"id":85512,"date":"2023-01-19T10:58:06","date_gmt":"2023-01-19T16:58:06","guid":{"rendered":"https:\/\/allyant.com\/?p=85512"},"modified":"2026-05-14T04:38:40","modified_gmt":"2026-05-14T09:38:40","slug":"color-and-contrast-for-accessibility","status":"publish","type":"post","link":"https:\/\/allyant.com\/blog\/color-and-contrast-for-accessibility\/","title":{"rendered":"Color and Contrast for Accessibility"},"content":{"rendered":"\n

This is the third in an eight-part article series.<\/strong><\/p>\n\n\n\n

STEP 3: COLOR & CONTRAST<\/p>\n\n\n\n

Color and Contrast Best Practices for Accessibility<\/h2>\n\n\n\n

As part of our series of articles on what is required to ensure PDF documents are accessible, we will be discussing color and proper contrast. The WCAG 2.0 standards address both issues and it is probably best to start there when laying out the requirements for proper use of color and contrast.<\/p>\n\n\n\n

Color Considerations for Accessible Designs<\/h3>\n\n\n\n

The WCAG 2.0 Criterion 1.4.1 states the following regarding use of color:<\/p>\n\n\n\n

\n

\u201cColor is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.\u201d<\/p>\n<\/blockquote>\n\n\n\n

What does this mean in plain English? It is straightforward as there is no actual restriction in the use of a color in a document, with the exception that some colors may not be a good choice when we discuss proper contrast. What this does mean is that you cannot use color alone to represent important information, determine a response or to represent a visual content. A simple example that is commonly used by authors is to use green text to indicate good information <\/strong>and red text to indicate negative information<\/strong>. While there is nothing wrong with the red or green text, if the only way to determine what is good or bad information is indicated by color choices, this represents a failure of the WCAG 2.0 Criterion 1.4.1 requirements, where color cannot be the only means to convey the different meaning of the text. One way to resolve the problem above would be to have the good data in a table column and the bad data in the other column with a proper heading above the table columns indicating the good and bad data. This way you can still use the color choices but there is more than one way to differentiate the good and bad data.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

A similar situation is often used for Forms when listing mandatory fields. It is common practice to mark these mandatory fields in red text to indicate they must be completed. Using red text alone to indicate the mandatory fields is a violation of the WCAG 2.0 Criterion 1.4.1. There needs to be more than just the use of color in indicating mandatory fields such as an icon that indicates a mandatory field such as below.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Contrast Ratio<\/h3>\n\n\n\n

While not technically directly related to use of color, WCAG Guideline 1.3.1 is closely related to the above use of color to denote important information. The guideline states that \u201cInfo and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text (Level A).\u201d<\/p>\n\n\n\n

What this means is that in addition to color, you cannot use font, style, format, location on the page or similar to convey information. This applies even if the document is in all black and white text. Common examples are using ALL CAPS for one meaning and then italics<\/em> for another meaning. We often see this failure in drug formularies where brand name drugs are in all caps and generic drugs are listed in lower case italics. If all caps or lower-case italics are the only means to determine which drugs are generic and which are name brand, that is a failure of the standard.<\/p>\n\n\n\n

Contrast ratio is a more difficult subject as many designers work hard to achieve a creative design for their work and often this will run counter to the contrast requirements of WCAG 2.0 1.4.3. The Criterion states the following:<\/p>\n\n\n\n

\u201cThe visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:<\/p>\n\n\n\n