Color Contrast
What is color contrast?
Color contrast refers to the difference between the brightness of the background color and foreground color of digital content.
Black text on a white background is very high contrast; light grey text on a white background is low contrast.
Why is color contrast important?
Color contrast is important because people often have difficulty perceiving content when there isn’t sufficient contrast. High contrast color combinations are easier to distinguish without difficulty; lower color contrast can cause people to miss important information or strain their eyes to read your content, especially in high-glare or bright environments.
High color contrast is critical for individuals who are colorblind or have low vision, and benefits many others. If content is important enough to be included on a document or website, then it’s important to ensure that it is perceptible by all sighted readers.
What level of color contrast do I need to meet?
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 small 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.
How do I measure color contrast?
Download a 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 Å·ÃÀ¿Ú±¬ÊÓƵ 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 Å·ÃÀ¿Ú±¬ÊÓƵ Boulder Color Combinations to learn more.