The Law

Section 508

Section 508 of the Rehabilitation Act of 1973 was amended in 1998 to require Federal agencies to make electronic and information technology (EIT) accessible to people with disabilities. The accessibility of electronic content like video is also required in this amendment.

1194.21 (I): Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1194.22 (C): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Universal Design

Ensuring adequate color contrast on documents and online is beneficial for a variety of student populations, not just the visually impaired.

Students can easily focus on the content rather than the distraction of color.
Students without a color printer can print of documents and still understand important areas.
Content can be easily moved from different document file types and computers without losing highlighted portions. Not all computers have the same colors available.

Contrast Ratio

Some students and guests in your course may be low vision or colorblind users. In order to account for their experience in your classroom, there should be sufficient contrast between foreground (text or graphics) and the background. Maximum contrast is black & white and using other colors may lessen that contrast.

If you plan to use a variety of colors in your course, it’s important to check that the color contrast is sufficient. WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger or 18 point or larger).

Grey Level	WCAG Ratio	Pass/Fall Contrast
#000000 (Black)	21 : 1	Pass
#333333	12.6 : 1	Pass
#666666	5.7 : 1	Pass
#666666 (large)	5.7 : 1	Pass
#999999 (large)	2.85 : 1	Fail
#CCCCCC (large)	1.6 : 1	Fail

Table created by Accessibility at Penn State

Bold, Underline, and Italicize

Using color to convey information and meaning in a document or webpage can prevent some students from accessing that information. If you choose to use color to give information to your students, you should also bold, underline, or italicize that information

Example 1:

The University of Missouri-Kansas City is transitioning the Blackboard learning management system (LMS) to a new system, Canvas. A pilot group has been selected from among the various schools and departments. Faculty in the pilot will receive training to transition their courses to the Canvas LMS for the Spring 2018 semester.

Example 2:

The University of Missouri-Kansas City is transitioning the Blackboard learning management system (LMS) to a new system, Canvas. A pilot group has been selected from among the various schools and departments. Faculty in the pilot will receive training to transition their courses to the Canvas LMS for the Spring 2018 semester.

Color Contrast Checkers

WebAIM Color Contrast Checker

Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The lightness slider can be used to adjust the selected color.

MSF&W Color Contrast Ratio Calculator

Tool to help you identify the contrast of colors on your page. A large sample table of colors is provided for convenience.

ColorZilla

Extracts color from page elements so you can easily verify the colors used on your course page.

WAVE

Analyzes contrast ratios for all page elements at once.

UMKC Resources

Accessibility Open Lab

Do you have concerns or questions about accessibility? Do you need help making videos, Word Documents, PowerPoints, Excel Files, or PDFs accessible? Come join our Accessibility Open Lab! Bring your questions and inaccessible materials with you.

Download Color Contrast Instructions from UMKC

Keep instructions on Color Contrast right on your computer for easy reference!