Exercise 2 - Activity 2

Editing components

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

1. Making sure you're in editing mode and on the Stage, scroll until you find the Button component and it's variants.

   

2. You will find a red triangle next to a few of the button component's variants. Let's go ahead and click on Primary.

   

   

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

   

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

   

5. Click on the white color box next to Text color.

6. At the bottom of the pop-up you'll see that the Contrast ratio is currently at "3.1:1". There are different levels of compliance for WCAG color contrast according to font size and other factors, but for this one we are looking for at least 4.5:1 contrast ratio.

   note

   For more information on color contrast and other web accessiblity standards, check out the WCAG color contrast checker on the Accessible WEB site.

7. Select brand-primary. (The first color box under "Brand colors")

   

8. You can now see that the Contrast ratio has updated to 4.5:1, and now has a green check mark. Click Save changes.

   

9. At the bottom we can see that no other States of the Button Primary variant have accessibility issues, so we are good to continue.

10. Click Return to component overview.