Use of color

Color is important to make a beautiful website, but not everyone sees colors the same way. That’s why it’s important to check color contrast and use of color:

  • Check the color contrast between foreground and background content
  • Verify that color is not the only way of indicating controls or content

Quick Tips

  • Websites should be usable in grey scale – be cautious about uncomfortable color combinations like bright green and neon-yellow or very high color contrast
  • Dark fonts on light backgrounds are easier to read for most people; but some users may need the reverse
  • If using a light font on a dark background, you should use a slightly larger or thicker font than you might otherwise choose, so that it is still easy to read

Top ↑

Color Contrast

Color contrast is an important issue to address for the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) of your website. It should be considered for foreground (text and other elements) and background colors (or images), but also between elements and hover or focus states.

Color contrast should be high enough for good readability, but should not be too bright for people with sensitive eyes or cognitive problems.There are no WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. criteria defining excessively high contrast, but very high contrast should be used selectively.

The WordPress project follows the accessibility level “AA”  of WCAG.

This requires that the contrast between background and foreground colors has a luminosity contrast ratio of:

There are many tools to check color contrast ratios. WebAxe published an overview of contrast checkers.

Top ↑

Not by color alone

Using color to differentiate between elements on a page is fine. However, you should avoid using color as the only visual means to differentiate parts of a page. For example,

  • error, success, or note messages
  • links in the content
  • active, hover or focus states
  • display information updates

Use additional styling to indicate types of information including a change of shape or decoration. For example:

  • Change symbols in addition to color
  • Underline links that are embedded in text

Grouped links in sidebars, footers, or in navigation menus frequently don’t need to be underlined. If it is obvious in context that the text is a link, underlines are not required. However, in many cases underlining can increase the usability of your website.

Top ↑

Examples

Top ↑

Correct

Underline your links, which are placed between text.

underlined links in body text
Undelined links are easier to see

Use symbols and colors in graphics.

graphic in color with differently shaped symbols
Graphic with differently shaped symbols in black in white

Top ↑

Incorrect

Links not underlined – color blind users may have trouble distinguish links from text.

Links are not seen on grey scale when there is no underline
Can you see the links now?

Color used as the only indicator for information or functionality

Graphic: only color used (no symbols)
Graphic: only color used (in black and white)

The easiest way to check whether your website is usable for colorblind people is to test it in grayscale. When the color information is extracted, you can more easily see whether your website is still understandable.

Top ↑

Resources

Top ↑

Guidelines

Top ↑

Tools

You can test color contrast with these color checkers:

Top ↑

Good reads

Last updated: