Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
patdunlavey opened this issue Jun 11, 2024 · 2 comments
Open

Comments

@patdunlavey
Copy link

From an accessibility audit of our Mirador 3 install:

  • Failed WCAG Success Criteria: 1.4.3 Contrast (Minimum) (AA)
  • Color contrast of thumbnail text on thumbnail is too low at 4:1 vs. 4.5:1 required.

Recommendation: Use a darker gray on the thumbnail text.

@lhenze
Copy link
Collaborator

lhenze commented Sep 18, 2024

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

lhenze commented Sep 18, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Ready for Development
Development

No branches or pull requests

3 participants