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

Home Forums House of Creativity 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
      0 Pirate Gold Coins

      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
        125 Pirate Gold Coins

        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
          0 Pirate Gold Coins

          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
            0 Pirate Gold Coins

            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 4 years, 5 months ago by ErinMH.
            #301967
            MarFisk
            Moderator
              0 Pirate Gold Coins

              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
                0 Pirate Gold Coins

                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
                  0 Pirate Gold Coins

                  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.