Otdfbt

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/

Just use white for the links too.

alert a 
 color: white;

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

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

^{download bmml source – Wireframes created with Balsamiq Mockups}

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.

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/

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

.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.