Skip to main content
Share Your Experience: Take the 2024 Developer Survey
161 votes

Colorblind: status shapes

Use icons, they communicate a lot more than colours alone. If you must use colours, simply colour the icons.
Garik's user avatar
  • 1,994
148 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 ...
Nathan Rabe's user avatar
  • 8,878
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 ...
plainclothes's user avatar
  • 21.3k
124 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 ...
Devin's user avatar
  • 38k
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, ...
Kristiyan Lukanov's user avatar
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 ...
Devin's user avatar
  • 38k
59 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 ...
Leths's user avatar
  • 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 ...
Jeff's user avatar
  • 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's user avatar
  • 37.4k
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 ...
Big Daddy Dennis's user avatar
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 ...
Roger Attrill's user avatar
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 ...
Sooraj MV's user avatar
  • 3,609
37 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's user avatar
  • 37.4k
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 ...
GrahamTheDev's user avatar
  • 2,598
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 ...
Danielillo's user avatar
  • 19.2k
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 ...
GrahamTheDev's user avatar
  • 2,598
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 ...
Devin's user avatar
  • 38k
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.
Chris's user avatar
  • 4,558
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 ...
Izhaki's user avatar
  • 32.6k
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 ...
plainclothes's user avatar
  • 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, ...
jazZRo's user avatar
  • 11.9k
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 ...
Roux Martin's user avatar
  • 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 ...
GrahamTheDev's user avatar
  • 2,598
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 ...
Mar's user avatar
  • 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), ...
Austin Hemmelgarn's user avatar
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 ...
Roger Attrill's user avatar
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 ...
Mike M's user avatar
  • 24.7k
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 ...
musefan's user avatar
  • 7,111
20 votes
Accepted

Why would the search input field not get focus when the page is loaded?

Autofocus is a tool that is wildly helpful if done correctly and it is appropriate to the situation, but there are many, many things that can go wrong. If your implementation doesn't avoid all of ...
HappyDog's user avatar
  • 487

Only top scored, non community-wiki answers of a minimum length are eligible