Skip to content

Enhanced contrast of basic alerts (Issue #53)#69

Closed
optikfluffel wants to merge 2 commits intotwbs:masterfrom
optikfluffel:master
Closed

Enhanced contrast of basic alerts (Issue #53)#69
optikfluffel wants to merge 2 commits intotwbs:masterfrom
optikfluffel:master

Conversation

@optikfluffel
Copy link

Changed the font-color to #404040 and text-shadow to rgba(255, 255, 255, 0.3).
basic alerts with higher contrast

@wildchild
Copy link

Looking good!

@optikfluffel
Copy link
Author

Changed the color of the error back to white. (like on a stop-sign ^^)
Should be better now :)
basic alerts with the error-font white

@vincemtnz
Copy link

Both .alert and .warning have good contrast. Not sure what to think about the other two, both white and black text seem to have readability issues on those shades of green / blue.

@qcom
Copy link

qcom commented Aug 25, 2011

@optikfluffel looks great! Thanks for sharing. Although I do agree with @eyko about the green blue.

@andycole
Copy link

I'd prefer to see all the messages in white apart from the yellow one, which would have black text. That's the set-up I've used before for similar warnings/notifications

@bistory
Copy link

bistory commented Aug 25, 2011

I agree with @andycole !

@asmallteapot
Copy link

I agree with @andycole. To @eyko’s point, perhaps an off–white (#ddd?) would look better on green and blue?

@vincemtnz
Copy link

I think I personally prefer dark text on .success and .info. In the image below, the dark text on green is a dark-green (#030), while the dark text on blue is a dark blue (#003). Maybe it's just my senses being picky…

Dark text

Compared to the default white text:

White text

After @flpatriot's suggestion, I also tried #ddd, but it's definitely a no-go.

@mdo
Copy link
Member

mdo commented Aug 25, 2011

We've actually redesigned these as part of the 1.1.1 release. Here's a peak at the new colors:

New alert styles

We've lowered the intensity of the alerts by making all colors less vibrant and a bit darker. The blue one needs a bit of love yet for better contrast, but I think this is a solid improvement for style and readability.

Thoughts?

@vincemtnz
Copy link

I think the dimmer yellow really works well, much closer to the "Tip: …" box we have under the comment box here. A more visible text shadow would help the blue, I personally tried and liked:

.alert-message.info { text-shadow: 0 0 1px rgba(0, 0, 0, 0.9); }

But I have it with white, is that a shade of grey?

Edit: If you're going for white-on-blue/green, I think this shadow allows for more readable text:

.alert-message.info, .alert-message.success { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }

blue, green

@optikfluffel
Copy link
Author

I really like the dark-green and dark-blue styling from eyko ^^ and the small text on the red seems to be less readable than before xD

@bloqhead
Copy link

@eyko — That text is much easier to read. I dig it.

@mdo
Copy link
Member

mdo commented Aug 26, 2011

I dig the readability, but the light sources (between the text and the x dismiss) don't match in @eyko's options. I'll work on the contrast between color and background and bump the shadow up a few notches.

@mdo
Copy link
Member

mdo commented Aug 26, 2011

Alerts updated with new colors for the contrast in the branch 1.1.1-wip:

New alert styles

Red and blue are much darker, making just about everything more readable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants