How to Use Colors on Websites Effectively
Public universities need to ensure that their digital properties, such as online learning content, are accessible to individuals with visual impairments. Common website accessibility accommodations include support for screen readers and keyboard navigation, alternative text for images, and high color contrast ratios.
Color contrast refers to the way two or more colors stand out against each other. For example, dark text on a light background has higher contrast than text and background in two slightly different shades of gray. This difference is expressed in terms of color contrast ratio, which is defined as the difference in brightness. Observing color contrast best practices will improve readability, increase content engagement, and significantly add to the learning experience.
Observe the WCAG color contrast ratio standards
The Web Content Accessibility Guidelines are widely recognized as the definitive set of standards for digital content accessibility. WCAG 2.1 success criterion 1.4.3 specifies a color contrast ratio of at least 4.5:1 for normal text (12pt) and 3:1 for large text (14pt or larger). These ratios mean that the text is bright enough for users with low vision to read.
While checking the color contrast ratios page by page is tedious and impractical, you may automate the process by using a color contrast checker. This tool analyzes the HTML code for every page, calculates the color contrast ratio, and generates a report that shows potential WCAG violations.
Use variations on institutional colors
Colleges and universities tend to be very strict with branding. Most have clearly-defined guidelines on what color combinations may be used for their official channels, such as social media, print material, and websites, along with the exact Pantone and hex codes for each color. However, these combinations might not always have high color contrast, especially if both colors are dark or light. In this case, you will need to choose one predominant color for text. For instance, if your institution’s colors are blue and silver, you may use blue text on a white background with light silver decorative accents.
Use color combinations that are color blind friendly
Similarly, your color combinations should also be visible to users with color blindness. Experts believe that there are over 300 million with color blindness worldwide, and some of them might be enrolled in your institution. Red-green color blindness is the most common form of color vision deficiency, affecting 8% of males worldwide. This means that your website should avoid combinations such as red text on a green background, blue text on a purple background, and similar pairings.
Complement colors with other visual elements
While color is a good way to convey information, you cannot rely on it alone as there are some people who cannot perceive color correctly. To mitigate the effects of color blindness, you can use different visual cues, such as symbols, text, emojis, or patterns. For example, if you are using colors to indicate fillable fields on an online form, you may add a border around the fields so users will know where to place the pointer.
Color contrast for greater website accessibility
Color changes the way we perceive the world, and online spaces are no exception. The proper use of color can help university students, especially those with visual impairments, understand course content and engage with the academic community at large. By following the WCAG color contrast standards, using institutional colors to strike a balance between branding and readability, finding color blind friendly color combinations, and combining colors with different visual elements, you can help ensure your website is accessible to everyone.