BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0


MetLife is committed to designing and developing digital experiences for everyone, which is why we have invested in being ADA compliant to deliver usable experiences for all our customers.

ADA Guidelines

WCAG 2.0 guidelines outline three levels of compliance for digital.

  • Level A: the minimum level of support
  • Level AA: more comprehensive - MetLife Standard
  • Level AAA: the strictest level of compliance

MetLife digital properties must be ADA Level AA compliant globally. Our UX Design System meets Level AA, individual regions and markets should check their country's compliance standards.

  • • Provide sufficient contrast between foreground and background
  • • Don't use color alone to convey information
  • • Ensure that interactive elements are easy to identify
  • • Provide clear and consistent navigation options
  • • Ensure that form elements include clearly associated labels
  • • Provide easily identifiable feedback
  • • Use headings and spacing to group related content
  • • Create designs for different viewport sizes
  • • Include image and media alternatives in your design
  • • Provide controls for content that starts automatically


The following are areas you should keep in mind when designing for accessibility.

Clarity: By reducing visual clutter and providing an adequate amount of color contrast, we can make it easier for our users to be able to read and scan our content and data.

Navigation: Give users more than one way to navigate our content.

Readability: Ensure text is easy to read and understand from a visual and cognitive perspective.

Video & Audio Alternatives: Provide closed captioning and descriptions of audio so that users have an alternate way of understanding the same information.

Text Alternatives: For any information that is non-text (i.e., images, buttons without text, etc.,) provide a text alternative. Text transcripts should be required for any video or audio content.

Accessibility via Keyboard: All functionality must be made available from a keyboard, such as tabbing to navigate a page.

Validation & Input Assistance: The experience should be forgiving. Assisting our users avoid making mistakes, offering more context, help text, and allowing them to easily make corrections.

Color & Contrast

Color is one of several ways we can visually convey information on the web. It is important to assist our users who have difficulty distinguishing one color from another.

Color Blindness

Low vision can make reading and differentiating between low-contrast text and colors a challenge. People with this condition may experience things to be hazy or blurry, and can have blind spots in the center or periphery of their vision.

Color blindness is also extremely common. It’s estimated that 1 in 12 men and 1 in 200 women experience some form of it. Color blindness can take on many forms, but two of the most common types are protanopia and deuteranopia. Both of these can make it hard for people to differentiate between reds, oranges, browns, and greens, and sometimes between blues and purples.


Additional Visual Cues

Include other design elements in addition to color to help ensure that colorblind users understand visual cues. Use elements such as strokes, indicators, patterns, texture or text to describe actions and content.



While designing, consider how our text color selections contrast against the background color. According to the Level AA guidelines, the contrast ratio between the text and its background should be at least 4.5 to 1. This guideline and how it applies to MetLife is covered more extensively in the guidelines for Color.



MetLife's approved tool for checking color compliance is available for Mac and PC here:
Paciello Group Color Contrast Tool

The following tools also can be used to check your color contrast ratios and ensure compliance against Level AA guidelines:

Color Contrast Checker  |   Sketch Plugin  |   Adobe XD Plugin

The following chrome plugin can be used to check your color contrast ratios in browser, if there are texts is on the gradient or image background.

Chrome Plugin for Color Contrast

Images & Video

Images should be coded with descriptive Alt tags so that users who are unable to see or understand these images have context for what they are. Images that are decorative and don't add information to the content of the page can have empty alt tags (alt="") so they are ignored by assistive technologies.

Images we use to convey information (such as diagrams), should contain alt tag information and long description text in a separate document as applicable. Videos should be accompanied by captions. When working with third party vendors, ensure the video iframe has a title and that captioning is provided when appropriate.