Lists

What is visual style?

Visual style refers to any visual formatting of content that includes the use of:

• Italics
• Bolding
• Underlines
• Punctuation
• Spatial positioning or text spacing
• Colors

How should visual style be used?

Adding visual style to your document or page can be very helpful for improving the comprehension of sighted readers. However, visual styles should never be the only way that meaningful information is conveyed.

Using visual style alone to convey meaning is best illustrated by the following sentence common to many surveys and forms: “Required items are in red”. When the color or visual style of a piece of text, image, or element on the page is important to understanding the meaning of content, then that meaning should always be delivered in a different medium in addition to color or style.

Why is it important to not use visual style alone to convey meaning?

It is important not to use visual style alone (such as color, size, shape, bolding) to convey meaning because some users may not be able to perceive those visual differences.

For example:

• People who are color-blind may not distinguish between red and green indicators.
• People with low vision may miss differences in font size or contrast.
• Screen reader users cannot perceive visual styling and rely on text-based information.

If meaning is conveyed only through visual cues, some users may miss important information, instructions, warnings, or status updates.

How do I avoid using visual style alone to convey meaning?

Example:

• Avoid using only the color red to indicate required fields.
  
  • "Required fields are shown in red"
• Use additional indicators other than color.
  • "Required fields are shown in red and marked with an asterisk (*)."

The easiest approach to remove that accessibility barrier is to just add “(required)” at the end of the name of each required field. You can still make required fields red, but the important thing is that there should be another way besides color to distinguish between required and non-required fields.

Another common way that color alone is often used to convey meaning is when people indicate the presence of a hyperlink by changing the color of text without underlining the link text. It's better to use color and underline links, for example:  Benefits. 

Similarly, avoid underlining text that is not a link.