Member Avatar for SimonIoa

Screenshot_2019-03-28.png

Hello i want to show font on an image. Now, the image could be whatever a user uploads- that means white of black background. The font is not looking good. I want to try out something that will look clear on both on dark or light background. I put text shadow on it but the font is not clear. It doesnt looks good. I shared a photo of the problem

Edited by SimonIoa
  • 5 Contributors
  • 4 Replies
  • 3K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ABIO22

Dani AI

Generated

You will rarely get one text color that reads well on any arbitrary upload, as noted. Instead of guessing the color, control the pixels under the text. Two low-maintenance patterns you can ship without JS or server-side image analysis:

  1. Local scrim + blur behind the text (most robust)
<div class="hero">
  <img src="user-image.jpg" alt="">
  <h1 class="title">Your title</h1>
</div>
.hero { position: relative; }
.hero img { display:block; width:100%; height:auto; }
.title{
  position:absolute; bottom:1rem; left:1rem; margin:0;
  color:#fff; padding:.5rem .75rem; border-radius:.25rem;
  background: rgba(0,0,0,.45);              /* dim the area */
  -webkit-backdrop-filter: blur(4px);       /* Safari */
  backdrop-filter: blur(4px) saturate(1.2); /* modern browsers */
}

The translucent badge consistently lifts legibility regardless of light or dark imagery, and mirrors the kind of dynamic flip spotted, but without relying on text-shadow. The blur requires some transparency; that is why the background uses rgba. See browser details for backdrop-filter if you need to support older setups. (developer.mozilla.org)

  1. Auto-invert text with blending (clever, test visually)
.hero { position: relative; isolation:isolate; }
.title-auto {
  position:absolute; top:1rem; left:1rem; margin:0;
  color:#fff;                    /* base color */
  mix-blend-mode:difference;     /* inverts vs. backdrop */
}

mix-blend-mode: difference flips white text to dark on light areas and stays light on dark areas. It is great for highly variable photos but can look odd on vivid midtones; keep the scrim as a fallback if brand visuals are critical. (developer.mozilla.org)

Practical checks:

  • Verify readable contrast for body-sized text (AA). A badge/scrim makes passing much easier than shadows or strokes. (w3c.github.io)

If you like @HappyCat’s SASS route for color decisions, you can still overlay a subtle scrim so the computed color only has to be “good,” not “perfect.”

Recommended Answers

All 4 Replies

Member Avatar for Dani

I think you're going to have a very hard time finding a font color that will be okay on backgrounds that are near-white, black, and any color inbetween. What I would recommend is to have the user specify if they want a light font or a dark font at the same time as they upload the image of their choosing. There might be some third-party APIs that detect the color palette of an image, and then you can select a font that complements that color palette. Something like this might help.

Member Avatar for rproffitt

Dani's link looks great. I want to share something from an industry I worked as an engineer in for years.

Look at the date and time stamp as it changes from white to black at this link:
https://i.imgur.com/TvPksPt.mp4

Took me a few passes before I figured out why. Neat feature.

Member Avatar for ABIO22

I wish i knew about it

Edited by ABIO22
commented: I’m procrastinating learning Sass as well. +16
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.