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.
This is one area where it is also good to draw inspiration from the past. For example, Commodore 64 has a great palette in how it has luminance sorted out. You have 16 colors. In there you have white and black. The rest 14 colors are in luminance pairs so you have 9 levels of different luminance when adding in black and white. Since there are only 16 colors in total and two colors of similar luminance seem too close to each other you often end up pairing colors that have a different level of luminance.
I think this is a very powerful way to make an accessible palette for a website as well: purposefully limit the luminance to a few distinct values and then apply hue and saturation to guarantee you have colors that are easy to distinguish of each other.
The luminance pairs also allowed people to code "impossible colors" for C64. How? Well, on each screen render you'd make your code swap between two colors that were exact or close pairings in luminance. If the colors were too far apart then you'd see it flickering, but with close luminance pairs you couldn't tell and instead perceived "an impossible color".
Wow! That is amazing 🤯
« 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.
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).
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.