Accessible Use of Color

Accessible Use of Colors on Udemy

It is important to think about the color you use on your site. In general, the TTU template is going to dictate the color used by the text and background on your page. In this case, the mostly black text on a mostly white background are about as high contrast as you can get, There may be times where you would want to modify these colors to fit your design.

The Web Content Accessibility Guidelines dictate the color contrast we should use on our site. Smaller text needs more contrast than bigger or bolder text. There are also two guidelines we could meet, a lower contrast double-A requirement and a higher contrast triple-A requirement. We should always meet the AA requirement, and we should try to meet the AAA requirements everywhere we can that doesn't otherwise compromise our design. The WebAIM Color Contrast Checker is a great resource for testing the color contrast used on your site. You can enter the foreground and background colors, see their contrast ratio, and even see the various WCAG guideline checks that your combination may pass. The luminance sliders here affect the brightness and darkness of the color which can help you make adjustments until you hit the desired contrast level.

Here we have three red bars that have a bit of smaller black text on top of them. The top one is the TTU Red, or C00 as its hex code that does not provide sufficient contrast with the black text on top of it. The middle bar should be a little easier to read as the red is quite a bit lighter. For those that want the hex code it's FF2424. This middle bar meets the AA requirement with a contrast ratio of 4.5 to 1. Admittedly when I teach this class in person even this bar is a bit hard to read on the somewhat older TVs used to display the presentation. That's definitely something you want to consider if the digital media you are producing will be shown on a projector or some digital signage TV that may not produce an ideal picture or not be in appropriate lighting conditions. The bottom bar should be much easier to read. This one meets our AAA requirement as our red has moved to more of a light pink. For those that want the hex it's FF8080. And yes this does read a lot more pink than the reds above it. But if this doesn't otherwise compromise our overall design, why not shoot for that AAA guideline?

It's important to use more than just color to convey information. Here is a sample line graph showing two series of data. The actual data is entirely random so that isn't a key part of this presentation. Importantly one data set is shown with a solid blue line with circles as data points, and the other is a dashed orange line with diamonds as the data points. The line styles and data point variations make it so that even if you couldn't distinguish between these two colors you could still tell that these are two distinct lines. These changes are also reflected in the chart legend. Just as a reminder if you're having a chart on your site, it's also a good idea to have a table of data accompanying that chart for users to explore that data anyway.

We may often use a stoplight color scheme on our sites. Red typically is used to indicate a bad status and green to show a good status, and sometimes a yellow for something in between. If we are showing something like a task list for students we would need to do something more than just having these colors convey that information. So here we have two examples of this. In the top one here we have a list of tasks for students to have completed. Some items are in green and some items are in red. If you aren't able to distinguish those colors, or are using a tool like a screen reader that is just reading off of visual text, you would have no way of knowing what those statuses are. In our better example, we've added the words "Done" and "Incomplete" to the items that were green or red respectively to make it clear what the status of each were. We can still use the color to draw attention to certain items but the color can't be the the only way that information is presented.