932374 - Link text is not readable in warning boxes

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Will Bamberg [:wbamberg]]

As title. In the new-style warning boxes, the colour of link text makes it really hard to read. Example: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator

Comment 1

[Will Bamberg [:wbamberg]]

Also for nonStandardHeader boxes: https://developer.mozilla.org/en-US/docs/Web/API/navigator.id.get

Comment 2

[Jean-Yves Perrier [:teoli]]

Ouch, it is ugly.

Sean: can you advise for colors in this case? Do you think it is worthwhile to add a link to each banner on https://developer.mozilla.org/en-US/docs/User:teoli/In_content so that you can look at them in one shot?

Comment 3

[Eric Shepherd [:sheppy]]

(In reply to Jean-Yves Perrier [:teoli] from comment #2)
> Ouch, it is ugly.
> 
> Sean: can you advise for colors in this case? Do you think it is worthwhile
> to add a link to each banner on
> https://developer.mozilla.org/en-US/docs/User:teoli/In_content so that you
> can look at them in one shot?

Yeah, add links to the banners so we can get a look at this in context.

Comment 5

[David Walsh :davidwalsh]

I used "lightblue" here, which I think looks nice.  Let me know what you think.

Comment 6

[Jeremie Patonnier :Jeremie]

"lightblue" looks okay but according to a11y contrast tools, it fails : http://webaim.org/resources/contrastchecker/

furthermore, what about the red links (when the page does not exist on MDN)?
Take a look at the screenshots I made in bug 933261

Comment 7

[David Walsh :davidwalsh]

Does anyone have a suggestion for this?  I'm not finding a color that passes.  A bottom border for the link looks good, but I can't find anything useful outside of that.

Comment 8

[Jean-Yves Perrier [:teoli]]

Adding myself a needinfo here so that I take a look at these tomorrow.

Comment 9

[Will Bamberg [:wbamberg]]

I think the same colour as non-link text, but underlined, would work perfectly fine. I think having three colours (lively background, text, and link text) gets pretty busy.

Comment 10

[David Walsh :davidwalsh]

I went with a different color (yellow, which fits well with this shade of background color) with underland, and the ratio *almost* passes.  Outside of changing the background, I don't know where else to go.  We could add an icon next to it but that would be inconcsistent.

Comment 11

[Jean-Yves Perrier [:teoli]]

We may go with this. I'm not an integrist of the ratio: if we are close (say ~5% lower) it should be good enough.

Comment 12

[Jean-Yves Perrier [:teoli]]

Attachment: Screen Shot 2013-11-14 at 10.09.52.png

David, it looks much much better now! Well done!

A small nit though: what about not making them underlined by default, but only when hovering them? This is what is done for some other links in the page. (The absence of :hover specific styling is a bit strange right now).

Comment 13

[David Walsh :davidwalsh]

The underline is there for a11y -- since the color ratio isn't great, the underline will be helpful to those users.

Comment 14

[Jean-Yves Perrier [:teoli]]

Fair deal.