Contrast

Severity	Critical
Accessibility Principle	Perceivable
Affected users	Vision
Success criterion	1.4.3

Contrast refers to the difference in luminance or colour that makes an object (or its representation in an image or display) distinguishable from its surroundings.

Expectations

Affected group: People with moderately low vision

• When: Any text is presented
  • Then: They should be able to read it

• Text and Background Contrast: The text should have a contrast ratio against its background of at least 4.5:1. This is especially important for users with visual impairments or color blindness.

• Color Contrast: Colors used in graphics, buttons, links, and other UI elements should have sufficient contrast with adjacent colors. This ensures that users can distinguish between different elements, especially in interfaces where color is used to convey information or state.

note

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

WCAG: Contrast (Minimum) (Level AA)

AMA dev runtime errors

AMA performs a contrast check between the component background and its children for:

• ExpandablePressable
• Pressable
• TouchableOpacity
• TouchableWithoutFeedback
• usePressable

The check is performed on the component children and sub children up to a depth level of 5.

The minimum contrast ratio expected is at least 4.5:1, and by default, this is a mandatory requirement. While the enhanced contrast of at least 7:1 is a suggestion and therefore prints only a warning if it fails.

tip

Both Log level type and max depth level can be customised, here for more info

CONTRAST_FAILED MUST

This error is used when the contrast check between a component background and its children foreground one fails to reach the AA accessibility level.

CONTRAST_FAILED_AAA SHOULD

This code is used when the contrast check does not pass the AAA level.

Related AMA components