Skip to main content

Why Consider Color Contrast in Web Design?

Several images of differently-colored ovals on differently-colored backgrounds

When thinking about the color scheme for web pages, developers and designers typically focus on what colors are the most visually appealing. Often times, developers have no control over what colors are used, and instead this decision is made by other members of the company who want to closely resemble brand colors. However, an important aspect to consider with relation to the website’s color scheme is, how much contrast does each color pairing have? Will all users find this content legible with the chosen colors?

Is color contrast an accessibility issue?

You bet! Color contrast is important to take into consideration when designing digital materials because low vision and color vision deficiency (or “color blindness”) are quite common. When color pairings are used without enough contrast, text can be difficult or impossible for users with low vision or color vision deficiency to read. Even if you have no color vision deficiencies, trying to read light yellow text on a white background is not the easiest, right?

Light yellow text on white background

What are the specific contrast guidelines I should follow to ensure my designs are accessible?

Color contrast is addressed under WCAG guideline 1.4, specifically in success criterion 1.4.3, which states that “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.” However, there are a few exceptions to this rule:

  • Large Text: Since enlarged text is easier to read when used with a lower color contrast ratio, large text and medium bold text can satisfy the guidelines if there is a contrast ratio of at least 3:1.
    • Medium bold text: At least 14pt font, but must also be bold (font-weight of at least 700).
    • Large text: At least 18pt font.

Incidental Text: Text used for purely decorative purposes, or text used on an inactive actionable element (such as a disabled button). In the example below, the important text (“Come visit us at 12 Main St”) needs sufficient contrast since it conveys information; however, the text in the background image is purely decorative. The text in the background image would meet this exception since it is considered decorative and incidental, and would not need to have sufficient color contrast.

Foreground image: Bold text reading "Come visit us at 12 Main St" on gray background.

Logos: Any text that is part of a logo or brand name. In the example below, the yellow text color used in the Google logo does not have sufficient contrast, but would meet this exception since it is part of a logo.

Google logo

What does this mean? How can I ensure the color pairings I use are accessible?

Well, test those color pairings to find out the contrast ratio! There are a multitude of online resources, such as the WebAIM Color Contrast Checker, to test for color contrast ratios by entering hex color codes or RGB values. Remember to take into account the font size of your content to determine if the contrast ratio needs to be 3:1 or 4.5:1. If the contrast pair that you are testing does not have a sufficient contrast ratio for the text size used, the easiest solution is to darken (or lighten if two dark colors are used) one of the colors until a sufficient contrast ratio is met.

How can I ensure my designs have sufficient color contrast when I have text overlaying a multi-colored background?

This is a slightly more complex situation because the color of the font needs to have sufficient contrast with every color in the background that the font is touching to be fully legible for everyone. In this scenario, instead of trying to find a font color with sufficient contrast for all background colors, we recommend adding an opaque background just behind the text. Then, make sure the font color has sufficient contrast with that opaque background color. One great tool for this scenario is http://www.brandwood.com/a11y/. For example:

White text on transparent background

White text on opaque background

Is all of this really necessary? Can’t color-blind individuals use assistive technology to adjust the colors displayed on their screens?

There are a variety of browser extensions and other software programs designed to help users adjust the color contrast of web pages as needed. However, since the degree of color vision deficiencies varies so greatly for each individual, these programs do not always work as well as intended. Users cannot always customize the settings to exactly fit their contrast needs, so while this software can be helpful in many situations, it does not always work. These types of programs can also interfere with the expected functioning of the page, such as hiding images, lagging issues, and blurriness. Another main concern is images of text. Using images of text can actually violate WCAG 1.4.5 in which users must be able to customize the image of text according to their specific visual display needs. Assistive technology typically does not allow users to adjust the colors used within images of text.

Conclusion

Whether you are looking to ensure your website meets WCAG guidelines, or you are interested in making your website as inclusive as possible, it is best practice to consider color contrast when designing and building out your web page, and ensure all text and images of text have sufficient contrast ratios.

← Return to the blog

Find out how A360 can help

1422 W Lake Street
Suite 314
Minneapolis, MN 55408

ph: 612-440-3601

info@accessible360.com