The Importance of Color Contrast
Have you ever visited a webpage, or opened a document that was difficult to read because of its color contrast? It was probably because the contrast between the background and foreground wasn’t sufficient enough to make the text easily readable. High contrast color combinations make text easier to read and also remove a barrier for people with colorblindness or low vision.
Color contrast refers to the contrast between the background color and foreground color of digital content. Color contrast is important because people often have difficulty perceiving content when there isn’t sufficient contrast.
What is sufficient contrast? The Web Content Accessibility Guidelines (WCAG) establish minimum ratios of contrast for small and large text. Aim to pass the WCAG AA requirements for your text size, which are 3:1 for large text and 4.5:1 for normal text. Large text is defined as unbolded text that is 18pt or larger, or bolded text that is 14pt or larger. If your content contains any meaningful graphic elements like a warning icon or a checkmark, they also need to meet that 3:1 contrast ratio so they are perceivable by most readers.
You can download a color contrast checker tool to make sure your content has sufficient levels of contrast. Avoid relying on your eyesight alone to determine whether a color combination can be used or not; instead use the color contrast checker tool to make sure. Did you know that CU Gold and white is an inaccessible color combination? It only has a 1.9:1 color contrast ratio, which means it should not be used for normal text, large text, or meaningful images. Read about Accessible CU Boulder Color Combinations to learn more.
Here is an example of high and low contrast text:
Which color combination do you prefer to read? Most people tend to benefit from higher contrast color combinations even if they don’t have a visual disability. For example, someone reading a webpage on their phone in bright sunlight will find high contrast content easier to read.
June Challenges
If you haven’t yet, download the color contrast checker tool.
Review your syllabus, Canvas course, or a meeting handout, and locate places where you use colored text. Then use a color contrast checker to check the contrast ratio.