Contrast

Accessibility guidelines demand a certain contrast ratio between layers of elements displayed. The visual presentation of text, and images that contain text, has a contrast ratio requirement of at least 4.5:1.

To ensure your color selection is accessible you can use an accessibility checker such as https://webaim.org/resources/contrastchecker/ or any other WCAG recommended accessibility validation tool.

Examples:

The current default contrast of the Medallia Digital text is 10.24:1, for example:

This is because the survey's background is completely white (#FFFFFF) while the text is almost black (#40404A). Text that is surrounded by color must also adhere to the same contrast guidelines, for example:

States

It is not enough to measure the contrast of the default presentation of a user interface component. Each state of a component, such as fields, checkboxes, radio buttons, and so on, must also have 3:1 contrast. States are temporary changes in a component, usually because of a user interaction, such as hovering with a mouse or tabbing with a keyboard.

Example:

This field is now in focus with text input cursor waiting:

Non Text Elements

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

• User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.

• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Exceptions for the Contrast requirement:

The following exceptions exist to this 4.5:1 contrast requirement:

1. Large text Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.
2. Incidental WCAG 2.1 defines four types of "incidental" text that are not required to meet the contrast requirements.
   1. Inactive: An inactive element, like a disabled Submit button ( Submit ), is identified visually by its lower-contrast state.
   2. Pure decoration: Decorative text that is not meant to be read. An example of this might be a picture of a bookshelf on a library homepage. The titles of the books are not meant to be read by the user.
   3. Not visible to anyone: Text that is meant to be hidden, like an invisible skip link would not need to meet any contrast requirements until it becomes visible.
3. Part of a picture that contains significant other visual content: Text that is not an important part of the information in the image, like a name tag on the shirt of a person in a photo of a party, does not need to meet any contrast requirements.

4. Logotypes: Text that is part of a logo or brand name has no contrast requirement. For example the following text in a logo would be exempt:

   

Colors

Although there is no specific definition for a “prohibited” color in WCAG 2.1 it is imperative to remember that both text and non-text elements have sufficient contrast, especially if you are using only colors to indicate that a text contains a link.

Background Images

There is no issue with using decorative background images, however images that contain text such as “Thank you”’ or a similar message should not be used as they cannot be read by a screen reader.

Label Positions

In order to maintain accessibility it is important to maintain a direct and understandable connection between a survey element and its labeling.