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.
Related
For ADA compliance I've read we should have more than one effect on hover. For example, only changing the color wouldn't be good enough for someone who is color blind, so adding an underline would help them.
Does the cursor change count towards one of the hover effect? I tried searching for that in a few different sites but I wasn't able to find the answer. Does anybody know?
Another example: would a hover effect which adds an underline and changes the cursor to the pointer be compliant on any of the WCAG levels (A, AA, AAA)?
For ADA compliance I've read we should have more than one effect on hover
I'd be interested to know where you read that. WCAG, the official accessibility guideline, doesn't really say anything about hover effects. It does say, in 1.4.11, that "states" must have sufficient contrast, and hover is an example of a state, so in that respect, WCAG does address the hover effect. But nothing in WCAG requires a hover effect.
Now, if you're talking about WCAG 1.4.1 Use of Color, there is a recommendation specific to anchor tags (<a>) that if a link is embedded in a paragraph, the link color must have at least a 3:1 contrast ratio with the paragraph color and an additional visual cue must be specified upon hover or focus, such as an underline. You can see the full text in G183.
So it's tough to answer the question about a cursor hover effect until I fully understand what you're trying to do and which sources you're using for your information.
A best practice is that any hover effect you implement should also be available upon focus too. This is typically done in CSS by having the :hover and :focus point to the same rules in the CSS.
Is there a reason blue was chosen for anchor tags or purple was chosen for visited links? Perhaps it has something to do with being easier for people with disabilities?
Why are Links Blue?
Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:
Red and green are the colours most affected by colour-vision deficiency. Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
-Joe Clark, Building Accessible Websites
I've been thinking of a dynamic way of creating a CAPTCHA that uses morphing shapes or dynamic colors.
My first idea is to have a graphic, flash or something, that gradually changes from, say a square into a sphere. The user will be required to click the button when it becomes spherical enough.
Second idea is to have an area of color that slowly changes from, say, red to blue and the user will be required to press a button when it becomes blue enough.
Third idea is a combination of both methods.
I'd say the difficulty will be to match the clicks with the transitions. But it should be hard for automated code to detect shades or shapes.
Can people please offer some comments on my idea.
edit -
Thanks for the feedback. I'm now considering using a flash based video playback of a server fed video feed of a few colored shapes that morph into other colored shapes. The user will be required to pause the feed when the colors and shapes match some canned questions: such as : click on the video when you see two green squares turn into 3 blue triangles. The shapes will be amongst over overlapping and moving morphing shapes. Fun for the whole family!
Color is a bad idea as (a) its very easy for a computer to detect; (b) very hard for some humans — the color blind — to detect. Even if you're OK with denying access to the disabled, you'd have to worry about different monitors, systems, lighting conditions, etc. giving rise to different color perceptions.
How hard do you think it is for a computer to compare the red component and blue component in a pixel (or averaged over several pixels)? Trivial. So this isn't a problem for a computer.
Similarly, it isn't that hard to program the difference between a square and a circle. One has strait lines, one doesn't!
Good idea, you could also do it so that the shapes keep turning or moving.
I don't know if it would be safer than a regular letter capcha tho.
I'm not sure why you think color would be any harder to detect than text. Shapes possibly, but they would have to be more complex than n-sided polygons. The gradual animation is a good idea however. But if you can code it to show, someone can code something that watches it.
The real test is to prove humanness by identifying semantic meanings, rather than syntactic meanings.
For instance show pictures of animals and make the user click when a bird shows up. Or just say "click on the thing that can fly." And show some pictures of animals. This would be rather unbeatable by a machine until all images had been cataloged. The trouble with CAPTCHA of course is trying to make semantics with syntax. Therefore defeating itself from the onset.
You're on the right track, and I'm sure your proof of concepts are interesting. But remember: made by a computer: solved by a computer.
Although these ideas will almost certainly work, it's a security-through-obscurity effect. Classic CAPTCHA images are "one-way" in that the correct answer can't (theoretically) be deduced by a computer. The problem with saying "click here when the image turns blue" is that a computer could easily do this, if somebody considered the stakes to be worth developing a program for.
Additionally, unusual captchas will force your users to think. Depending on your audience this may mean losing some users.
I did a fair bit of research when developing a CAPTCHA system, and the classic method of printing text to an image seems to be the most effective. The trick is not in having lots of "background noise" behind the text, or different colours. It's about the following two things:
1) Random text kerning, with most or all letters slightly overlapping each other.
2) Random distortion, translation and rotation of the text.
If you have a look at Google's CAPTCHA, they pretty well only have those two features: https://www.google.com/accounts/NewAccount?service=mail
i'm currently doing some reports for SSRS, and i just confirm what i already knew, i suck at this thing of color matching and making things look pretty.
Does anyone know a good site or something to help me figure out how a report should look. I need help! any website or recommendations would be highly appreciated. I tried trying to stick cool looking color pallet, it just didn't work...
PS: I know this is not a problem related with programming or stuff like that, but this lack of coolness its affecting everything i do :p
Best option: don't use colour unless you have a specific need for it. Many years ago I worked as a typesetter for a while in the jobbing commercial print industry. Most of the clients did not want to pay for a colour print job due to the set-up costs, so the jobs tended to be black and white or two spot colours.
Also, I've done any amount of documentation work where the output device was a black and white laser printer.
Unless you have a good sense for colour attempting to play amateur graphic designer is probably more trouble than it's worth. Start with black and white reports, perhaps with one or two highlight colours. If you find an overall colour scheme you like, you can use it as a standard format, but keep it simple. Otherwise, you're really just adding Chart Junk, which is a bad thing.
If you really need colour, use it sparingly, and avoid reversed out headers (light text on a dark background). Some suggestions for sparing colour use:
Light pastel shades (no darker than something equivalent to a 10-20% gray half-tone) on headers or the left-most column. Only shade the left-most column if it is relatively narrow. This sort of header with a light bar down the left side will frame a report.
Alternating bars of approx. 5 lines or so. 5 lines in a plain white background and 5 lines in a pastel shade. This should be lighter (equivalent to a 5-10% gray) than the shade you would use in headings described above. Only use this if the bars are equal size - it looks ugly if the bars are different heights.
Highlighted values (if you have numbers that are alterted if out of a certain range) in an alert colour. This might be quite useful for KPI reports.
Charts - use lighter shades rather than bright primary colours for printed charts unless you are doing line graphs, in which the lines should be relatively thin and darker colours like maroon or navy blue. Leave any borders, pips, axes and labels in black.
Avoid graphical decoration for its own sake unless you are actually a competent graphic artist. Amateur graphic design got a deservedly bad rep in the 1980's and 1990's with the advent of desktop publishing. Keep the reports looking professional, and use this term ('should look professional') if you get into any arguments with users.
This sort of approach should let you answer people's requests for colour while still maintaining a degree of professionalism (and self-respect). You can be seen to accomodate user requests without looking like an idiot.
I use Color Brewer to pick complementary color schemes for reports, charts, maps, etc.
The content is the most important element. After that, simplicity.
use a limited set of fonts and colors
use bold, italic, and underline sparingly
use lots of whitespace
base the page layout on a grid
For a few tips on layout: The Basics of Graphic Design and Typography and Page Layout
I would say that the layout of the report is more important than its color scheme.
The purpose of a good report is to organize information and present it in a manner that is concise, meaningful, and guides the eye from element to element. The snazzy paint job is optional.
I always use the default dark blue/light blue color scheme that comes when you use the report create wizard.
I've been using it for reports for over a year and have never gotten a complaint.
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.