Using colors to emphasize information is great. They help distinguish the content and make it easier to identify while making it more stylish for t...
For further actions, you may consider blocking this person and/or reporting abuse
I also had a small point on the stock ticker. I understand we're only addressing Use of Color and it's important not to detract from that, and while the CSS pseudo approach is illustrative for the reader, I think there are some associated problems with it:
I think therefore the result should be both satisfying to assistive technology users and people with low vision and colour impairments.
What do you think about changing the CSS pseudo example to a HTML image with alternative text?
For example:
This isn't simpler to convey as an example of the result, but it does address the wider audience for 1.4.1.
Thanks again for your efforts,
Andrew!
The series is related to changes that can be done to improve accessibility by just using CSS (without requiring HTML/JS changes). I agree an additional image approach would be better in general, but that would be also out of the scope of the series. I'll edit the article to add a note... and in general to rearrange things and provide better examples. Thanks for the comment and the feedback.
It is such an easy check: convert to grayscale. It should be criminal that designers don't do it.
And it's not just for colorblind people, because that mostly applies to white males. The grayscale test is also good way to check how well your design works on displays which do not have ideal situations. For example: glossy screens, screens in the sun, non-calibrated screen, TN panels, non-calibrated glossy TN panel screens in the sun, ...
PS, Pie/donuts charts should be thrown out completely. They generally suck in providing comparative information. A bar chart can shown the different between 35% and 40%, a pie chart not so much, unless you add interactive elements to it.
Hi Alvaro, thank you for your thorough explanation on Use of Color! What do you think about adding a line explaining the preference for using an additional visual cue rather than going for the 3:1 contrast ratio technique? I appreciate that technique is non-normative, but still it is used to justify meeting 1.4.1.
Thanks for the feedback. I will check what you mention and will add a note on that (in general the article needs some reworking).
« Do not just use color to convey information » would be a more accurate title for your article. It currently feels a little clickbaity
Thanks for the feedback. I updated the title to match your suggestion and the recommendation at the end of the article.
This website is useful for checking colour-blind compatibility.
And I'm a bit amused that when you say "add a visual indicator or icon" you don't give an example to show what you mean. You give some complicated CSS source code that a great many people won't understand.
Thanks for sharing that website, it is eye-opening. And thanks for the feedback. I need to rearrange things and modify the article a bit. In hindsight, the examples I provided may not be the best (or in the best order).
Such a good post! Thank you for including detailed positive and negative examples, plus recommendations.
Wow! That is amazing 🤯