Request: Higher contrast between font color and background in text boxes

Home Forums Main Lobby Suggestions and Troubleshooting Request: Higher contrast between font color and background in text boxes

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #300707
    MarFisk
    Moderator
    • Topics - 561
    • Replies - 15,563

    When you write a post, the contrast between the text color and the text box background once the cursor is in the box is not very high. This makes it hard to see what you’re typing. Would it be possible to have a higher contrast?

    She remakes mechanical devices, and he dreams of becoming a steamship captain in The Steamship Chronicles. Book 1 is free in eBook.
    https://margaretmcgaffeyfisk.com/the-steamship-chronicles/

    #301938
    J.A. Marlow
    Moderator
    • Topics - 311
    • Replies - 1,100

    This is a CSS text size issue, as the text is already black. But I agree, having the text bigger and a little bolder would be easier on the eyes.

    Putting on the to-do list.

    J.A. Marlow
    The String Weavers, Salmon Run, Redpoint One series.

    Writer alter-ego of Dreamers Cove

    #301939
    MarFisk
    Moderator
    • Topics - 561
    • Replies - 15,563

    This is a CSS text size issue, as the text is already black. But I agree, having the text bigger and a little bolder would be easier on the eyes.

    Putting on the to-do list.

    Thanks for checking it. It might be more than that. At least in Chrome, when you click reply (with quote is what I usually use, so maybe it’s different), everything is fine until you click into the box to type. Then it appears as if a white overlay covers the box, but also the text, dropping the black text down to a dim grey. If that overlay could fall under the text, that might solve it, but I just poked around the CSS a little using Inspect with the focus state forced on and can’t see where it’s being done. It does set the font-weight to 400 which is normal but may be too light against the off-white background.

    She remakes mechanical devices, and he dreams of becoming a steamship captain in The Steamship Chronicles. Book 1 is free in eBook.
    https://margaretmcgaffeyfisk.com/the-steamship-chronicles/

    #301940
    ErinMH
    Moderator
    • Topics - 405
    • Replies - 10,885

    Mac (High Sierra), Safari, I see the same thing Margaret does — if the focus is not in the reply box, the type looks darker:

    focus elsewhere

    focus in the reply box

    • This reply was modified 11 months, 2 weeks ago by ErinMH.
    #301967
    MarFisk
    Moderator
    • Topics - 561
    • Replies - 15,563

    Mac (High Sierra), Safari, I see the same thing Margaret does — if the focus is not in the reply box, the type looks darker:

    Ooh, clever. Thanks for the photos.

    She remakes mechanical devices, and he dreams of becoming a steamship captain in The Steamship Chronicles. Book 1 is free in eBook.
    https://margaretmcgaffeyfisk.com/the-steamship-chronicles/

    #303155
    MarFisk
    Moderator
    • Topics - 561
    • Replies - 15,563

    I don’t know if you’re still looking at this or if the CSS is out of reach, but I happened to remember how to track down CSS bugs tonight and here’s the problem:

    input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
        color: #666666;
        background-color: #fff9ef;
        border-color: #bfbfbf;
    }

    The font color and background-color settings when focus is active is what makes the text unreadable.

    To reproduce in Chrome on Windows (IE does something like this, too. Don’t know about others, or on Mac.)

    1) Click reply on a post.
    2) Right-click in the text box and select “Inspect” from the right-click menu to open the code inspector.
    3) The style area (placement depends on your settings but usually to the right if bottom of browser and at the bottom if code section appears on the right side of the browser.
    4) Scroll through the CSS, which is specific to the text box, until you see the CSS provided above.
    5) Click the :hov filter and select :focus (This holds the text box in state so you don’t think you’ve lost your mind)
    6) Click the checkmark next to color and background-color to turn them off and the text gets darker. Click them again and it whites out.

    Without turning the :focus to fixed, the background and font color reset to the default and appear fine.

    She remakes mechanical devices, and he dreams of becoming a steamship captain in The Steamship Chronicles. Book 1 is free in eBook.
    https://margaretmcgaffeyfisk.com/the-steamship-chronicles/

    #303713
    Wandering Author
    Participant
    • Topics - 34
    • Replies - 369

    This is happening in Firefox as well. On Linux. My guess would be it happens in all browsers, that it is a function of the site code or CSS. From my time spent fiddling with the odd, hybrid CSS of my Blogger blog, I know these things are not always easy to sort out. But I will add my voice. I can scarcely read what I’m composing at all. It’s like my cataracts came back…

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.