{"id":417,"date":"2024-06-27T19:30:27","date_gmt":"2024-06-27T19:30:27","guid":{"rendered":"https:\/\/wwwtest.ucf.edu\/accessibility\/?p=417"},"modified":"2024-08-08T21:43:34","modified_gmt":"2024-08-08T21:43:34","slug":"color","status":"publish","type":"post","link":"https:\/\/www.ucf.edu\/accessibility\/color\/","title":{"rendered":"Color"},"content":{"rendered":"
Use of color in digital content is valuable for conveying information and enhancing engagement for many users; but there are considerations when using color so that all users can access the content.<\/p>\n
Many people have difficulty reading text that does not have sufficient contrast relative to its background; that is, if the colors or brightness of the text and its background are too similar. Web Content Accessibility Guidelines (WCAG)<\/a> 2.1 measures this contrast by a ratio of the relative luminance of the lighter color to darker color, ranging from 1:1 (e.g. white: white) to 21:1 (e.g., black: white). Providing a luminance contrast between text and its background of at least 4.5:1, can make the text more readable for people in most cases.<\/p>\n Notice how the colors of the text in Figure 1 are easily readable against their background. The image on the left has black text on a white background, and the image on the right show light yellow text on a dark blue background. A general rule of thumb is to always use light text against a dark background, or dark text against a light background.<\/p>\n Figure 2 shows a couple of examples for poor color contrast.<\/p>\n The image on the left shows red text on a green background. It\u2019s very hard to see even without any visual impairments and might even be completely impossible to read for someone with colorblindness. The example on the right is red text on a white background. It might look passable, but the shade of red does not meet the acceptable ratio of relative luminance and should be darkened.<\/p>\n Color is a powerful element of online course design that can be used to present and differentiate content in text or graphics. When using color to convey information, such as assigning meaning to different colors, be sure to convey the same information in an alternate way (e.g., labels, icons with alt text) as well for users who have difficulty perceiving color.<\/p>\n For example, if you\u2019re using color to indicate the differences between different items, such as mushrooms that are safe to eat and those that are poisonous, provide an alternate way to indicate those differences. Look at the following:<\/p>\n Mushrooms<\/strong><\/p>\n There\u2019s no way for anyone to know the context if they can\u2019t see the color. You could additionally add a meaningful icon or emoji beside the poisonous mushrooms, with a proper title attribute (i.e., Alternatively, you could restructure the content itself. Consider simply creating two separate lists:<\/p>\n Safe-to-Eat Mushrooms<\/strong><\/p>\n Poisonous Mushrooms<\/strong><\/p>\n

Best Practices Using Color Contrast<\/h3>\n
\n
\n
Color As Information<\/h2>\n
\n
title=\"poison\"<\/code>) or alt text (i.e., alt=\"Skull Icon\"<\/code> or alt=\"Poison\"<\/code>)<\/p>\n\n
\n
\n
Best Practices Using Color as Information<\/h3>\n
\n
\n
\n
\n
Resources<\/h2>\n
\n
\n