search

HyphaApp / hypha

Submission management software for open calls
http://docs.hypha.app/
BSD 3-Clause "New" or "Revised" License
69 stars 38 forks source link

Various pages have text not color contrast accessible #1222

Closed elioqoshi closed 4 years ago

elioqoshi commented 5 years ago

The header image on the Results & Learnings page is so bright, that basic WCAG color contrast standards are not met.

image

https://www.opentech.fund/results/

The ratio is 1.43:1 at some points. (4.5 is suggested) for WCAG AA.

This can be fixed by choosing a darker header image. Maybe a darker blurred out version of something like this: https://unsplash.com/photos/8RX3W79_UTE

elioqoshi commented 5 years ago

Same with other pages: https://www.opentech.fund/labs/ https://www.opentech.fund/about/ and even the landing page hero.

A good solution is using the same imagery, but adding a layer effect on top of it>

Some content uses colors which don't reach WCAG AA as well: image

elioqoshi commented 5 years ago

@frjo @dmcdev1 this would be great to be addressed in tandem with the new page designs. Happy to assist with this.

frjo commented 5 years ago

@elioqoshi We should definitely fix this.

Background images it not something we developers control but things like the light red text for deadlines definitely is.

Will replace that with a darker red.

Are there other parts that have problems as well?

Sent with GitHawk

elioqoshi commented 5 years ago

Background images it not something we developers control

I was actually thinking the images could be converted to grayscale and overlaid with a the OTF blue with a screen layer effect. This should be doable via CSS even.

Will replace that with a darker red.

I'd suggest use a larger framework to follow a system rather =fixing single bugs. But for the time being that should fix it.

Are there other parts that have problems as well?

Probably. I only had a quick color contrast look. The site would benefit from a generic accessibility audit which might be more work.