Skip to content

Conversation

jurajkapsz
Copy link
Contributor

As a new Umami user, I've been going through the Umami docs and website a lot and I've noticed that community sites snippets are visually quite dimmed down and hard to read, almost as turned off, with color contrast of 1.53 (on contrast scale 1-21, 1 is invisible eg white-on-white, 21 being default/max contrast, black-on-white; according to accessibility standards, 4 is required minimum and 7+ recommended minimum). Additionally, there happened to be some invalid HTML.

I made some example changes in PR, if something should be useful from it:

  • Cleaned up HTML, which should also as a side effect improve technical SEO. I've used @umami/react-zen similar to the shiso blog implementation; also style-wise.
  • Fixed color contrasts up to 15 by removing the former light gray styling.
  • I've kept the target="_blank" link setup as it is used sitewide on similar link types, otherwise I'd remove it as it is not recommended practice nowadays in terms of best practices (ie only for certain cases; also, links that open a new window/tab should be denoted as such in terms of a11y). I haven't found a Link react-zen component, so I've leaved the original anchor tag, which is otherwise fine.
  • Lastly, I switched heading icon position to follow the arrow icon position below as the text content appeared to me zig zag otherwise.

Before:

image

After:

image

Copy link

vercel bot commented Apr 3, 2025

@jurajkapsz is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

Fixed heading text alignment.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant