Â鶹Ãâ·Ñ°æÏÂÔØ

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?

Avoid relying on your eyesight alone to determine whether a color combination can be used or not; what may look good to you may not be accessible to others interacting with your content. Instead, use color contrast checkers to ensure your color combination is accessible and perceivable to all. There are two tools we recommend using:

• The software is free and available to download on Windows and Mac.
• The is a free web-based tool if you prefer not to download applications on your device.

Both tools provide WCAG AA and AAA results, letting you know whether your colors pass or fail contrast ratio guidelines. To determine the exact colors you need to evaluate, these tools allow you to input the HEX code, RGB (Red, Green, Blue) values, or utilize an eyedropper feature.

We strongly encourage you to enter the HEX code or RGB value of each color, as it will give you the most accurate result. While the eyedropper tool may be easy to use, it can lead to inaccurate results. Text edges gradually blend in with the background color to visually look smoother, and the eyedropper only grabs a single pixel of the color. Because of this, you are at higher risk of inaccurate results depending on which pixel you select.Ìý

How to find HEX codes

Depending on the platform, HEX codes can be a bit buried. Follow these steps to find the HEX code in commonly used content creation platforms:

Microsoft Office (Word, Excel, PowerPoint, etc.)

1. Within any color selection option (Font Color, Shape Fill, Shading, etc.) open the drop-down menu and select More Colors.
2. In Microsoft desktop apps, the HEX code is found in the Custom tab within the Colors dialogue box.Ìý
   In Microsoft online, the HEX code is found in the initial dialogue box after selecting More Colors.

Google Workspace Apps (Slides, Docs, Sheets, etc.)

Within any color selection option (Text Color, Shape Fill, Highlight Color, etc.) open the drop-down menu and select Custom to find the HEX code.

Fun Fact

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.