All of these UI frameworks have contrast issues – WCAG

background

As a UI framework developer, MORE and more people are reporting the same problem to me: some links on web pages have a low contrast, which makes it hard to see on individual monitors. Older bosses are a special demographic for some OF the UI frameworks that serve the middle and back end products, and tend to have poor eyesight, so text contrast on a web page is particularly important.

Have you noticed that the Chrome console has a Contrast Ratio property for the CSS Color property when viewing the Styles element:

This is the color attribute of the A tag of A well-known UI framework. We can see that the Contrast ratio is 3.24, and there is A failure icon of 🚫, indicating that the Contrast ratio of this website link is problematic, and only 4.5 or more is qualified. Is this a common problem? Then I checked the contrast of A label color of some mainstream UI libraries on the market, as follows:

• 4.6 ✅ Material Design
• The React Suite 4.51 ✅
• Semantic UI 3.99
• The Bootstrap 3.98
• Ant Design 3.24
• Element 2.78 UI
• Layui 2.63

If the Material Design and React Suite link colors meet Chrome’s 4.5 contrast requirements, other frameworks have problems, a common problem that Web workers ignore. You might as well open your own website to see if there is a contrast problem?

As early as June 5, 2018, the W3C released version 2.1 of the Web Content Accessibility Guidelines (WCAG), which cover recommendations for making Web Content more accessible. They are the basic Guidelines for us Web workers. But there are some details that we tend to overlook, and here we will make a detailed analysis of the contrast.

Contrast standard

So, what’s the contrast standard?

It is clearly stipulated in section 1.4.3 of WCAG 2.1 that the minimum contrast value of text and image text is 4.5:1, that is to say, the contrast value below this value does not meet the standard. The calculation rule of contrast can be simply understood as the value obtained by dividing the relative brightness of two colors. For example, the contrast of two whites is 1:1, and that of white (#FFFFFF) and black (#000000) is 21:1, that is to say, the range of contrast is between 1:1 and 21:1.

In the WCAG 2.1 criteria layer, in order to make the criteria testable, a set of success criteria are defined to provide testable success criteria. To meet the needs of different groups and situations, three levels of consistency are defined for success criteria:

• Grade A (minimum)
• AA
• AAA (highest)

There are two success criteria for contrast requirements:

• Success standard 1.4.3 Contrast (minimum) Class AA
• Success Standard 1.4.6 Contrast (enhanced) AAA

To meet the AA criteria, text visual presentation and text images must have at least a 4.5:1 contrast ratio. If the contrast ratio does not meet this standard, the site has a problem with Web content accessibility. Does that mean that we have to have this standard for all elements in the web? Of course not, the minimum contrast standard for large text (18pt or 14pt bold or larger) is 3:1.

To meet the AAA criteria, text visual rendering and text images should have at least 7:1 contrast, and at least 4.5:1 contrast for large text and large text images.

In addition, there is no minimum contrast requirement for ancillary content such as purely decorative elements, inactive user interface components, text as part of a trademark name, and so on.

To solve the problem

Most designers of the display is often the top match in the industry, the display color gamut will naturally be very large, in some color selection is often ignored the problems of other equipment. If there is no condition to deploy all terminal equipment, then please refer to the standard, according to the criteria of success to design.

In React Suite 4.0, we improved the color contrast from 3:1 to 4.5:1, meeting the AA standard. We also provide a reference to the contrast standard in the palette tool so that you can customize your theme to meet the standard. React Suite is still in its 4.0 alpha version, with some finishing touches to the process, and I’d love to get your feedback.