Choosing colors for a website is not just about whether they look good together. Your text, backgrounds, links, buttons, and other elements also need enough contrast to remain readable and distinguishable.
A color combination that looks perfectly clear on your monitor may be difficult for someone else to read, especially for people with low vision or color vision deficiencies.
Here are some practical things to check when choosing and reviewing your website colors.
1. Check the contrast between text and its background
The most important place to start is with your regular text.
Dark gray text on a light background, for example, may look fine at first glance but have considerably less contrast than black text on white.
For WCAG AA, the commonly used minimum contrast ratios are:
- 4.5:1 for normal-sized text
- 3:1 for large text
For web design purposes, large text is generally at least 24px regular text or about 18.5px bold text.
You can use a color contrast checker to enter your foreground and background colors and see whether they meet the applicable contrast ratio.
2. Check more than just your main paragraph text
Don’t stop after checking the body text.
Look at the colors used throughout your website, including:
- Headings
- Navigation links
- Buttons
- Form labels
- Form fields
- Captions
- Sidebars
- Footer text
- Text in cards or boxes
- Error and success messages
- Icons that convey information
- Text placed over images
Each combination can have a different contrast level.
A website might have excellent contrast for its main paragraphs while using pale gray text in the footer or low-contrast links in the navigation.
3. Don’t assume that a color is readable because it is dark or light
Contrast depends on the relationship between two colors, not on one color by itself.
For example, dark blue text can have excellent contrast against a white background but poor contrast against a dark purple background.
Likewise, a light yellow might be easy to read against a dark background but almost impossible to read against white.
This is why checking the actual foreground and background combination is more useful than relying on general rules such as “dark text is better.”
4. Pay attention to text over images
Text placed over photographs or background graphics can be especially difficult to make accessible.
The background may be light in one area and dark in another, causing the text to have good contrast in one part of the image and poor contrast in another.
For example, white text might be easy to read over a dark section of a photograph but disappear when the same text crosses a lighter section.
Possible solutions include:
- Adding a solid or semi-transparent background behind the text
- Using an overlay on the image
- Moving the text to an area with a more consistent background
- Changing the text color
- Using a different image
Check the actual areas where the text appears rather than assuming that one contrast measurement represents the entire image.
5. Check your links
Links should be easy to identify.
Color alone should not be the only indication that text is a link, particularly when the link color is similar to the surrounding text.
Underlining links is a simple way to make them more obvious without relying entirely on color.
If you do use a different color for links, check the contrast between the link and its background as well as how easily users can distinguish it from nearby text.
6. Check buttons and other interface elements
Buttons need enough contrast to be easily seen and understood.
Check combinations such as:
- Button text and button background
- Button background and the surrounding page
- Icons and their backgrounds
- Form controls and their surrounding areas
WCAG also includes a 3:1 minimum contrast ratio for user-interface components and meaningful graphical objects against adjacent colors. This can apply to things such as form-control boundaries, icons, and other visual controls.
Also check different button states, such as hover, focus, active, and disabled states.
A button that looks clear normally can become difficult to see when its color changes on hover or focus.
7. Don’t use color as the only way to communicate information
Color can be useful, but important information should not depend on color alone.
Similar to the links example aboce, consider a form that marks required fields in red. Someone who cannot distinguish that particular color difference may not realize which fields are required.
You can provide additional indicators such as:
- An asterisk
- Text labels
- Icons
- Borders or other visual distinctions
- Clear error messages
The same principle applies to charts, graphs, maps, status indicators, and other visual information.
8. Be careful with light gray text
Light gray is popular in modern website designs, but it is also a common source of poor contrast.
Designers sometimes use very light gray for:
- Secondary information
- Dates
- Descriptions
- Footer text
- Placeholder text
- Instructions
It may create a subtle visual appearance, but if the contrast is too low, visitors may have difficulty reading it.
If the information is important enough to display, make sure it is readable.
9. Check your colors in different conditions
Don’t evaluate your color choices only on your own monitor under ideal conditions.
Look at your website:
- On a phone
- On a tablet
- On a desktop monitor
- At different brightness levels
- In bright and dim environments
- With different display settings
If your website offers both light and dark modes, check the contrast in both. A color combination that works well in one theme may not have enough contrast in the other.
You can also use accessibility tools that simulate different types of color vision deficiencies.
These checks don’t replace an actual contrast test, but they can reveal problems that aren’t obvious during normal viewing.
10. Check the actual colors used on your website
A color palette may look accessible when you are designing it, but websites often contain more colors than the original palette suggests.
You may have one shade of gray for body text, another for navigation, another for the footer, and several different background colors.
Review the actual combinations being used on your pages.
This is particularly important when a website has grown over time and different sections were designed or updated separately.
Make contrast part of your design process
You don’t have to choose between an attractive website and an accessible one.
The easiest approach is to consider contrast while choosing your colors rather than trying to fix every color combination after the website has been designed.
Pick your primary text and background colors, check their contrast, and then do the same for your links, buttons, headings, and other important elements.
Once you have a color palette that works, use those colors consistently throughout the website.
Use a contrast checker
If you want to test specific color combinations, see our guide on how to test the color contrast of your website for accessibility.
A few minutes spent checking your colors can make your website easier to read for a much wider range of visitors.
Ready to design & build your own website that meets accessibility standards? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.
Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.