Menu
I have a background of a field. The bottom is green, the top is gray. There is text on top of the background. Is there a way for the text to "sense" what color the background is and to tint the font in a way to make it contrast?
For example, the the text over the gray sky would become brighter and the text over the green field would become darker, to make it more visible.
I may be reaching pretty far on this one, but any suggestions are appreciated. (Please note, I am not looking for the answer to manually change the font colors.)
797
function isDark(color) { var match = /rgb\((\d+). *?(\d+). *?(\d+)\)/. exec(color); return (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2; } $('div').
Contrast between the foreground and background is one of the most important factors for the ease of reading. If coloured text is used on a bright background the contrast will be weak, for optimal contrast results is white text against dark colored backgrounds.
Contrast with a White Background. 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.
More as an experiment than otherwise:
Set the text with a background inherit, to get the background of the base; then clip it to the text, and then apply some filters to it:
.test { width: 800x; height:220px; font-size: 200px; background-image: url(bosque.jpg); color: white; position: relative; } .inner { position: relative; background-image: inherit; -webkit-background-clip: text; color: transparent; -webkit-filter: invert() sepia(); } fiddle
(Only working in webkit)
Check also this ones:
animated madness
contrast animation
UPDATE: We have new ways to handle this. See a demo using mix-blend-mode: difference
div { font-size: 300px; color: gray; mix-blend-mode: difference; } body { background-image: url(http://placekitten.com/900/600); }<div>TEST</div>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
