Check color contrast - Githubissues

pattern-lab / website

Pattern Lab's website: patternlab.io

http://patternlab.io

57 stars 33 forks source link

Check color contrast #68

Open davecranwell opened 8 years ago

davecranwell commented 8 years ago

I'm finding the new website a bit of an assault on the eyes. I'm a glasses wearer, and I typically have my browser open around 2100x1100, but I doubt I'm unique in these regards.

The video encoding doesn't cope well with the atoms/molecules/organisms/templates/pages overlay. During the "Templates" and "Pages" sections, the overlay has a spike in artefacts and blurriness.
The video background colour also merges with the background of the tiles below it, making the impacts of part-blurry, part-crisp imagery all within the same region more pronounced/visually confusing.
The background arch patterns detract from readability, particularly behind the "Annotations" tile.
The blurred contributor images with their small centralised text add to the effect. It would be easier if their image:text ratio was a little more balanced.

The solutions I'd propose are pretty self-evident, I expect, but happy to detail.

bradfrost commented 8 years ago

@davecranwell Thanks for the feedback. Very much appreciated.

I'm not sure what can be done about the video, but will definitely have a look at the color contrast of the background image and contributor images. Thanks!

theodorosploumis commented 7 years ago

It seems that the contrast has big issues. I am trying to create a PR for this but I cannot find out how to build the site locally. It seems that it works with Jekyll but no Gemfile exist.

It would be great to have the "How to contribute" details on the README.md file.

MaffooBristol commented 7 years ago

We're talking about colour contrast, but I can't see any colour. Why is it all monochrome? If I looked at the website whilst listening to Elliot Smith, I think it'd probably be enough to send me to my death.

engelfrost commented 5 years ago

Decided to experiment with a color scheme, I figured some color would make it easier to help with the contrast issues. I'm not putting it up as w PR but here is my website clone: https://github.com/engelfrost/website/tree/website-colors

The color scheme:

Sample from the front page:

theodorosploumis commented 5 years ago

Maybe the sections with the solid background patterns should be a bit more lighter. Or remove these image patterns at all and use a solid background color.

bradfrost commented 5 years ago

Heya, thanks for this! Alas, we're in the process of redesigning the site in the open so this will likely all get bulldozed. Appreciate the enthusiasm though!

engelfrost commented 5 years ago

Cool! A whole new site is going to be way better than some quick color splashing.