take a look please:
The azure one is just clicked. Firefox only. It's just an <img> inside a <li>, no links. Why the hell does it becomes azure?? It's the first time in almost 20 years of web programming I see this. It seems to have nothing to do with ::selection, nor tap highlight, so I can't find a useful css rule to stop it. Firebug shows nothing meaningfull on the styles analisys panel. Also it's the only element in the page that behave this way. So what the hell is it? How to avoid?
You can avoid it using user-select: none;
The text of the element and sub-elements will not be able to be selected
Note
This feature is non-standard and is not on a standards track
Are there any best practices or guidelines regarding contrast between link colour on a webpage, and the regular text?
I know there are contrast guidelines that refer to text vs background colour, but I'm also wondering if there are guidelines about the minimum colour difference that should exist between plain text, and link text.
For example, my background is white (FFF), my text colour is black (000) and my link colour is green (007C41)
Edit:
I realize it's up to personal preference to some degree. However, while my eyes may be able to tell the difference between #000000 and #000001 (they can't, but just for argument's sake), other's won't be able to. What I'm wondering is if there are any accessibility guidelines regarding what the minimum colour difference should be.
The only guidelines I was ever taught about links is this:
Make it obvious that it is a link. Do not do anything that might trick a user to click on something they didn't want to click on.
Make it obvious that it is different than the other texts on the page because you do not want your users to miss out on a link they might have wanted to click on.
Years ago, I was taught that all links should be underlined. Obviously, many, including our beloved SO, do not do that. Many now favor that links are underlined only when hovered over.
Basic guidelines from the US Department of Health & Human Services
http://www.w3.org/TR/WCAG-TECHS/G183.html (courtesy of steveax)
Make sure you have a color blindness emulator plugin for your browser. Inability to distinguish variations in hue is a semi-common condition. What looks "different" to you might not be obvious with a certain type(s) of color blindness.
Once you've addressed color blindness, ensure that colors with popular meaning (red, yellow, green) are used in appropriate or neutral contexts. For example, a "Sign me up!" link probably shouldn't be red (danger, critical) unless it's very clear that it is part of a theme (e.g. all links are red). A "Delete" link probably should never be green.
It's worth being familiar with proper color compliments. Even if you have made a highly readable, usable site, people react differently to different colors. Some colors/color combinations simply "look" better than others, and often there is a simple mathematical reason.
There are a couple of guidelines that combine to cover that scenario:
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a
visual element.
Contrast (Minimum): The visual presentation of text
and images of text has a contrast ratio of at least 4.5:1
A good article on webaim explains that:
So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:
4.5:1 contrast between the non-link text color and the background.
4.5:1 contrast between the link text color and the background.
3:1 contrast between the link text color and the surrounding non-link text color.
In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background colour.
Overall, the easiest thing is to use more than colour, e.g. an underline, outline, or bold text, in which case you only have to worry about contrast compared to the background, not the surrounding text.
Most important considerations have been covered above. In addition to those considerations, I lean away from underlining (except on hover) because I like the option of using underline to convey emphasis or other contextual information.
Our self-proclaimed Usability Guru Nielsen at one time loudly exclaimed that all links shalt be underlined forever no matter what, and a lot of people who prefer to be told instead of do the thinking themselves gobbled that up. But most reasonable designers understand that such rules are nonsense.
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.
I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)
Elsewhere in the site, I have a table in which only the touched data element goes gray.
I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we'd like the row to highlight when it is touched.
In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?
Thanks.
This author suggests a solution to remove the highlighting:
If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.
-webkit-tap-highlight-color: rgba(0,0,0,0);
It won't disable the highlighting, but it will make it invisible (an opacity of zero).
I have not tested this, however.
I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.
Try styling the wrapper div with select:none;
That should turn it off, and then you could code the highlight onfocus yourself.
Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.
Is there a rule that states that all links should be underlined to make them look like links? I have seen many sites where the footer, for example, does not have underlined links.
There's no rule, but it's good design to make your design act as users expect it to (and most users expect links in text to be underlined). So if you don't underline them, make sure the look obviously clickable. See: http://www.useit.com/alertbox/20040510.html
I personally can't stand links that aren't underlined in text (See: Stack Overflow). You shouldn't have to scrub the text see what's clickable.
I would say no, underlining links is pretty gross these days. Do you see any underlined text on this site?
There's no rule, but it does help people navigate your site if the links on a webpage stand out somehow from the surrounding text, and one convenient way to do this is to have them underlined. That way, you can color them however you like, but they'll still stand out.
The biggest argument that I've seen (can't point out where exactly as it has been a while) for using an underline is accessibility. Although changing the color of links may be enough for those users that have the privilege of seeing color, for those who are colorblind they may have extreme issues trying to find the links without any other differentiation.
I find that although the underline isn't the cleanest look, it doesn't look terrible with many pros including the accessibility I mentioned above as well as the instant "know how to use" factor the underline is well worth it. I speak of these points with respect to links in bodies of text. In main site navigation, footers and other very obvious places you can customize more freely of course.
Sorry for resurrecting an old thread, but I saw that no one mentioned the color-blind argument for underlined links so I figured it would be worth it for anyone in the future who reads this.
Such as Stackoverflow for example. =p
Do whatever you want. Personally, I like the clean look of links without underlines for a more "button-esque" feel on my sites.
Links should be distinguishable from normal text. If you do that by underlining them or just by changing its color is your decision. Underlining is just the classic way.
Links don't have to be underlined -- I'd argue that underlining is itself hard to read and a bad default standard we've inherited.
But links should be consistent. In other words, whatever color or style your links are, stick with that same color and style throughout the site whenever possible. Don't make one thing clickable in red, and another thing clickable in green.
And yes, we break this rule on Stack Overflow sometimes. Notice that the title of this question is a clickable link, but it's not in the link color because that would be sort of .. obnoxious.
Its an aesthetic decision - what looks best is up to you. There are no web standards that define this kind of thing.
What other visual cue can you offer a user that the text is a link and not normal text? A different color works, perhaps a style?
Visually an underline is simple and universal, but there is no hard rule. Just make them obvious.
Not necessarily, but when the user hovers the link, it could be underlined instead. And the link should stand out some way, either being bolder or a different color. Blue is an excellent hyperlink color.
There are no "rules" you have to follow. It's a common interface convention that tells people that those words are, in fact, links. If you choose not to underline them, you should find some other method to show people which words are links, if it isn't clear.
As long as a link is distinct on the page as being a link you should be alright.
For example:
a different color than the rest of the text
changing color on hover
having a background color
There's no hard-and-fast rule that says that they must be underlined, however there is a general convention that links should exhibit a noticeable difference to regular text (and should, at all times display the link cursor, e.g. the 'hand' cursor).
It is, however, generally accepted that users recognise underlined links more quickly than those that don't conform to something that someone would 'expect' to be a link.
Links should look distinguishable and clickable without having to hover your mouse over the screen. If you want to go away from the normal layout it's best to have a friend, one that's not tech savvy try out the site to see what they think. If they can navigate from page to page without problems or hiccups then the page is fine otherwise you should reconsider your approach. It's one nice thing to have a good looking site it's another to make it usable.
If you only use colored text for links then the underline becomes unnecessary.
In cases where the design does not allow for a high contrast link color then you may need to use under line.
As long as it is obvious what is and isn't a link, I think getting rid of underlined links is perfectly acceptable.
What I really hate are sites that underline text which are not links, please don't do that.
The page should be kept consistent - if one link is underlined then they all should be. If you don't like underlined links, no big deal - just keep them all the same for a better UI I think.
The important thing with all web design is clarity. If you do not underline your links then you should provide at least a consistent method of rendering (back or fore colour for example) and some intuative visual feedback to the user to indicate that the link is there such as underline on hover, mouse icon change or change in previous fore or back colour.
The best way to test these things is create a mockup and let your gran at it. If she understands first time then you have made it clear!
Happy coding.
I don't mind either way. Well almost.
At least, blue underlines are a clear signal that users identify as links. A well established convention as well as a browser default. That's why most Web design articles advice to avoid underline typographic effect.
And I dislike links that doesn't look like links. For example I recently found a site with black text and dark gray links (or was it the reverse?) of exact same font: it was hard to see links (unless scanning with the mouse! ack!).
Likewise, it is good practice to keep visited links distinguishable from unvisited ones: it is a good navigation help.
It really depends if having them stand out on the page is a useful property to have.
Wikipedia for instance takes the line off, which is probably a good thing considering half of the page would be underlined if left to defaults.