Let's say a component allows the choice of picking between 20 colors. Should these swatches have labels on them? It seems a little pointless to me since there's no standard for color names besides (probably) meaningless gibberish like #d1ed7e. However, I'm wondering if anybody has an argument for their inclusion.
For color choices on a product selection, say a blouse or shoes, then color names might be important.
And there is a standard for color names. It's in the CSS documentation.
https://www.w3.org/TR/css-color-3/#html4
https://www.w3.org/TR/css-color-3/#svg-color
Those CSS color names might not match a company's name for a color, like "Dusty Sunset", which could be a shirt color or a paint color.
RGB values can also be very useful. What you might think of gibberish, #d1ed7e, might mean a lot to me if I'm a designer or coder.
Visually displaying the color name along with the swatch can also be helpful for some users. You don't necessarily have to "hide" the color name for just screen reader users.
Here's an example from a shoe website.
The current color displays as "Navy" and if I hover with the mouse over the other color, it shows "Tan". Tooltips are not the best way to do this since they're generally not displayed on mobile devices and tooltips often only work with a mouse hover and not keyboard focus, but it gives you an idea of showing color names.
If I'm in a design system and I want to choose a color, I probably want the exact RGB or HSV values so displaying the color code would be helpful.
One of the rules of WCAG says that information shouldn't be conveyed only by their color.
The color of an object, whatever it is, is always an information. It can be more or less important depending on the object and user taste, but it's always a property that the user must know about.
As a consequence of this, definitely, yes, colors have to be labelled in some way, and not left alone without labels.
For sure I want to choose the color, and at worst I don't matter at all and pick one at random. So at worst it anyway never hurts.
It's not because I'm blind that I'm not interested or don't matter at all about colors. For clothing, it stays important. I don't want to wear pink and green together, right ?
I might make a gift to a sighted friend. And what about color blind people ? They will certainly find useful to see "red" and "green" explicitly written, instead of apparently seeing two identical options.
Even normal sighted people are sometimes surprised because the color of what they receive don't match exactly what they saw on the screen. Maybe the brightness wasn't optimal, or he/she ordered during the night, or under artificial light ? I'm pretty sure that a name may help in this case, too.
As explained in the previous answer, the kind of label you should show depends on the kind of users using your site.
However, I don't agree with using CSS names.
For daily life objects sold in a shop, use the same name as it is officially called in your article catalog, it's probably better than using CSS names. If you can stick to quite generic color names, it's probably even better than a possibily brand-specific vocabulary. Example: is "blue marine" or simply "marine" more widely understood than "navy" ? (I'm not native english speaker, so maybe it's a wrong example, but I think you get still the idea).
If I look at all CSS names, really, there are colors I don't know about at all. Jaws has also a quite big list of colors mapped to RGB values, but many don't make much sense either for a lambda user.
For development stuff, RGB code can be very useful, but remember that it doesn't make sense for most people or in other contexts
To wrap up, yes, label your colors, and if possible with names that are widely understood
Related
I find it strange that the same color code (ex:#FEE9CC) results in different representations depending on the user's monitor. My computer is connected with two monitors, and I found this behavior. I guess there are some colors whose representations fluctuate. Then, what are the colors that always represent the same way? In other words,
how do I make sure that "brown" on my computer is actually brown on others'?
Here's the color that I used. It is shown as light brown on one monitor, and light pink on the other.
In short, you can't. Even if your users wouldn't fiddle with any of the hardware color settings on purpose, a vast majority of them is not going to have the correct color profiles for their monitor set up (and almost nobody besides designers is going to have a calibrated monitor anyway).
If you were doing print work (photo retouching, pre-press, …), this would be an important issue, and the tools you would be working with would provide extensive functionality for color management, previewing how colors look on another medium (proofing), and so on. Web browsers and file formats, on the other hand, simply were never designed for accurate rendition of colors.
Sort answer but You Can't.
You and your computer can use the right color codes for a correctly calibrated monitor but monitor don't 'send' feedback as to their roles and how they're bring presented.
This is not possible.
Monitors and graphics cards can be configured in many different ways. Some like "warmer" color tones, some like them "colder".
If I wanted I could set up my monitor to show only grays. If you choose red, it will be gray for me, if you choose green, it will be gray too.
I noticed that every browser renders the border-style: inset; property differently, so I had two questions:
Why do the browsers render it differently? How can there be so many different algorithms for this? Most of all, some browsers look wrong with it!
Since I can't rely on the inset attribute working, I was wondering what the proper "algorithm" is? I typically go 16 lighter on top/left and 16 darker on bottom/right (ie. #666666 is the background, so #767676 is the top/left and #565656 is the bottom/right)
I need to know what to use (generally speaking) because I'm having trouble making my styles inset, and I clearly can't use the inset properly so I have to manually change the colors. Sometimes, however, it just doesn't look right (if it's too dark). There has to be a good algorithm out there for this?
I've looked for web resources on the issue (such as a "what colors your borders need to be to make this look inset!" tool) or anything that could help, and found nothing.
Think of it this way: If someone were making something in a paint program and didn't have an inset effects button, what colors would all four of their borders be, given the main color is _____?
There HAS to be a general algorithm for this that I can't find...
Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)
Quote: "1. Why do the browsers render it differently?"
I'm sure each browser does it differently because they think theirs looks best. IE probably does it to look good in Windows. Safari is making theirs consistent with the look of Mac OS. Firefox in keeping with that browser's other elements, etc. (and like stated by thirtydot, it has not been standardized.)
Quote: "2. Since I can't rely on the inset attribute working, I was wondering what the proper 'algorithm' is?"
You could try to reverse engineer it if it's that important. Setup a test page and call it up in a browser. Use an eye-dropper/color-picker utility to pick off the various colors. With enough samples, you should be able to find a pattern for that one browser.
Quote: "There HAS to be a general algorithm for this that I can't find..."
Not if every browser does it differently. Each will have their own algorithm.
EDIT to address OP's follow-up:
Quote: "Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)"
You seem to be looking for one specific answer where one does not exist. I cannot give you an example of what I'd use since modern graphics programs (Photoshop) will do this for me and then give me enough options that, when combined, literally provide millions of results; border color, highlight color, shadow color, depth, angle, thickness, profile, etc. Ask 20 people what they think is the "perfect" inset and you'll get 20 different answers (opinions really) and then we're back to the reason it looks different in each browser (see #1 above). So yes, in the context of "programming" questions, this last part of your OP is probably off-topic.
Additional Random Thoughts:
Why is border-style not Standardized? IMHO, I'm thinking this property is simply not used enough to warrant any major effort to Standardize or perhaps there is much disagreement on this in the Standards community. I imagine that all the CSS properties requiring Standardization are prioritized in some fashion (popularity, usefulness?) and this one just didn't yet make the cut or bring everyone together. Personally, I think a property like this is tied too closely to ever-changing trends. i.e. - 10 years ago, we used to see to see lots of tables with very thick "embossed" borders. These days, many designs use few borders or very thin borders, if any. Again, this is only a matter of taste and opinion.
I have an answer to this:
Why do the browsers render it differently? How can there be so many
different algorithms for this? Most of
all, some browsers look wrong with it!
See: http://www.w3.org/TR/CSS21/box.html#border-style-properties
The color of borders drawn for values
of 'groove', 'ridge', 'inset', and
'outset' depends on the element's
border color properties, but UAs may
choose their own algorithm to
calculate the actual colors used. For
instance, if the 'border-color' has
the value 'silver', then a UA could
use a gradient of colors from white to
dark gray to indicate a sloping
border.
That's the reason implementations differ - because it wasn't standardized.
I would say for lighter side add 20% to each of the rgb values, and for the dark side remove 20% from each RGB value..
It seems like there is an increasingly popular trend to style hyperlinks in a color that's barely distinguishable from body text. I noticed this just the other day on an SFGate blog page. Also notice that link just a few words ago. Are my eyes getting worse, or is that hard to spot?
I certainly understand styling hyperlinks to look better than browser default styles. But, if they're not easy to see, what's the point of having them in the first place?
My best guess is that designers (or whomever makes the styling decisions) are wary of interrupting eye tracking with colors or other styling that is significantly different than the body text. That would make some sense, but I feel that there's a lot more room for compromise - i.e., styling links to be different enough from the body text that they're easy to spot, while not making them so flashy that they attract the eye to the detriment of easy reading.
Would anyone make the argument that subtle hyperlinks are more effective than more obvious ones? Or, can you point me to any theories or testing conclusions that may justify their use?
#Mike Daniels: Thanks for clarifying that the color I'm having trouble differentiating on this site is the visited link color - I hadn't noticed that, but you're right. The unvisited link color is rather prominent, and it makes more sense to me that visited links would blend in more with the surrounding text.
On another note, I'm not sure that I buy the argument that a hover color/effect is enough to properly distinguish a hyperlink. I don't feel that it serves the cause of usability that a user should have to hover over a link to confirm that it is in fact clickable. I think that should be made obvious at a glance.
I actually have a very good IPS-panel monitor and near-perfect vision with my glasses on. I can see the visited links on this page and those on the SFGate blog if I scan for them, but my argument is that it would only take an underline, a different color, or another visual distinction to make the links stand out much more.
What I'm really wondering is why - assuming that the designer(s) on a high-traffic site like SFGate know what they're doing and have made conscious decisions about link colors - they would choose to style the links to resemble the body text so closely? Is there reasoning behind that?
I can see the reasoning behind not wanting to have hyperlink styles which strongly clash with the regular text, as they can be distracting while reading. But I think that's rarely a problem. If you look at a site like Wikipedia, the links are very visually distinct from regular text, but it doesn't at all make the text harder to read
So the only real reason to only subtly differentiate inline links from standard text is for aesthetic purposes. I think that's what the SFGate designer has done. The link colors they use are easily differentiable when they are not inline (e.g. the Recent Entries or Categories panes), but they are perhaps harder to pick out in the text.
Since they've already carefully chosen a good color scheme that works aesthetically, and you generally don't want to employ too many different colors in a design or use different-colored links in different places, there's not a lot of options. They could have:
bolded the links
underlined them
used dotted underlines (a nice compromise)
or use rollovers
All of which would help to differentiate links from text without needing to give the links a brighter color.
But you also have to take into account the type of page it is and the usage pattern of visitors. If you have a lot of inline links, or if users are mainly there to read an article, not follow embedded links, then you don't want the links to draw so much attention. The SFGate blog is more akin to a digital newspaper. It's not a standard news blog where links are the primary content, or Wikipedia, where the embedded links are also a major focus of the site. Basically, the few links in the blog posts are only there to provide a little supplementary info for the curious but are expected to be ignored by most readers. And they do stand out enough so that while reading the article, you will see the links as you come across them.
The main navbar is readable , and the sub-navbar is normal text with a while background giving the main navbar visual hierarchy. The page is actually alright.
It depends on what you're trying to accomplish. As a site owner, I might realize (via A/B testing) that a subtler link color increases CTR, reduces bounce rate, etc. .
I do, however, think that differentiating your links only by color might cause some problems for colorblind folks.
ok, in SO the visited hyperlink colour is a bit darker and is harder to distinguish from the unvisited hyperlink colour. But I think inline hyperlink design is a tough question to answer. I mean you want someone to know the hyperlink is there but at the same time, is it more or less important than your content? if its the ultimate destination then maybe making it stand out more (i.e. by underlining it) if its evidence for a point and therefore less important that someone clicks it theres no need. I'd argue a simple colour change would do, maybe make the visited/unvisited links a closer match so that they maintain their visibility in the content.
I didn't realize until Mike Daniels pointed it out that your issue is with visited links, not normally-colored links. Visited links have traditionally blended in more, it's not really a new concept. I think the theory is if you've already visited the link you must know it's there, so there's no reason to draw your attention to it anymore; there are other links you haven't visited yet that you're likely more interested in
I can clearly distinguish the link color from the text color. Maybe you should adjust your display settings? I suppose it could be a bit bolder to distinguish it from the surrounding text, but it's ballpark.
It would be nice if the SFGate blog page page used the hover property to provide another visual cue that the thing that I think is a link is actually a link.
Could be one of 2 scenarios, both of which I have experienced.
the design agency isn't web savvy and thinks that different coloured texts and (worse) underlines are unsightly and has asked the designer to make the links visibly uniform (you'd be surprised how often I get asked to do this).
the text has been SEO'd incorrectly by someone who's about 6 years behind the times and believes that you have to link every instance of a term on a page but with a consideration for the visitor, so they've been styled down.
I'm curious if, similar to something Chesterfield said above, someone is under the delusion that they should link lots of stuff on the page in order to improve their search engine rankings. And, because of that, they thought the page might look less ugly if they toned down the coloring of links so that they're more to game Google than for end users.
I'd be curious to see some stats for the number of links per article for under-emphasized links versus articles where the links are clear. Obviously it wouldn't be 100% scientific, but it might lead to more clarity on the issue.
maybe this could be a nice soloution
a {
font: inherit !imporant;
text-decoration: inherit !imporant;
color: inherit !imporant;
}
If so, how do you (if you guys are around) handle the issue? I just heard a story today about a Japanese smoke alarm for deaf people that uses the smell of wasabe to wake them, so I got curious.
If you're really curious, look at
http://www.webexhibits.org/causesofcolor/2A.html
Very few colorblind people are monochromatic (totally colorblind). Most colorblindness falls into the category protanopia or deuteranopia, which can see yellows and blues and browns. So syntax coloring can get set to those. Most of them have a hard time seeing light green, which looks orange, etc.
I am colorblind, red-green deficiencies (protanopes and deutanopes). I have never had any trouble with syntax highlighting, that I have noticed anyway. :)
Most syntax highlighting is configurable.
Certainly nobody should deliberately make life harder on colorblind people, but they've been managing to work around such issues for their whole lives. I've seen some cut and paste into non-color highlighting text editors. I've also seen that they tend to be more familiar with how to configure color highlighting that most people.
In vi, I use
:syn off
when someone discovers a truly horrid highlighting scheme.
If you want to get a feel for how color schemes might appear to the color blind, http://colorschemedesigner.com/ simulates several different colorblind models of perception.
I am mildly colorblind, with blue deficiencies.
This often means that blue or purple colored text is nearly indistinguishable from black text (it is dark grey).
When I get frustrated, I occasionally use Notepad++, a notepad software that supports syntactical highlighting because it allows for creating custom color schemes for highlighting, which is quite handy. It also has support built in for a myriad of languages already.
As a previous poster noted, more often problems arise in graphic design when trying to match colors. (eyedropper FTW!)
I am a colorblind female - i have a rare version where i have trouble seeing pastel blues, greens, and reds. You would assume that i see yellows very well, but that is not the case.
Pastels wash out to brown and grey, All bold colors typically look like pastel versions of themselves.
So my world is mostly browns and greys with pops of color.
Case in point - on this page i see some blue text to the right, black text, some brown boxes, and a stripe of a babysh&# brown color at the top - not very appealing to my eye.
If you are wanting to make accomodations for color deficiency or colorblindness:
I work in IT so when i type i typically use a lot of color or high contrast that confuses other people - but it just serves to slightly highlight things for myself so i don't lose my place
I would appreciate it if programmers enable a high-contrast version, a dark mode, and if they let you choose a blue-yellow syntax as well as green-red.
The consequence of colour blindness would be different for text on a screen rather than other situations.
That is, someone could tweak the UI to match colours as needed. The implicit meaning of the text is still there: comments are comment, keywords are still keywords etc.
It's not like having to decode a traffic light in a very short time, or being told to "cut the red wire" as a bomb disposal expert
I'm colorblind (only very mild) and I don't have any trouble at all with this. Generally the default colors in IDEs contrast enough that they are quite clearly different. The thing to remember that in most cases colorblindness is really a lack of sensitivity to color so bold high contract colors often be distinguished.
The biggest problem doing development having colorblindness is when I need to do some work with artwork and images - I just need to be extra careful that colors do actually match (I use photoshop or whatever to confirm).
Many editors allow you to set properties of the text other than color for syntax highlighting. You could change the weight of the font, underline, italicize, etc. Obviously you won't have nearly as many choices as with using color, but it would allow some differentiation.
Do CSS colors render differently on different monitors? Most importantly, will tools like Digital Color Meter (on OS X, an eye dropper, if you will) give me a different hexcode depending on the monitor or graphics card?
In short: Yes and No.
The exact color values are always the same. The exact rendering, however, varies.
For one, there is color depth: With color depths of 8, 15 or 16 bit an approximation of the specified color has to be used. Sometimes even with dithering.
The monitor itself might have very different color rendering, depending on its settings. Can be seen very easily if you have two monitors side-by-side. They'll never show the exact same colors.
The color profile affects the color rendering too. Most people don't calibrate their monitors, though.
No. A colour always remains the same. However, physically realising a colour may depend on the display, the materials used to display, the lighting, and almost an infinite array of things.
The eye dropper tool will always inform the correct colour. Since displays differ, the colour (visually) will differ among them. However, in theory the colours are the same everywhere. If you select a red colour with the eye dropper and draw an image and share it, it will be rendered as red by the graphics adapter in all systems (unless they are very buggy!). If the display lacks the red components, or the red component is faulty, the colour displayed will not be red. Programmatically, the colour is still red.
When developing for the web, or doing graphics work, always check with a couple of different displays to make sure that you indeed selected the colour that you wanted, as displays differ.
You shouldn't get different hex values based on monitor, but you will get different final results depending on OS, monitor, graphics set, and settings.
The computer is in control of the color numbers, so the numbers will not change no matter what monitor or graphics adapter you have.
The monitors will look different though. There are many reasons for this; even two of the same model monitor might not look identical, especially if the settings have been changed. Most of the time they will be similar enough that nobody will complain. There are calibration systems you can purchase to bring them closer to a standard appearance.
The colors,independently of language used to display them, usually render differently from monitor to monitor, this is due to different technology that allows a different color space (profile) to be shown.
You will never be able to have the exact same colors on all of the monitors, in fact on CRT and LCD monitors colors show differently most of the time.
I don't know DCM so I guess you'll have to try but it would be much better if you try to look for a palette that is best shown on most of monitors, maybe trying to look at it on a CRT and LCD of different producers.
PCs and Macs will indeed render colours somewhat differently, though not necessarily because of the monitor.
For example, a Mac will render the colour #FEFEFE in the browser whereas a PC will render it white, as though it were #FFF.