Updated: 7/14/26
Quick Navigation
Introduction
Color contrast refers to the difference in lightness and darkness between text (or other content) and its background. When contrast is too low, text becomes difficult or impossible to read for many people, including those with low vision, color blindness, or age-related changes to eyesight. Poor contrast is one of the most common accessibility barriers in both print and digital materials, and it is also one of the easiest to fix.
Return to Top
Why Color Contrast Matters
Low contrast affects a wider range of people than most content creators realize. It is not only a concern for people who are blind or have a diagnosed visual impairment. Low contrast makes reading harder for:
- People with low vision
- People with color blindness (approximately 1 in 12 men and 1 in 200 women are color blind)
- Older adults, whose ability to distinguish contrast naturally decreases with age
- Anyone reading in bright light or on a low-quality screen
- People experiencing eye strain or fatigue
In digital contexts, the Web Content Accessibility Guidelines (WCAG) set the international standard for contrast. Meeting these standards is also increasingly a legal requirement under laws including the Americans with Disabilities Act (ADA) Title II, Section 504 of the Rehabilitation Act of 1973, and the University's digital Accessibility Policy (06.09.07).
For print materials, while there is no equivalent legal standard, the same contrast principles apply and should be followed as best practice.
Return to Top
What Good Contrast Looks Like
Contrast is measured as a ratio. The higher the ratio, the greater the difference between the text color and the background color. A ratio of 1:1 means both are identical (no contrast at all). A ratio of 21:1 is the maximum, which is black text on a white background.
The WCAG Level AA standard, which is the most widely adopted requirement, specifies the following minimum ratios:
- Normal text (smaller than 18pt, or smaller than 14pt if bold) requires a contrast ratio of at least 4.5:1.
- Large text (18pt or larger, or 14pt or larger if bold) requires a contrast ratio of at least 3:1.
- Non-text elements such as icons, form field borders, and chart lines also require a 3:1 contrast ratio against adjacent colors.
For practical reference, black text on a white background has a ratio of 21:1 and always passes. Dark navy text on a white background typically passes. Light grey text on a white background often fails, as does yellow text on a white background.
The same principles apply to print. While print materials cannot be checked with an automated tool in the same way digital content can, the contrast ratio concept translates directly. Light text on a light background, or text placed over a busy photograph, will fail in print just as it fails on screen.
Return to Top
Common Contrast Mistakes to Avoid
- Using light grey text on a white or light background.
- Placing text over photographs or patterned backgrounds without a solid overlay behind the text.
- Using colored text such as yellow, light green, or pale blue on a white background.
- Using white text on a medium-toned background that is not dark enough.
- Relying on color alone to convey information, for example using red text to indicate something is urgent without also using a label or symbol.
- Using watermarked or lightly tinted backgrounds behind body text in documents.
- Printing documents on colored paper that reduces the contrast of the text.
Return to Top
How to Check Color Contrast
Digital Content
The easiest way to check contrast in digital materials is to use a free online tool. The most widely used is the WebAIM Contrast Checker.
Most tools ask you to enter a foreground color (your text color) and a background color. Colors can be entered as hex codes (a six-character code such as #003366), Red, Green, and Blue (RGB) values, or sometimes by using an eyedropper tool to select a color directly from your screen.
Microsoft Word and PowerPoint
Word and PowerPoint do not have a built-in contrast checker, but you can use the following steps to find the hex code of any color in your document and then check it using WebAIM.
- Select the text or shape whose color you want to check.
- Go to the font color or fill color menu and select More Colors.
- In the Colors dialog, switch to the Custom tab. You will see the RGB values and, in some versions, a hex code. Note these down.
- Enter those values into the WebAIM Contrast Checker alongside your background color to get your ratio.
Google Docs and Slides
Google Docs and Slides also lack a built-in checker. To find hex codes:
- Select the text or element whose color you want to check.
- Open the text color or fill color menu. At the bottom you will see a field showing the current hex code.
- Copy that code and enter it into the WebAIM Contrast Checker.
Print documents and PDFs
For print materials, you can check contrast by identifying the colors you are using and checking them with the WebAIM Color Contrast Analyzer, which lets you sample colors directly from your screen.
If you are working in a design application such as Adobe InDesign or Illustrator, note the hex or RGB values of your colors and check them using WebAIM or the Adobe Color Contrast Analyzer.
As a general rule, for print, use the darkest available shade of any color for body text, and always test how a document looks when printed in black and white, as some color combinations that appear distinct on screen can become indistinguishable in grayscale.
Return to Top
Tips for Improving Contrast
- Use dark text on a light background as your default. Black or very dark grey on white is always a safe choice.
- Avoid using light or medium shades of any color for body text.
- If you need to use a colored background, make sure your text is dark enough to pass the required ratio.
- When placing text over an image, add a solid or semi-transparent dark overlay behind the text rather than relying on the image itself to provide contrast.
- Test your materials in grayscale to catch contrast problems that might not be visible in color.
- When using colored text for links or headings, check that the color passes the contrast ratio against its background, not just that it looks visually distinct.
- When printing on colored paper, test a sample page first to confirm text remains readable.
Return to Top
Additional Resources
For further assistance:
Return to Top