4

I am currently working on a website where I have a very prominent error box with the colour #e20413 and text in #FFF. However this, text contains two links that are blue and therefore not very readable.

What colour would normally be used for the hyperlink in these situations?

Example of current situation:

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 10px;
}

.alert-danger {
    color: #FFF;
    background-color: #e20413;
    border-color: #ebccd1;
}
<div class="alert alert-danger">
           This is some text with a link to <a href="">some webpage</a> and some more text with another <a href="">link</a>!
        </div>
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 10px;
}

.alert-danger {
    color: #FFF;
    background-color: #e20413;
    border-color: #ebccd1;
}
<div class="alert alert-danger">
           This is some text with a link to <a href="">some webpage</a> and some more text with another <a href="">link</a>!
        </div>

Visible in action: https://jsfiddle.net/kLxv8psg/

  • 4
    This is less of a UX question than a graphics question. – Mayo May 1 at 12:49
  • 1
    @Joost_96 you should include your code on StackOverflow, not just as a jsfiddle. StackExchange added Stack Snippets for this purpose if you want to edit your question to include it. – Marie May 1 at 14:37
  • 2
    @Marie. I've inlined the code (suggested edit pending review), but Stack Snippets don't work on this site, so I've left the link to JS Fiddle in place too. – TRiG May 1 at 16:00
  • 1
    @Marie. Further: ux.meta.stackexchange.com/q/3321/2131. – TRiG May 1 at 16:03
  • Hi Joost! I'm unsure this is the kind of question that this particular site is suited for. – invot May 1 at 17:23
9

Just use white for the links too.

alert a {
    color: white;
}

The underline shows clearly that it is a link: https://jsfiddle.net/2dmp9cbj/

  • I'd also add another style for the one you remove. i.e. instead of blue colour, leave it white but throw in a font-weight modifier. – insidesin May 2 at 2:15
  • How about states like visited? – Thomas May 2 at 14:19
  • Maybe I'm just old-school, but I'm always wary of white text. – cloudworks May 6 at 15:10
18

Try a softer red with a harsh red border - like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I would normally do that and but the client wanted it more prominent and inline with the other elements on the webpage, that's why it is the solid red colour. – Joost K May 1 at 8:47
  • 17
    As an expert in your field you need to advise them, either the hyperlink colour needs to be changed or a softer red used, there's no magic button that's going to make blue any easier to read on deep red. – DarrylGodden May 1 at 8:50
  • 2
    Precisely what Darryl said. I had this same conversation with our business once. I mocked up the actual site with the softer red elements and explained how dark red would negatively affect usability and they loved them. – Marie May 1 at 14:39
3

Try out this site:

https://webaim.org/resources/contrastchecker/

You basically have a colour contrast issue here. Although you may want to keep the blue colour as that's the standard (and generally most well-known colour) for hyperlinks, people are savvy enough these days to know if the piece of text is a different colour to the surrounding wording and is underlined then it's a clickable link.

1

This is a very deep topic, with lots of research out there depending on your purpose. For just plain and simple "I want it to stand out but still be readable", however, I'm personally fond of yellow for red backgrounds.

https://jsfiddle.net/uh6f84jm/

-1

If you want it more prominent and a red warning add a red box:

Red Box the Link

.alert a {
    background-color: red;
    color: white;
    padding: 1px 2px;
    text-decoration: underline;
    text-transform: uppercase; 
}

Now you can change the color of the box, link, even uppercase, independently from the alert box color. This can be modified to suit an alert link that you should click (important message) or a link that you should not click (rouge website warning).

Keeping this UX (and not design) it needs to be clear what the intended action of the alert is, if ignoring the alert is reasonable (permitted) it need not be uppercased, if it's something that you are warning against clicking on then it can be strikeout without an underline. It may be ugly but it can flash if it must. As long as each choice and outcome is obvious to a user trained to use the software.

I appreciate that your text is an example. For a general webpage for the public, without prior training in the use of the webapp, some more text explaining the purpose and consequences of the links would be useful additional information.

Note: It's possible to outline the box for people whom are colorblind.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.