Checkpoint 04: Color and Contrast

When your PDF uses color, contrast, or visual formatting to convey information, that information must also be available through the document's tag structure so that users who cannot perceive these visual cues can still understand the content.

What This Means

Visual formatting often carries meaning. Consider these examples:

Red text indicates errors or warnings
Highlighted cells show selected items in a table
Color-coded charts distinguish between data series
Bold or colored headings show document hierarchy
Strikethrough text indicates deleted content

For sighted users, these visual cues communicate information instantly. But for users who are blind, have low vision, or have color blindness, this information may be invisible.

PDF accessibility requires that when visual formatting conveys meaning, that meaning must also be available through proper tagging, alternative text, or text content that explicitly states the information.

Why It Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Additionally, people who are blind rely entirely on screen readers, which cannot perceive color or visual formatting.

When color or contrast is the only way to understand information:

Color-blind users cannot distinguish between items marked with certain color combinations
Blind users receive no indication of the information at all
Users with low vision may not perceive subtle contrast differences
High contrast mode users lose color-based information entirely

Beyond accessibility, relying solely on color is poor design practice. In printouts, projected presentations, or poor lighting conditions, color-based information may be lost for everyone.

Common Violations

The Matterhorn Protocol defines one failure condition for this checkpoint.

04-001: Information Conveyed by Color, Contrast, Format, or Layout Is Not Tagged

What's Wrong: Visual formatting is used to convey meaning, but the document structure does not capture that meaning. The information is visible but not accessible to assistive technology.

Common Examples:

Example 1: Color-coded status indicators

Visual: Cells in a spreadsheet are green (approved), yellow (pending), or red (rejected)
Problem: Screen readers only read the cell text, not the cell color
Solution: Add text like "Status: Approved" or tag cells with descriptive attributes

Example 2: Required form fields marked in red

Visual: Required field labels are shown in red
Problem: Screen readers do not announce that fields are required
Solution: Add "(required)" to the label text or use proper form field properties

Example 3: Current page highlighted in navigation

Visual: The current page is highlighted in a table of contents
Problem: Users cannot tell which page they are on from the tags alone
Solution: Add text like "(current page)" or appropriate tagging

Example 4: Charts using only color to distinguish data

Visual: A pie chart with different colored segments
Problem: Alternative text says "Chart showing sales data" without color details
Solution: Describe data in alt text or provide an accessible data table

How to Identify:

Review the document visually and note all places where color or formatting conveys meaning
Read the document with a screen reader and check if that meaning is announced
Ask: "If this were printed in black and white, would all information still be clear?"
Use color blindness simulators to see how the document appears to color-blind users

Note: This is a human-testable condition. Automated tools cannot determine whether visual formatting conveys meaning.

How to Fix in Adobe Acrobat

Adding Text Alternatives for Color-based Information

When color conveys meaning, add explicit text to communicate that information:

Identify content where color indicates status, category, or other meaning
Add text that explicitly states the information:
- Instead of just a red circle, include text "Error" or "Not approved"
- Instead of just highlighting, add "(selected)" or "(current)"
Ensure this text is properly tagged and readable by screen readers

Improving Alternative Text for Charts

Select the Figure tag for the chart in the Tags panel
Right-click and select Properties
In the Alternate Text field, describe the information the colors convey:
- "Bar chart showing Q1 sales by region: North 45% (blue), South 30% (green), East 25% (orange)"
For complex charts, provide a supplementary data table

Using Table Headers to Convey Information

When table cells use color to indicate categories:

Ensure the table has proper header cells (TH tags)
Add a column or use headers that explicitly state the category
Consider adding scope attributes to headers

Example structure:

| Project | Status | Due Date |
| Alpha | Approved (green) | Jan 15 |
| Beta | Pending (yellow) | Jan 20 |
| Gamma | Rejected (red) | Jan 25 |

Adding Descriptive Tags

For formatted content like strikethrough or highlighted text:

Ensure the text is properly tagged
Add actual text or attributes that describe the formatting meaning
Consider using the Span tag with expansion text for abbreviations or special formatting

How to Fix in Microsoft Word

Addressing color and contrast issues in Word before creating your PDF is the most effective approach.

Adding Text Labels for Color-coded Information

Wherever color indicates meaning, add explicit text:
- Status columns in tables should include text like "Approved" not just color
- Required fields should include "(required)" in the label
- Error messages should include "Error:" as text, not just red formatting

Creating Accessible Charts

Click on the chart to select it
Right-click and choose Edit Alt Text
Write a description that includes the data represented by colors:
- "Pie chart showing market share: Company A 40%, Company B 35%, Company C 25%"
For complex charts, insert an accessible data table below the chart

Using Styles Instead of Just Formatting

Instead of manually making text red and bold for warnings:
- Create a character style called "Warning"
- Apply the style to warning text
- The style name can indicate purpose even if color is not visible
For deleted text:
- Use Track Changes feature, which creates accessible revision marks
- Or add explicit text like "[DELETED:]" before strikethrough content

Adding Patterns to Charts

In Excel/Word charts:

Click on a data series
Go to Format Data Series
Add patterns or textures in addition to colors
This helps color-blind users distinguish data series

Checking Contrast

While this checkpoint focuses on color as information carrier rather than color contrast, adequate contrast is also important.

Text Contrast Requirements

Normal text: 4.5:1 contrast ratio minimum
Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio minimum
Non-text elements: 3:1 contrast ratio minimum

Testing Contrast

Use the Color Contrast Analyzer tool (free from TPGi)
Test foreground text against background colors
Test important graphic elements against their backgrounds

Fixing Low Contrast

Darken text colors or lighten backgrounds
Avoid light gray text on white backgrounds
Be cautious with colored backgrounds behind text
Test with high contrast mode enabled

Testing Your Fix

Visual Review

Print the document in black and white
Check if all information is still understandable
Use a color blindness simulator:
- Coblis - Color Blindness Simulator
- Chrome DevTools color vision deficiency emulation

Screen Reader Testing

Open the PDF with a screen reader
Navigate through the entire document
For each place where color conveys meaning:
- Is the information announced?
- Is it clear without seeing the color?

Contrast Testing

Use the Color Contrast Analyzer on all text
Verify 4.5:1 minimum ratio for normal text
Verify 3:1 minimum for large text and graphics

Validation Checklist

All color-coded information has text alternatives
Charts include data in alt text or accessible tables
Status indicators include text, not just color
Required form fields are identified in text, not just color
Strikethrough or highlighted text has accessible alternatives
Text meets minimum contrast requirements
Document is understandable in black and white

Examples of Fixes

Before and After: Status Table

Inaccessible:

Task	Priority
Task A	[red cell]
Task B	[yellow cell]
Task C	[green cell]

Screen reader hears: "Task A [blank]. Task B [blank]. Task C [blank]."

Accessible:

Task	Priority
Task A	High (urgent)
Task B	Medium (standard)
Task C	Low (when possible)

Screen reader hears: "Task A, High (urgent). Task B, Medium (standard). Task C, Low (when possible)."

Before and After: Form Field