Skip to main content

Exercise 2 - Activity 5

Fixing highlighted value component​

We will continue editing our components by identifying and fixing the contrast options with the Highlighted value component. We are starting in the Editing view of the Component Overview page.

  1. In the Stage, scroll until you find the Highlighted value component and it's variants.

  2. You will find a red triangle next to multiple of the Highlighted value component's variants. Let's go ahead and click on High.

  3. On the Component Options pane to the right, you can see that the red triangle is under "Accessibility" next to the Tertiary variant. Click on the pencil icon.

  4. We are now in the Component Editor. You can see that the compatibility issue is on the icon color to the right.

  5. Click on the color box next to Icon color.

  6. At the bottom of the pop-up you'll see that the Contrast ratio is currently at "2:1".

  7. At the top, click in to the Search for color search bar.

  8. Type in "Alert".

  9. Scroll down and select colors in the Alert-high category until you find a compliant orange color. Optionally, you can check off "Hide inaccessible choices" at the bottom to make your life easier.

  10. Click Save changes.