Menu
I have a responsive site that has a dynamically sized background image that has some dark and light areas. In browser the font colors are tuned to have nice contrast over the color of the background image.
Unfortunately in the responsive (mobile) design some text is layered over darker parts of the re-sized background image and the text can be very difficult to read. Does anyone know of a jQuery plugin or technique where the text can be made aware of the background behind it and change style/color accordingly?
512
Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text. Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text.
Definition and UsageThe background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read.
Colors that Go with Green: Brown and White Given that the background has darker colors, white comes in handy to create contrast. It's also in line with the naturalness of the view, while focusing attention onto title and call-to-action.
you can use text-shadow to mark the edge of your text.
body {
/* your rules */
color: rgba(0 , 0, 0, 0.8 ); /* just a guess that it might be black;*/
text-shadow:
0 0 1px gold,
0 0 3px white; /* choose how many and which colors */
}
That is the idea
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
