Default color - Grey in grey

Please change the Color of the lighter part of Zammad in a way that you also could see a difference between Text and Background even you have a cheap Monitor.
At moment some people try to change Monitor settings, but we do not get a color setting which is not a strain on the eyes

1 Like

Hey @Mannshoch,

have a look at this if you want to change the appearance of your zammad system:

I doubt they’ll change the default (i wouldn’t).

Still, making the primary colours customizable via frontend would be a neat feature.

cheers

Our Admin avoid modifying any web-application if it’s not possible to do it from inside the back-end. And because we may not the only one with this Problem, I write it down here.

I would also argue that some colors in Zammad should be changed; some parts have horrible contrast and therefore are very hard to read. There is an online color contrast checker which might be helpful: WebAIM: Contrast Checker

To quote from that site:

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).

Some things in Zammad that I find hard to read:

  1. The grey help texts:

    #aabdc5 on #f6f7f8 - contrast ratio 1.81:1

  2. Unselected navigation entries:

    image

    #575b61 on #25262d - contrast ratio 2.2:1

  3. Unselected tabs in the navigation:

    image

    #808080 on #2c2d36 - contrast ratio 3.46:1

  4. Unselected tabs in the main area:

    #b3b3b3 on #ffffff - contrast ratio 2.09:1

  5. UI labels when creating a new ticket:

    image

    a5b8c0 on #ffffff - contrast ratio 2.05:1

  6. Ticket count badges for overviews

    image

    inactive: #d0d2d3 on #ffffff - contrast ratio 1.51:1
    active: #96969b on #2c2d36 - contrast ratio 4.64:1 [ok, that one is actually acceptable ^^]

  7. UI labels on the right side in the ticket zoom

    image

    labels: #aabdc5 on #ffffff - contrast ratio 1.94:1
    add tag/link: #c7d5db on #ffffff - contrast ratio 1.5:1

I went ahead and fiddled with the CSS; here’s a higher contrast proof of concept: Comparing zammad:develop...martinvonwittich:improved-contrast · zammad/zammad · GitHub

Before/after screenshots:

I’m not really happy with the navigation yet. Maybe someone with actual design experience can come up with a better solution? :slight_smile:

3 Likes

This topic was automatically closed after 416 days. New replies are no longer allowed.