Publications Office of the EU
Color - Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar

Color

Last updated: 11/09/2026

Introduction

People with low vision often have difficulty reading text that does not contrast with its background. This can be intensified if the person has a color vision deficiency that lowers the contrast even further.

Providing a minimum luminance contrast ratio between the text and its background can make the text more readable, even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

Color contrast

Contrast ratio expresses the relative luminance difference between foreground and text and its background and its typically calculated using a contrast-checking tool.

The minimum contrast ratios are:

  • Normal text: 4.5:1 (text that does not meet the definitions of large text)
  • Large text: 3:1 (large text is at least 14pt/18.66px in size and bold, or 18pt/24px regardless of being bold)
  • UI components and graphics: 3:1 for non-text elements like icons, form field outlines, sliders and focus state indicators

Exceptions (no contrast requirement):

  • Text or images of text that are part of an inactive user interface component 
  • Text or images of text that are not visible to anyone or are part of a picture that contains significant other visual content
  • Text or images of text that are pure decorative - serving only an aesthetic purpose, providing no information, and having no functionality
  • Text that is part of a logo or brand name

Text that does not stand out enough from its background can be hard to perceive and read. As you can see on the below example, the white text used on a grey background produces an insufficient contrast ratio of 1.22:1.

Please note: To avoid the automatic accessibility audit failure for color contrast reqirement, we used the "image of text" elements to demonstrate a specific design failure. We provided alternative text attribute in the image elements to ensure the correct screen reader presentation:

Screenshot demonstrating poor color contrast. White text on a light grey background reads: '"If you find it difficult to read this sentence, you are experiencing the barrier of low color contrast." The text is deliberately difficult to read

In this another example, brown text used on a black background produces an insufficient contrast of 1.58:1:

Screenshot demonstrating poor color contrast. Light brown text on a black background reads: '"If you find it difficult to read this sentence, you are experiencing the barrier of low color contrast." The text is deliberately difficult to read

Color for meaning

We should not use color as the only visual way of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. 

In this case, we should provide an additional element to convey information and ensure that users who can not see color can still perceive the information, such as:

  • Shapes or icons
  • Borders or outlines
  • Patterns
  • Text tabels

In this below example, in addition to the red border alone which is insufficient as the sole visual indicator, an exclamation icon and error message was added to correctly indicate its error state:

Screenshot demonstrating a contact form with an incomplete Last name field. The incomplete field has a red border,an exclamation icon and error message: "Please complete this required field"

 

More resources

SC 1.4.1 Use of Color

SC 1.4.3 Contrast (Minimum)

(external link, opens in a newSC 1.4.11 Non-text Contrast

WebAIM Contrast Checker window)