ProjectMirador / mirador

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.
https://projectmirador.org
Apache License 2.0
551 stars 256 forks source link

WCAG Failure: Color contrast of thumbnail text on thumbnail is too low #3917

Open patdunlavey opened 4 months ago

patdunlavey commented 4 months ago

From an accessibility audit of our Mirador 3 install:

Recommendation: Use a darker gray on the thumbnail text.

lhenze commented 3 weeks ago

Hi there, looking at this in the context of Mirador 4 -- what I see is white text on top of each image now. Am I looking in the right place? If so, yes, this is still an issue, because the background of the text is transparent, and so the contrast can't be predicted.
Image

lhenze commented 3 weeks ago

To amend this a bit, there is a now gradient behind the text. If I put an all-white image in the thumbnail, the pixels for the background read as #AAAAAA at the top, which set behind white text provides a 2.32 contrast. So the gradient helps a lot but it's still potentially below the required contrast.

Image

Here's what it would look like with gradient removed at background set at #757575, providing 4.61 contrast.

Image

Thoughts on this, other design ideas?