{"id":31,"date":"2023-01-05T08:00:59","date_gmt":"2023-01-05T16:00:59","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=31"},"modified":"2026-01-23T08:21:48","modified_gmt":"2026-01-23T16:21:48","slug":"color-color-contrast","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/color-color-contrast\/","title":{"rendered":"Color and Color Contrast"},"content":{"rendered":"
\r\n \n
\r\n\t\n\n

Importance of Color and Color Contrast<\/h2>\n\n\n\n

How people perceive color in digital content can be affected by their varying visual abilities (e.g., color blindness, low vision, age-related visual issues) and ambient lighting conditions (e.g., too bright or too dark lighting conditions, etc.). The type of technology (e.g., monitors with varying color displays) being used to access the digital content can also affect color perception.<\/p>\n\n\n\n

When color is an essential part of conveying information, people who cannot see or differentiate certain colors may encounter difficulties and may not easily access the digital content.<\/p>\n\n\n\n

Color is usually determined visually by the measurement of hue, saturation, and brightness of light being reflected. Color contrast is measured by a brightness-to-darkness ratio that is often between foreground and background colors. A high contrast (e.g., a dark color shade vs a light color shade) would meet the optimum color contrast ratio. Having digital text and image content that uses insufficient color contrast can make the viewing experience difficult.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

\r\n \n
\r\n\t\n\n

Sufficient and Insufficient Text and Background Color Contrast Examples<\/h3>\n\n\n\n
Sufficient Contrast 1<\/th>Sufficient Contrast 2<\/th>Insufficient Contrast 1<\/th>Insufficient Contrast 2<\/th><\/tr>
black text on white background<\/td>white text on black background<\/td>light gray text on white background<\/td>dark gray text on black background<\/td><\/tr><\/tbody><\/table>\n\n<\/div>\r\n\n<\/div>\n\n
\r\n \n
\r\n\t\n\n

Additionally, to ensure digital content is accessible, color must not be used alone to convey important information or to demonstrate emphasis.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

\r\n
\n
\r\n \n
<\/div>\n\n
\r\n \n\n

Common Errors<\/h2>\n\n\n\n

These common errors hinder the accessibility and usability of digital content.<\/p>\n\n\n\n