uchiwa
uchiwa copied to clipboard
sensu
Accessible color schemes
Personally, being red/green color deficient can cause issues with the reds and greens used for various alerts and statuses.
Perhaps we can provide separate themes just for the colors or even make it user configurable and stored in the browser?
I think the easiest solution would be to create a separate theme. We could also increase the border size in this theme, if it can help?
An another solution would be to add a row with the 'textual status'.
That would probably be good enough. I have issues with the shades of red and green and the small borders and their pastel nature seem to be the problem.
A separate theme would solve the problem, but then I'd be stuck with the light or dark theme ;)
In additon to this, on the client details page. Maybe it would be more readable if the colored circle in the top left were substituted with fontawesome shapes like the question mark, tick in circle, cross (times) in circle and exclamation triangle?
Example of swapping the circles for fontawesome glyphs:
An example of the code that does that:
<i class="fa text-{{selectedCheck.style}}" ng-class="{'fa-check-circle': (selectedCheck.style == 'success'), 'fa-exclamation-circle': (selectedCheck.style == 'warning'), 'fa-bomb': (selectedCheck.style == 'danger')}"></i>
@palourde What do you think of replacing the contextual color circles with glyphs? Using the glyphs wherever color conveys state/status means there is no need to deal with accessible-specific themes, and I don't think it degrades the UI for users who do not need the clarification.
@ayan4m1 Yes, I think it's a great idea! We could easily add a helper function to alleviate the code.
I'm still thinking about how to improve the left borders on the tables, I have few ideas that I want to try.
My specific issue is on the client page where there's the color coded status for all checks on a host.
I can try to poke around at changing the colors/simply increasing the border there.
