Insufficient color contrast*
Error Report
Insufficient text color contrast with the background.
Why Is This Important?
When text does not have a strong enough contrast with its background, it is unreadable. Additionally, when a student with color-deficient vision due to a mechanical failure or a biological condition perceives, for example, red text (#FF0000) on a white background (#FFFFFF) as yellow text on a white background, the text is also unreadable. Because of this, there are certain color contrast ratios that must be met. We will cover these later on.
To see how red and other colors may be perceived by color blind persons, do a Google Image Search for "color blind simulation."
Cause Of Error
To get this UDOIT result, you will need to have one or more portions of colored text that has less than a 4.5:1 contrast ratio with white (#FFFFFF;), the assumed background color.
Examples
The following color combinations may appear readable to many, but some may see the colors as shades of yellow. To correct the issue, only a slight change in color or in the text's font size and weight had to be made.
Incorrect Example
This is red text on a white background.
This is white text on a Clemson orange background.
Correct Example
This is red text on a white background.
This is white text on a Clemson orange background.
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.
False Positives and Negatives
Unfortunately, UDOIT is not programmed to detect font size or background color (it's assumed to be white) which can lead to both false positives and false negatives.
To get a false positive (UDOIT results which can be ignored), the following must be true:
- For large text (size
≥14pt bold or
- For regular text, have a contrast ratio of 4.5:1 or greater between the background color and font color.
To get a false negative, you need to have text on a colored background which has a 4.5:1 contrast with white but does not have the appropriate contrast ratios listed above for the colored background.
For information about how to identify false results, read More on Color Contrast.
How To Fix It
Within UDOIT, if you click the U FIX IT! button, you will be provided with:
- a sample of the current color combination
- a checkbox that allows you to bold the font
- a checkbox that allows you to italicize the text
- a selection of colors.
The checkboxes are provided so that when you change the color, you can also address the Avoid using color alone for emphasis suggestion. It's strongly recommended that when you do use the checkboxes use the one for bold instead of italics as italics are generally harder to read.
Below the checkboxes are a collection of color swatches. You may choose any that do not generate an x when hovered on. Below, I've replicated your choices. The ones with X or / on them cannot be selected in UDOIT, but the ones with a / can be used on large text if you want to copy the color code and apply that color via the HTML directions. Additionally, please avoid using blue shades for non-linked text.
/ colors: gray, dark yellow, green, orange, yellow orange
x colors: yellow, lime green
Click on a more accessible color then click the Submit button and UDOIT will apply the change.
Related Result Pages
- Suggestions
Last Updated January 2017.
Clemson Online