New answers tagged

0

You want to look at contrast by color and then by value. If the colors don't cause enough contrast, then look into making the color darker or lighter or even shades of gray. Note that the colors that are least noticed in your image are much lighter than the darker colors, which appear to be in the foreground, just be their darker shade.


0

There is a partial explanation here: http://webaim.org/articles/visual/lowvision#highcontrast WebAim's recommendation is to allow the user to choose foreground and background. One of the reasons why some people prefer black background and white or orange text is to minimise eye strain, especially if you are looking at the screen for a long time, e.g. ...


4

Short answer; no. There have been numerous tests and articles which show that, because it is so common that links are blue (even though this isn't necessarily the best color to use for a link), people will treat blue text like a link, and will get confused by this. It will especially be bad for your website's user experience if you use blue-text links in ...


2

Using blue would be a good choice. The reason the IRS uses dark blue is likely (though of course this is speculation) because it's what most pens write with. So it's a form of skeuomorphism, if you will. You can follow suit, or you can try coming up with your own color, if you want to stick to your companies' branding colors or something. Things to keep in ...


1

Never underestimate the importance of brand colors although it may seems trivial in the beginning. If you implement colors only when they needed, you would find yourself in such situation. This is a common design problem and it usually happen in the middle of an app development. Design Problem When the colors are not set in the beginning, you will find ...


0

Based off your question, here's a 2 part answer. 1. When in doubt, test it. Since this is UXSE and not Graphic Design SE, I'd suggest conducting usability testing on different versions on your list view app UI. Several ways to find out which color contrast or color choice is best for your end-users are A/B testing or use-case scenarios. 2. Understand the ...


2

The only benefit of choosing a white background over a light grey background is that it arguably gives you a broader range of text colours that you can use, and still remain within accepted usability and accessibility guidelines. In other words, if you want to use blue text you would be able to use a slightly lighter shade of blue on a white background, ...


0

Dizzying options a click away Zappos does a pretty nice job of dealing with this problem. Many of the shoes they carry are available in all sorts of color combinations and sizes. There are also plenty of related products that, to some extent, are part of the whole purchase consideration and should be readily available even from the detail page. They've ...


2

Different Interfaces for two different functionality Example case: Car air condition interfaces As many example of car air conditions the first on/off functionality defined with a toggle button (light indicator); while heating adjustment element is defined with (knob and blue-red colors). Colors are not the only variable that you can play when you ...


1

This one is probably going to be up for debate but my opinion is that you should stick to the same accent color unless there is a reason to use another accent. For example, let's say your accent color was green, that would be conflicting with the green used to show positive "chg %" which has causality for being green and using another accent would be ...


2

Never depend on color alone for a critical interface component. Many people, perhaps upwards of 1 in 10, have some form of color-blindness that limits their perception of certain colors. Staring at colors can lead to our eyes/brains inverting colors, where you literally see a totally different color. Green become red, yellow becomes blue. Early astronauts ...


0

Tl;dr: On = green, hot = amber, off+cold = not lit. Read on to understand why. You need to encode to pieces of information which are not completely synchronized. There are four states to communicate: The kettle is off, the kettle is cold. The kettle is on, the kettle is cold. The kettle is on, the kettle is hot. The kettle is off, the kettle is hot. ...


2

Yellow = hot (the sun) and on (electricity, light bulbs, etc.) Blue = cold (ice, sky) and off (calming color)


1

Since this is specifically for a kettle, they traditionally have an LED light to indicate when they're in the process of boiling. Once boiled, this light goes off. Your app could mimic this behaviour, and optionally show some muted text that says "Boiling..." nearby. If your app knows the temperature of the water, you could separately show a traditional ...


4

From another answer of mine, I highly suggest that you consider using "switches" that minimc real-world switches to clarify state: With these designs the state of the switch is very clear, so the colors can be fit to the application at hand.


1

Go "Grayed-Out" with the On/Off Toggle I would suggest using the "grayed out" approach for the ON/OFF TOGGLE, rather than color-coding. Rely on language, not color here. Not a great example, but bear with me please... I'm pressed for time. Ignore the orange... or maybe not... that (or a more benign color) may work. For the temperature, go for it with ...


0

Assuming that you only want to show distances in a straight line from a single point (I don't think airplanes fly the same way as crows do), I think the most informative way to display this would be using circles (or arcs) that radiate from your point of origin. It is difficult to compare the lengths of lines when they are branching out in different ...


8

I would like to point out that for ON/OFF there are unicode symbols, see: http://unicodepowersymbol.com/ ⏻ Power: U+23FB ⏼ Toggle Power: U+23FC ⏽ Power On: U+23FD ⭘ Power Off: U+2B58 In my opinion, the color code green = ON and red = OFF is not very widespread, and therefore the risk of confusion is low. As far as my ...


2

Did you take a look at how Google maps shows their shortest path? The shortest path is highlighted with a strong color and the other options in a less prominent color (grey on Google maps). Also an indicator shows how long each path will take to reach the destination. When adding colors just make sure you choose colors and a thickness that will make ...


8

The kettle is not hot immediately when it turns on. It needs to heat up first, so your hot/cold nomenclature is misleading. Just make it an on/off switch. Or better, equip the kettle with a thermostat.


10

In construction the color for warnings is Bright Orange. Orange + could do the trick.


44

Do not use colors to indicate that the system is ON or OFF, use instead a linguistic code, while use an iconic code to comunicate the HOT/COLD state. Here I used a thermometer with different colors (i did not use the snowflake icon since it communicates more a sense of active cooling -like a freezer-, rather than a passive dispersion of heat -like some ...


52

Red can be used for ON, most sockets use this color when they are on : I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will also indicate ON/OFF. Also use round shape because it resembles more with LED lights, used for power ON/OFF in many devices.


69

I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON buttons to avoid your problem. Also I'd make use of icons to serve as an indication for Hot/Cold.


11

My advice would be to lose the On/Off labeling. It's just adding a layer of confusion. If ON == Cold && OFF == HOT, just label them HOT/COLD. They are referring to the same state. Then you could just use a switch/toggle. In this example(See below), I would change the words "On/Off"" to "Hot/Cold" and update the colors accordingly.



Top 50 recent answers are included