161
votes
Colorblind: status shapes
Use icons, they communicate a lot more than colours alone. If you must use colours, simply colour the icons.
- 1,994
150
votes
Accepted
What can we do to make UX Stack Exchange badges accessible?
The main information the color conveys isn't just that there are different types, but that the types have varying levels of difficulty.
The bronze < silver < gold metaphor has been used for ...
- 8,888
130
votes
How to make text look *not* clickable
tl;dr → use familiar patterns
Make the text objects look less like navigational tab controls.
The elements seem unnecessarily divided: Place the search field in the main header.
Make search look ...
- 21.3k
125
votes
How to make text look *not* clickable
Well, since people are trying to interact with this information, I'd use it as an advantage. As mentioned by Mattynabib, it really makes sense.
However, if for some reason you prefer not to, the ...
- 37.3k
103
votes
Accepted
A UI/UX developer with color-blindness. Good or Bad idea or maybe a challenge?
There is no problem to work as a UX/UI designer, as choosing color is just a minor part of the usability process. There are lots of other activities that the UX-er should do, like usability testing, ...
- 11.5k
60
votes
Is colour alone enough to convey warning?
No, it is not enough. This is how your image looks for people with achromatopsia (grayscale vision)
This with Blue-Weak Tritanomaly
This with Blue-Blind Tritanopia
As you can see, there are evident ...
- 37.3k
58
votes
Accepted
Should disabled elements be focusable for accessibility purposes?
I do work on a professional webapp for visually impaired, screen reader users.
We do user testing regularly, and this has been raised many times during user test sessions that disabled elements that ...
- 1,987
57
votes
A UI/UX developer with color-blindness. Good or Bad idea or maybe a challenge?
I've been doing front-end work for a decade, and I have deuteranopia or deuteranomaly (red-green color blindness). It has never been a problem.
I largely rely on color codes and location/proximity on ...
- 671
56
votes
What can we do to make UX Stack Exchange badges accessible?
If you want to convey priority of one item over another then there are two obvious different approaches to take;
Size
Quantity
If one thing is 'bigger' than the other than it takes more priority ...
JonW♦
- 37.2k
44
votes
How to make text look *not* clickable
The grey text actually makes them look more clickable as they stand out from the rest of the header. I would change them to the same color as the rest of the text (black).
Also, instead of "6 books ...
- 441
41
votes
Accepted
Formula for color contrast between text and background
Yes there is a formula. I wrote an article on high contrast colours recently that charts the variation of black or white (actually off-white #f0f0f0 and off-black #101010) as the foreground colour ...
- 71k
40
votes
What can we do to make UX Stack Exchange badges accessible?
I just noticed that Graphic Design SE has badges in distinctive shapes.
https://graphicdesign.stackexchange.com/help/badges
So, I made a mock-up along the lines and increased the color contrast. now ...
- 3,599
38
votes
Accepted
Is it good to propose a screen-reader version of my website for blind users
No. Best practice is not to have a separate screen-reader version of the site.
Suggesting you should have a screen-reader version of the site infers that your main site won't be. Which doesn't really ...
JonW♦
- 37.2k
36
votes
Accepted
Is it acceptable to allow users to navigate through web fields using arrow keys?
Technically this would fall under "unexpected behaviour" for new users or people using a screen reader (where your controls may impact their usage when in "forms mode" as arrow ...
- 2,588
36
votes
Colorblindness-friendly color scale with a clear progression, without using red/purple/pink
It's not that complicated to create a custom color scheme, you have enough information to do it easily:
Five colors
Avoid warm colors close to red
Colorblind friendly
High contrast
And a fact that ...
- 18.3k
33
votes
Colored circles to signify status - a violation of accessibility guidelines?
As the other answers said, the colours themselves may pose a problem if the hues aren't distinguishable easily. The clearest solution to this is to combine the colours with a shape, so full-vision ...
- 849
28
votes
Accepted
Colorblindness-friendly colors called "green", "blue", "yellow", and "red"
Would patterns work for your use case?
You could keep the shape, size, position and orientation the same for each one and have a 'colour blindness mode' where instead of colours to distinguish the ...
- 2,588
27
votes
Accepted
Designing App Interface for Parkinson's Patients?
People with Parkinson Disease (or PD as it's also known) need special considerations as you correctly figured. However, keep in mind that most of those considerations are covered by special ...
- 37.3k
27
votes
What can we do to make UX Stack Exchange badges accessible?
It is quite hard but I am thinking that you could use a Cup for gold, a medal for silver and a coin for bronze. They might convey importance hierarchy.
- 4,518
27
votes
Accepted
What is the clearest way to display "less than"?
If you want sex just say it
If you want sex just say it - You should strive to convey information in the clearest way possible, when possible.
< 2.1 miles is < clear than less than 2.1 miles.
In ...
- 32.4k
25
votes
A UI/UX developer with color-blindness. Good or Bad idea or maybe a challenge?
Limitations are limiting
Everyone here is very nice, but they're dodging one important point:
Being a color-blind UXD will limit your ability to be an all-in-one product designer.
Everyone has ...
- 21.3k
25
votes
Why would the search input field not get focus when the page is loaded?
You already answered your own question. Keyboard/screen-reader users will need to step out of the search field when it was focused automatically to make use of other ways to navigate. Also on mobile, ...
- 11.4k
24
votes
Accepted
What should a well-designed high contrast function do?
Do more research. Asking one person will only get you that person's preference - Ask lots more people and look for patterns in the results.
The RNIB (UK organisation for blind and partially sighted ...
- 14.2k
24
votes
Accepted
Is alt text required for an image if the information is present elsewhere on the page?
Update to answer (original further down under "original answer" heading) - I title this amendment "Oh dear I goofed!"
This question and answer has had a lot of traffic for some ...
- 2,588
23
votes
Accepted
Colorblind: status shapes
This is a great question. I believe there aren't any conventions besides W3C's good contrast color.
According to the links below, the best way is adding some kind of visual cue, a shape or ...
- 369
23
votes
Is colour alone enough to convey warning?
Color alone is never sufficient to convey information because:
Roughly 5% of the world population has some form of color vision deficiency, either dichromacy (only two types of working cone cells), ...
22
votes
Accepted
Why red and blue boxes in close proximity seems to shift position vertically under a dark background
At first I thought this was going to be a 'contrast ratio' or 'colour difference' effect from the 1 pixel darker borders (or maybe it's just aliasing) around each button. But the coloured border ...
- 71k
21
votes
Accepted
How to understand the technical issues while designing?
Avoid designing in isolation without PM and Engineering as partners. You'll never have the full perspective on your own.
Ask questions early
Self study to understand your tech stack (and web ...
- 24.6k
21
votes
Selected radio button shows user more content
The problem with your first option is that having the attachment control appear between options will cause the subsequent options to jump around the page. In some instances this may even cause some ...
- 7,061
Only top scored, non community-wiki answers of a minimum length are eligible