Compatibility:

WebSite X5 Evo and Pro

One of the fundamental aspects of creating an accessible website is color contrast.


Inadequate contrast can be a significant barrier for people with visual impairments when browsing. Therefore, it is essential to pay particular attention to color choices, ensuring they always provide appropriate contrast. This not only enhances the browsing experience for people with disabilities but also contributes to a more refined and functional design, benefiting all users.


In this guide, we will cover:


Color contrast: what it means and why it is important for web accessibility

Color contrast refers to the difference in brightness between text (or other foreground elements) and the background on which it is placed. This brightness difference is expressed as a ratio ranging from 1:1 (e.g., white on white) to 21:1 (e.g., black on white). To provide a reference, on a white background:

  • Pure red (#FF0000) has a contrast ratio of 4:1. For example: "I am red".
  • Pure green (#00FF00) has a very low contrast ratio of 1.4:1. For example: "I am green".
  • Pure blue (#0000FF) has a contrast ratio of 8.6:1. For example: "I am blue".

Even with these examples, it is easy to understand that insufficient contrast can make reading difficult, especially for people with visual impairments or conditions such as color blindness. Therefore, ensuring adequate contrast improves both usability and accessibility of a website.


WCAG guidelines – success criteria for improving color contrast

How should color contrast be properly managed? The success criteria of the Web Content Accessibility Guidelines (WCAG) to refer to are essentially three:

In addition to these, there is the success criterion 1.4.1 Use of color, which refers to contrast ratio to indicate how to properly handle links that are differentiated only by color.


1.4.3 Contrast (minimum)

According to the mentioned guidelines, text must have sufficient color contrast with the background it is displayed on to ensure readability. To achieve this, the Minimum Contrast criterion states that the contrast ratio must be at least 4.5:1 for regular text and 3:1 for large or bold text.


Below are examples of text with a contrast ratio almost exactly equal to 4.5:1.

  • Gray (#767676) on white
  • Purple (#CC21CC) on white
  • Blue (#000063) on gray (#808080)
  • Red (#E60000) on yellow (#FFFF47)

As you can see, even though these combinations meet the required contrast ratio, some of them may still not be highly readable. This is why the 4.5:1 ratio is the minimum required by WCAG.


It is important to note that the minimum contrast requirement also applies to text placed inside an image. In the following example, the text does not have sufficient contrast.


WCAG 2 also specifies that the color used as an outline, shadow, or background for text can be considered part of the foreground color when measuring contrast. Based on this clarification, the following texts all have the same contrast ratio. 


Finally, it is important to remember that there are exceptions to the minimum contrast requirement:

  • Large text: According to WCAG, this refers to text that is 18 points (equivalent to 24 pixels) or larger, or 14 points (equivalent to 18.67 pixels) or larger if bold. Since this text is already easier to read, the contrast ratio requirement is reduced to 3:1.
  • Incidental text: This includes text that is part of inactive elements (e.g., a disabled button), purely decorative text, hidden text, or text in an image that does not provide essential information (e.g., writing on a person’s t-shirt). These types of text do not need to meet contrast requirements.
  • Logos: Text that is part of a logo or brand name is not required to meet contrast requirements.


1.4.6 Contrast (enhanced)

Meeting the Minimum Contrast requirement ensures compliance with Level AA, which is mandated by current regulations. The Enhanced Contrast requirement takes it a step further, requiring a contrast ratio of 7:1 for regular text and 4.5:1 for larger text. Complying with this stricter criterion is a step toward achieving Level AAA accessibility—it is recommended but not required.


1.4.11 Non-text contrast

The Non-text Contrast criterion (Level AA) states that for user interface components and graphical objects, a contrast ratio of at least 3:1 between adjacent colors is required.


User interface components include buttons and form fields. In general, all colors used for the different states of these components must meet the 3:1 contrast ratio, unless using browser default styles.


Regarding graphical objects, they must meet the required contrast ratio only if they are essential for understanding the content and as long as compliance does not alter their meaning. Photos, screenshots, and logos fall into this category: even if they contain adjacent colors that do not meet the contrast requirement, they should not be altered.


1.4.1 Use of color

Criterion 1.4.1 requires that color should not be the sole visual means of conveying meaningful information or instructions.


Let’s look at an example to better understand this criterion. Simply highlighting the borders of unfilled form fields in red is not correct: for users who cannot see or distinguish red, the error message would be undetectable. However, if an alert icon is displayed in addition to the red border, the message becomes clear to all users.


The criterion on the use of color overlaps with those on contrast when color is the only distinguishing feature of a hyperlink. When the link is within body text (not navigation menus) and color is the only indicator (because underlining has been removed), the following must be ensured:

  • The link text must have a contrast ratio of 4.5:1 (Criterion 1.4.3 Minimum Contrast).
  • There must be a contrast ratio of 3:1 between the body text and the link text (Criterion 1.4.11 Non-text Contrast).
  • A “visual cue” (beyond just a color change) must appear when hovering over the link, such as underlining (Criterion 1.4.1 Use of Color).

Meeting all three of these requirements at the same time can be challenging, especially since link colors may change across different states. For this reason, the simplest choice for optimal accessibility and usability is often to keep underlining on links.


Managing color contrast in WebSite X5

In WebSite X5, there are many situations where you need to set a color or define text size: from customizing styles in various text editors to creating elements like buttons, forms, and galleries.


The software provides full freedom of choice without imposing restrictions on color combinations. However, it is the user's responsibility to ensure that the contrast is adequate to guarantee accessible pages.


To facilitate this verification, you can use online tools specifically designed to check whether the contrast between two colors meets the web accessibility standards set by the WCAG. Some of the most popular tools include:


Here are some tips for properly managing color contrast and improving your website’s accessibility:

  • Use high-contrast colors between text and background.
  • Avoid color combinations that are too similar, as they may make the text difficult to read.
  • Ensure that text is sufficiently large and easy to read.
  • Use bold or italics to highlight important information.
  • Make sure links are easily identifiable, without relying solely on color.
  • Do not convey essential information through color alone; combine it with other visual indicators (e.g., underlining or icons).


By following these guidelines, you can enhance your website’s accessibility and provide an optimal browsing experience for all users.