search

wellcomecollection / wellcomecollection.org

🪟 Wellcome Collection's website and services that support it
https://wellcomecollection.org
MIT License
39 stars 5 forks source link

Insufficient colour contrast on digital story nav #606

Closed gestchild closed 6 years ago

gestchild commented 7 years ago

Some text has an insufficient contrast ratio and is failing WCAG 2.0 conformance criteria.

White chapter text on chapter indicators

~Green link colour (e.g. Twitter link on articles) and hover colour (article label and headings hover on landing page) on beige~ - fixed

~Captions (in article) and promo text (on landing page) on beige background~ - Fixed

Article page example: https://next.wellcomecollection.org/articles/eels-and-feels

Landing page: https://next.wellcomecollection.org/explore

eels and feels wellcome collection

gestchild commented 7 years ago

@Norvard any thoughts?

Norvard commented 7 years ago

Yea I noticed this also some time ago. I think we need to up the darkness of this copy. We changed the background colour some months back and the light text needed to follow that

tjp2579 commented 7 years ago

Hello All im new at github would like to help out am I in the right place? If so is this your problem that needs solved.

gestchild commented 7 years ago

@Norvard do you have suggestions for the colour changes, thanks

Norvard commented 7 years ago

When we darkened the beige background, it affected some of legibility. So I think we actually have to lighten the background a tiny bit, and then also darken some of the text elements, plus include a dark text link teal to our colour palette so that smaller links such as the Twitter handle work.

I have checked the below colours against an accessibility checker so they should be kosher.

New beige background colour: f0ede3 All text, including image captions, should be set to our black: 1d1d1d New darker text link teal: 034e44

Unfortunately, due to the fact that we lighten the beige background, on weaker monitors the contrast between this and our white background does not register. Its a loss but it does not affect legibility as white is only used as a container.

Norvard commented 7 years ago

As for the digital story title card... not really sure how to go about working with that. @gestchild Is the legibility due to the blue background, or the image, or both?

gestchild commented 7 years ago

It's the white (#fff) on the turquoise (#5cb8bf)

Norvard commented 7 years ago

If that container does not pass accessibility, then we need to rework the design of that a bit. We cant just simply change the colours as those are our digital brand colours.

Its a weird case as there is both colour bars and dark image behind the type...

jennpb commented 7 years ago

@gestchild @Norvard Can I just confirm that the problem that remains is just the digital story navigation, and that other contrast issues have been fixed?

gestchild commented 7 years ago

@jennpb yep, that sounds right to me

jennpb commented 7 years ago

Let's do a bit of research on the digital story nav first (as in #786) to see whether this warrants a redesign at this stage. @hthair @Heesoomoon