Link text is not readable in warning boxes

RESOLVED FIXED

Status

developer.mozilla.org
Design
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: wbamberg, Unassigned)

Tracking

(Blocks: 1 bug)

Details

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
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
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?
Flags: needinfo?(smartell)
(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.
(Reporter)

Updated

5 years ago
Duplicate of this bug: 933261
Blocks: 924583
I used "lightblue" here, which I think looks nice.  Let me know what you think.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
"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
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Updated

5 years ago
Blocks: 925144
No longer blocks: 910513
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.
Adding myself a needinfo here so that I take a look at these tomorrow.
Flags: needinfo?(jypenator)
(Reporter)

Comment 9

5 years ago
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.
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.
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.
Flags: needinfo?(jypenator)
Status: REOPENED → RESOLVED
Last Resolved: 5 years ago5 years ago
Resolution: --- → FIXED
Created attachment 832140 [details]
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).
Flags: needinfo?(smartell) → needinfo?(dwalsh)
The underline is there for a11y -- since the color ratio isn't great, the underline will be helpful to those users.
Flags: needinfo?(dwalsh)
Fair deal.
You need to log in before you can comment on or make changes to this bug.