{"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

Color Contrast<\/h2>\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

\"Example
Figure 1: Examples of good color contrast<\/figcaption><\/figure>\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

\"Example
Figure 2: Examples of poor color contrast<\/figcaption><\/figure>\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

Best Practices Using Color Contrast<\/h3>\n