Colors and contrasts

Synonyms: Color coding, color, contrast

See also: text, font, graphics, contrast adjustment

Colors are an important visual design tool. People with impaired vision may not perceive colors or differences in color (contrasts), however.

To comply with EN 301 549: 9.1.4.1 and 11.1.4.1, respectively, a distinction must be made between two different forms of color coding:

• the color difference conveys a piece of information,
• the color itself conveys a piece of information.

Examples:

• The active menu item has a gray background color, all the other menu items have a white background color.
• The text color is black and the link color is blue.

If the colors themselves have no meaning, but only the difference between the colors does, a contrast ratio of at least 3:1 between the colors is sufficient.

The use of another visual method, however, (e.g. icon, font style, size, position, shape, border, underline, text) to reproduce the information conveyed by the color difference is recommended, e.g.

• The active menu item has a bold font style, all other menu items have a normal font style.
• The text is not underlined, but all links are underlined.

Note: EN 301 549: 9.1.4.1 and 11.1.4.1 formulate requirements for visually impaired people who use the application without assistive technology. For users of assistive technology, according to EN 301 549: 9.1.3.1 and 11.1.3.1.1, additional requirements apply with regard to the color coding, e.g.

• To enable blind people to perceive the information conveyed by color difference, this information must be communicated to the Accessibility API programmatically or in text form.
• To enable users of the Windows Contrast Adjustment to perceive the information conveyed by color difference, this information must be conveyed programmatically (see Practical tip: contrast adjustment), by another visual means (see above), or in text form.

Examples:

• Incorrectly filled out form fields have a red border, correctly filled out form fields have a green border.
• Different background colors are used for messages: red for warning messages, green for success messages and yellow for tips.
• In a financial statement, losses are shown with a red-colored text and profits with black-colored text.

In these cases, the color itself provides a piece of information, and not just the difference between the colors. Therefore, a contrast ratio of at least 3:1 between colors is not sufficient in this case. Another visual method must certainly be used to convey the information, e.g.

• The incorrectly filled out form fields have an error icon (e.g. an exclamation mark in a red circle) and the correctly filled out form fields have a success icon (e.g. a check mark in a green circle). An expressive error message is also displayed in text form in order to comply with EN 301 549, 9.3.3.1 or 11.3.3.1.
• The messages each have a heading that conveys the status (e.g. “Warning”, “Success” and “Tip”).
• In the financial statement, losses are shown with a minus sign in front of the number.

Note: EN 301 549: 11.1.4.1 formulates requirements for visually impaired people who use the application without assistive technology. For users of assistive technology, according to EN 301 549: 11.1.3.1.1, additional requirements apply with regard to the color coding (see above).

Regarding the contrast requirements, the WCAG assumes that anti-aliasing has been disabled. However, this is unrealistic, as most users work with anti-aliasing enabled. Due to the anti-aliasing, in case of thin line thicknesses, the actual contrasts can be significantly below the contrasts that are calculated from the color values. Therefore, either the line thickness or the colors should be adjusted in such a way that the contrast ratio (of at least 4.5:1 for text and 3:1 for content of graphics) can also be maintained when anti-aliasing is enabled. Because the anti-aliasing can be configured differently, it is not possible to specify exact values. However, in most cases the following guideline values will help to ensure that the contrast ratios can be maintained:

• minimum line thickness of 2 px or
• doubled contrast ratio at lower line thicknesses (e.g. at least 9:1 instead of 4.5:1).

In this context, it should be noted that a line thickness of 2 px is only achieved for letters above a certain font size; from 25 px for Arial and from 75 px for Times New Roman.

For example: In the following two figures, the letter “x” and a forward slash (“/”) are shown three times in the font style “Times New Roman” and with the font size 16 px. The contrast between the gray and/or black text color defined in the CSS and the white background is:

• Left: 4,5:1,
• Center: 7:1,
• Right: 21:1.

This means that the required minimum contrasts will be maintained throughout the text. In the considerably magnified presentation, however, it can be seen that due to the anti-aliasing, the contrasts calculated for the “x” are only partially achieved with the thicker downward line (diagonal line from the top left to the bottom right) and the horizontal serifs. For the thinner upward line (diagonal line from bottom left to top right), the contrast is clearly below this, e.g. at the most in the lower range at:

• Left: 2,9:1,
• Center: 2,9:1,
• Right: 5,2:1.

For the forward slash, the calculated contrasts are not achieved at any point.

• Left: maximum 2,4:1, average approx.. 2,0:1,
• Center: maximum 2,5:1, average approx. 2,1:1,
• Right: maximum 3,5:1, average approx. 2,3:1.

Information about this article

Date:

21.10.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!