Suggestion Report

Avoid using color alone for emphasis.

Why Is This Important?

Some students may not be able to see color or view the color correctly. As such, it is best to make sure that the color is bolded or has other characters nearby that indicate the same sort of importance as the color.

Cause Of Result

To get this result, you must have colored text with sufficient color contrast that is not bold or italicized via the style attribute.

Examples

Incorrect Example

This text is important!

Correct Example

This text is important!

In the mobile app, the Hide and Show Code Links are obsolete. We couldn't hide them without removing them from the web browser view.

Hide Code
Show Code

Incorrect Example Code

<p><span style="color: #ee0000;">This text is important!</span></p>

Correct Example Code

<p><span style="color: #ee0000; font-weight: bold;">This text is important!</span></p>

Using <strong><span style[...]</span><strong> instead of font-weight: bold; should be sufficient, but UDOIT does not yet recognize this practice as correct.

False Positives

There are three kinds of false positives you can have for this result.

The text is not colored to create emphasis.
Other characters like * accompany the text that is colored to create emphasis.
- If you use this technique, be sure to clearly spell out what the * or other character(s) mean.
The color text is bold or italicized with the Rich Content Editor's Bold or Italics button, which creates the necessary visual effect with code that UDOIT does not look for.
- This will hopefully be fixed soon.

Within UDOIT, if you click the U FIX IT! button, you will be provided with a Make this text bold and a Make this text italicized checkbox. Use the View the source of this issue link in the UDOIT report to access the Preview and verify that the text has not already been made bold or italicized or has not been accompanied by additional identifying characters. If it has not, check one of the checkboxes (bold is preferred over italics as italics are a little harder to read) and click Submit. UDOIT will then apply the changes.

Return to Top of Tabbed Panel

To fix the issue with the Rich Content Editor, start by clicking the page title above this UDOIT result to navigate to the page where the error resides and opening the page in editing mode. opening the page in editing mode. Next, determine how many emphasis colors are being used. If there is only one, then use the bold button in the Rich Content Editor toolbar to bold the colored text. If there are multiple colors used for emphasis or identification, then you will need to use additional characters to clearly mark how one set of colored text is different from another. Be sure to provide a clear legend or key for deciphering the color-character combinations.

Return to Top of Tabbed Panel

To fix the issue in the HTML Editor, start by clicking the page title above this UDOIT result to navigate to the page where the error resides, opening the page in editing mode, and clicking the HTML Editor link in the upper right. Type Ctrl/⌘ + F and search for color: #. If there is only one color on the page, you can add font-weight: bold; before color:. If there are multiple colors on the page, determine what character scheme you want to add to your color scheme and then search for the hexadecimal code (six character alpha-numeric code) of one of the colors and apply the character scheme for that color. Repeat until all colors are identified and then save the page.

Return to Top of Tabbed Panel

Related Result Pages

Errors
- Insufficient color contrast*
Suggestions

Avoid using styles for document structure*

Related Standards

Section 508 Quick Reference Guide
Section 508 11922c: Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
WCAG 2.0 A and AA Reference Guide
WCAG 1.1.1: Non-text Content
WCAG 1.3.3: Sensory Characteristics
WCAG 1.4.1: Use of Color

Last Updated January 2017.
Clemson Online