Have you thought about the readability of your website? The colors you choose can impact how readable people find your website to be. If people can’t read your website, they may become frustrated and go somewhere else. How do you choose the best colors? By testing your color combinations for contrast.
Image by vixrealitum from Pixabay
What is color contrast?
Contrasting colors or complementary colors are from different segments of the color wheel. For example, red is a warm color and blue is a cool color. They appear on different segments of the color wheel which makes them contrasting colors.
By using contrasting colors in web design, you provide enough contrast between content and background so that your website is readable to as many people as possible. You want to make sure your buttons, body text, logos and other content has the right amount of contrast.
1. Choose a color palette
For some projects, you may have a pre-existing color palette to work with. If you don’t, use a tool like Material Palette or Colormind to choose a color palette. Or choose from these 90 Accessible Color Classes to build your palette.
2. Find a color contrast analyzer
You can find many color contrast testing tools on the web. Pick one that works for you. Here are a few to test out:
3. Pick your primary colors
Is your theme light or dark? You want to pick colors that work best with the types of colors for your theme.
4. Choose colors for the body text
You may need more than one color for the body text. Each color can be for a specific task like headers, body and sub-headers.
5. Select colors for buttons and links
Buttons and links tell users that you want them to do something. You want to pick colors that draw attention to them and easy to read.
6. Establish color combinations
You may need to add error messages, calls to action or other areas for users to pay attention to.
7. Check your results
After you build your website, use the accessibility checker in the browser for any additional issues. If you find problems, use a contract analyzer and retest.