Color accessibility tests

[pgregorova]

Expanded on what Conner has started but mainly wanted to make sure we test for the three font sizes that WCAG 2.0 usually tests for color contrast.
Normal text is defined as typically 12pt (16px)

Large text is defines as:

• 14pt (18.66px) and bold or larger
• 18pt (24px) or larger

[drolsen]

I really feel the tests are starting to get very busy visually and might start to impede into the usefulness of the tool if becomes too complex to visually compare..

So, with that I've added new GUI controls to the colors page now to better help break these tests up visually.

• Accessibility Level
• Test Size/Weight
• Color Name (search field)

@CSKingMartin @bstaruk @pgregorova Let me know what you think!

[pgregorova]

@drolsen I love this new enhancement! This is so much better without all the business while still testing correctly for all the scenarios!. Thank YOU!

[CSKingMartin]

@drolsen I really like this as well! If you wanted, I think that our resident designer Chris would love to give input as well if you are worried about mucking up the UI

[pgregorova]

@drolsen It does fail npm run build with following error:

var level = document.querySelector('.SgColorSwatch__controls--level');
ReferenceError: document is not defined

[drolsen]

Relocates of ColorSwatch__control's init to styleguide.jsx prevents the JS from trying to run server side.
@pgregorova This should fix that issue!!

Thanks!