Skip to main content

Exercise 2 - Activity 3

Fixing form field component​

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

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

  2. You will find a red triangle next to one of the Form field component's variants. Let's go ahead and click on Valid.

  3. On the Component Options pane to the right, you can see that the red triangle is under "Accessibility" next to all of the states. Click on Go to component editor.

  4. We are now in the Component Editor. You can see that the compatibility issue is both the Border color and the Placeholder text color to the right. Click the pencil icon next to Default state.

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

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

  7. Select brand-secondary.

  8. Click Save changes.

  9. The error triangle didn't go away, and if we check the contrast ratio at the bottom is 1.8:1, which is too low. Next to the color box, click on the arrow pointing towards the left, which is the Undo arrow.

  10. You'll see your changes reversed. Click on the color box again and set it to Brand-primary.

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

  12. Resolve the Placeholder text color contrast issue by selecting a better gray then click Save changes.

  13. At the bottom, you can see the other states of the component are still out of compliance. Click on each state and resolve the contrast issues in each category until the triangles are gone.

  14. Once you are done with this, Click Return to component overview.