Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

Check color contrast #68

Open
davecranwell opened this issue Jul 13, 2016 · 7 comments
Open

Check color contrast #68

davecranwell opened this issue Jul 13, 2016 · 7 comments
Assignees

Comments

@davecranwell
Copy link

davecranwell commented Jul 13, 2016

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
Copy link
Member

@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
Copy link

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.

@bradfrost bradfrost self-assigned this Oct 9, 2017
@bradfrost bradfrost changed the title Physical effects of viewing website Check color contrast Oct 9, 2017
@MaffooBristol
Copy link

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
Copy link
Member

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:
image

Sample from the front page:

image

image

@theodorosploumis
Copy link

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
Copy link
Member

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
Copy link
Member

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants