Accessible Web Design

Increasing Contrast

The contrast between all elements of a website should be high enough to allow viewers the ease to distinguish between components without straining their vision. Contrast is most often associated with color, but there are multiple properties of color that contribute to creating contrast.

Hue and Value

What we usually think of when we say "color" is a combination of hue, shade or tint, value, and intensity that come together to make one color.

Hue is pure color, like primary, secondary, and tertiary colors. Colors can be made darker or lighter by adding black or white to the hue, which are a color's shade or tint. Altering the shade or tint of a hue enough will create a different color, like adding white to tint a red hue and creating pink.

hue spectrum shown as a bar — Spectrum of pure hue, often seen as a wheel

To understand contrast, it's important to understand value. If a color were to lose all of its hue, only a shade or tint or gray. This is a value scale, all of the values from black to white, often called a gray scale.

High color contrast for accessibility in web design is centered around the values of two colors, and choosing two colors with contrasting values will create the most visually pleasing and accessible websites. Contrast can apply to many aspects of a color, but a high contrast in hue and low contrast in value will create a difficult to read and unpleasant viewing experience. In fact, the best color choices for web design are often more similar in hue and different in value.

Two images, one with white text on a blue
background and the other with red text on a green background — High value, low hue contrast on the left
low value, high hue contrast on the right

The image above is an example of two images with high contrast. The first has high value contrast, with a lower value blue hue background, and higher value white text. Since white has no hue, this is an example of good contrast.

The second image a high hue contrast, meaning the green background is on the opposite side of the color wheel from the red text. The value of these two colors has very low contrast, so if the hue were removed from both colors, the remaining value would be about the same color of gray.

Contrast Ratio

The Web Accessibility Initiative has multiple levels of contrast ratio requirements in its Web Content Accessibility Guidelines, but sticking to the highest ratio is generally the best choice for accessibility.

The ideal contrast ratios are 7:1 for small text and 4.5:1 for large text, which is defined at 18 point and larger, or 14 point bold or larger. There are many websites available to check the contrast between two components by entering the color codes of each.

Online contrast checker shows the
contrast ratio between a dark gray and light gray — WebAIM hex color code contrast checker

Try checking the contrast between two colors by using the contrast checker on the WebAIM website.