Accessibility Kiwi

Content and functions

• Use colors.
• Don’t rely solely on colors.
• Always add visible alternatives.
• This criterion focuses on people with visual impairments without assistive technology.

Visible alternatives

• Icon
• Typography
• Symbol
• Pattern
• Contrast
• Text

Examples

Colors are used in a wide variety. These examples are very basic.

Form verification

Problem

• Some people have difficulty distinguishing between the neutral and red borders.
• Problems can’t be identified and no help is offered.

Alternative

• Symbols are hints without relying on color.
• Text is a clear definition without relying on color. It supports clarifying the problem and helps solving it. Moreover, text is a part of 3.3.1 Error identification.
• The text color needs enough contrast.

Disabled elements

This criterion doesn’t mention disabled elements. Even though disabled input fields shouldn’t be used at all, they would need more than just a lighter color.

Inactive components are also mentioned in 1.4.3 Contrast (minimum), increasing the recommendation of avoiding disabled elements.

Links within text

Problems

• Limiting the difference between text and links to a hover effect basically makes links invisible. They can only be found by hovering with the assumption it might be a link.
• Changing the color of links without sufficient contrast may make them difficult to identify for some users.

Alternatives

• The common way of visualizing links is setting an underline which is always visible.
• If the design would like to focus on a different color, the color needs to have a contrast of 3:1 to the text color and 5:1 to the background color. Since it relies on contrast, only two states are possible, for example “normal text” and “link”. More details are in Technique G183.
• typographic options, for example bold, italic or a clearly visible alternative font
• symbols aligned with the link, for example an arrow

Links outside text

This example doesn’t include links outside text. They don’t necessarily adhere to these alternatives, as they can be identified based on their page context, for example header or navigation.

Map

Problem

• The map of a transportation system only displays each route in a different color.
• Each stop is marked with a circle.

Alternative

• Each route has a color and a symbol.
• Each stop is marked with the symbol of the route.

Chart

Problem

• A chart with four areas differentiates them solely based on colors
• The labels of the charts are associated only with the colors.

Alternative

• Each bar is filled with a unique pattern.
• The labels of the charts are associated with the patterns.

Users

• people who can’t distinguish colors and don’t use assistive technology
• people with limited technology, for example monochromic displays
• people who benefit from colors
• Around 8 % of men are colorblind – this should convince the old white men in the boardrooms to invest into accessibility.

Tools

• Settings, for example on a Mac
• WebAIM contrast checker
• WhoCanUse color checker

Relation

• 1.3.3 Sensory characteristics (A) includes color, however, it always relies on text alternatives.