Choosing colors with good contrast is an important consideration in many areas of design, including web design, print design, signage, and more. Using colors with sufficient contrast between the text and background helps ensure content is legible and accessible to all readers. So what color combinations provide the best contrast? Here we’ll explore some key factors in choosing high-contrast color schemes.
Quick Answers
In quick summary:
- Black text on a white background provides the maximum contrast.
- Dark text on a light background is preferable to light text on a dark background.
- Combinations like navy text on white, dark green on cream, or burgundy on beige offer great contrast.
- Aim for a contrast ratio of at least 4.5:1 between text and background colors.
- Avoid color combinations like yellow on white, gray on white, light green on light yellow, or navy on black.
The Importance of Contrast
Having adequate contrast between foreground and background colors is important for the following reasons:
- Readability: High contrast makes text easier to read, especially for those with low vision.
- Accessibility: Insufficient contrast makes content difficult or impossible for viewers with visual impairments to read.
- Legibility: High contrast enhances legibility by making the text stand out clearly against its background.
- Scannability: Bold contrast allows users to quickly scan and skim through content.
- Aesthetics: Contrast adds visual interest and can make attractive, dynamic designs.
Sites, apps, documents, signage, and other materials that lack sufficient contrast between text and background can be difficult or impossible to use for people with visual disabilities. They may experience eye strain, headaches, loss of focus, and inability to comprehend the content. Ensuring high contrast allows all users to consume information equitably.
Light vs. Dark Backgrounds
When choosing colors for contrast, a light background with dark text generally provides better results than the reverse. There are a few reasons for this:
- Light backgrounds reflect less light, resulting in less glare.
- Dark text stands out clearly against a light background.
- Light text on a dark background can create halos around letters.
- Most users are accustomed to reading dark text on white screens and paper.
Black text on a white background provides close to the maximum possible contrast. But other high contrast pairings like navy text on cream, burgundy text on beige, forest green on tan, or dark purple on light gray can also work well. Avoid light colored text on a dark background if possible.
Text Size
Along with color contrast, text size impacts readability. Very small text, even with good contrast, can be difficult to read. Recommended minimum text sizes for readability include:
- Print: 10-12 point font
- Web: 15-25 pixels
- Mobile: 20-30 pixels
- Signage: Viewing distance x 0.2 inches minimum height
Larger text provides even better readability and accessibility. Combine good sizing with ample color contrast for best results.
Contrast Ratios
Contrast ratios provide an objective measure of the luminance difference between two colors. They are measured on a scale from 1:1 to 21:1. To meet accessibility standards, text and background colors should have a contrast ratio of at least 4.5:1.
The W3C Web Content Accessibility Guidelines recommend the following minimum contrast ratios:
- Small text: At least 4.5:1
- Large text: At least 3:1
The higher the contrast ratio, the easier the text will be to read. Strive for ratios of 7:1 or greater for optimal legibility.
| Color Combination | Contrast Ratio |
|---|---|
| White on black | 21:1 |
| Light yellow on black | 17:1 |
| Yellow on black | 12:1 |
| Navy on white | 7:1 |
| Burgundy on cream | 5:1 |
| Gray on white | 4:1 |
Online contrast checking tools like WebAIM make it easy to test the ratio of any color pair. Look for combinations rated at least 4.5:1.
Color Combinations with High Contrast
Some examples of high contrast color combinations include:
- Black on white or off-white
- White on black or dark gray
- Navy text on tan or cream background
- Burgundy or forest green text on ivory or light beige
- Dark purple text on light gray
- Orange or yellow text on a black background
Neutrals like white, beige, gray, tan, and black make great backgrounds that can pair with almost any bold, dark color for text. Avoid light on light and dark on dark combinations.
Low Contrast Examples
Some color combinations offer insufficient contrast. Avoid:
- Light gray, yellow, or green text on white backgrounds
- Blue, gray, or dark green text on black backgrounds
- Red, blue, or purple text on navy backgrounds
- Green text on yellow backgrounds
- Light green text on light yellow backgrounds
In general, avoid using pale, low saturation colors or similar hues for foreground and background. Increase color contrast by darkening the text, using a darker shade of background, or increasing color separation.
Tips for Maximizing Contrast
Follow these tips for ensuring sufficient color contrast in your designs:
- Use black text on a white or light neutral background whenever possible.
- Pick darker, deeper colors like navy, dark purple, forest green for text.
- Choose light tans, grays, beiges, or ivories for backgrounds.
- Make sure text is large enough for easy reading.
- Use online tools to check that color combinations meet 4.5:1 minimum ratios.
- Avoid light on light and dark on dark color pairings.
- Use white space and dividers to separate contrasting sections.
- Ask others to review if you are unsure about contrast.
Testing designs with users who have low vision or other disabilities can also provide valuable feedback. Keep legibility and accessibility top of mind when selecting color schemes.
Conclusion
Choosing color combinations with strong contrast is a key aspect of good design. Black text on a white background provides the maximum contrast, but other dark on light pairings can also work well.Aim for contrasts of at least 4.5:1 and minimum text sizes for legibility. Avoid light on light or dark on dark schemes. With the right color combinations and typography, you can create designs that cater to all users and effectively convey information.
