Published on | Prototyping: From UX to Front End — Medium Paul Champion Photo by Greyson Joralemon on Unsplash

Welcome to the first post of the series ‘Accessible components’ where I’ll be looking at the basics of making your web components accessible. Basics or not, these are easy to miss especially when your component is used within the wider site architecture.

It’s important to remember that your component is only a small island in a much bigger world. Referring to Brad Frost’s atomic design is a good start to truly understand how a component based project should work.

With that in my mind, we still need to make sure that each component is not only accessible but remains accessible when added within our site, not only at component level but at site level also.

Colors and contrast

With anything reusable you need to carefully plan where your element will be used. Color and contrast may well be defined within the design stage but try to identify all permutations of your component.

For example:

does your component always want a blue background or white text?
What happens if your component is used on a black background in one place and on a white background in another.
Is the color contrast accessible?

Color contrast doesn’t only matter to those with color blindness or those who are visually impaired but also to fully sighted people — everyone!

Screenshot taken from https://mdbootstrap.com/css/colors/

If your component relies on complex and specific styling, don’t be afraid to delve into a primary or secondary palette etc. You can do this by creating multiple colors in your CSS, rather than defining a single color.

<!-- This block has a white background -->
<div class="btn-block">

  <h2>Purchase options</h2>

  <!-- The primary button class makes our buttons blue-->
  <my-button id="delivery" class="primary">Delivery</my-button>
  <my-button id="collection" class="primary">Collect</my-button>

</div>

<!-- This block has a blue background  -->
<div class="btn-block alternate-row">

  <h2>Purchase options</h2>

  <!-- The secondary button class makes our buttons white -->  
  <my-button id="delivery" class="secondary">Delivery</my-button>
  <my-button id="collection" class="secondary">Collect</my-button>

</div>

Other alternatives may be something like a template, which forms a container for your components. This may use a class to apply the styling and color to it’s child elements.

This way, means you keep your color/theme styling out of your component style file and keep at a more generic level. I’ve seen accessible examples similar to this:

<!-- Alternate row has a darker background so applies a lighter accessible styling to these buttons -->
<div class="btn-block alternate-row">

  <h2>Purchase options</h2>

  <my-button id="delivery">Delivery</my-button>
  <my-button id="collection">Pay and collect</my-button>

</div>

A much more complex way; which I’d try to avoid unless you have no choice. Is by giving your component an attribute where a color variation can be passed into, such as ‘primary’ or ‘secondary’ or a brand color.

<my-component id="myComponent" background-color="blue"></my-component>

To test your color contrast, you can use this free handy online tool:

WebAIM: Color Contrast Checker

The second edition will follow within the next week or so, if you have anything you’d like me to cover or just any questions regarding this post then fire a comment below.

Thanks

If you liked this post, please hit both the follow and clap buttons below. You can also follow me on twitter at @paul3to to keep up to date with future posts.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Accessible components: colors and contrast was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Accessible components: colors and contrast

Cool stuff, every week

More Articles