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 also the use of color:

  • Check the color contrast of text against it’s background
  • Color should not be the only indicator for information or function

A few tips:

  • Website should be usable in grey scale – don’t use uncomfortable color combinations like bright green and neon-yellow or too-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 font than you might otherwise choose, so that it is still easy to read

About Color Contrast About Color Contrast

Considering 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 effects.

Color contrast should be high enough for good readability, but at the same time it should not be too bright for people with sensitive eyes or cognitive problems.

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 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

Instead, use additional styling to mark a function or information, that includes 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, your footer 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 Examples

Correct Correct

Underline your links, which are placed between text.

underlined links

Undelined links are easier to see

Use symbols and colors in graphics.

graphic in color + symbolsGraphic with symbols in black in white

Top ↑

Incorrect 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 use it in greyscale. When the color information is extracted, you can more easily see whether your website is still understandable.

Top ↑

Resources Resources

Top ↑

Guidelines Guidelines

Top ↑

Tools Tools

You can test color contrast with these color checkers:

Top ↑

Good reads Good reads

Last updated: