Home › Forums › House of Creativity › Suggestions and Troubleshooting › Request: Higher contrast between font color and background in text boxes
Tagged: accessibility, website colors
- This topic has 6 replies, 4 voices, and was last updated May 30, 2020 at 1:56 pm by Wandering Author.
-
AuthorPosts
-
September 19, 2019 at 10:27 pm #300707
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/October 4, 2019 at 9:10 am #301938This 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
October 4, 2019 at 3:21 pm #301939This 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/October 4, 2019 at 3:38 pm #301940Mac (High Sierra), Safari, I see the same thing Margaret does — if the focus is not in the reply box, the type looks darker:
- This reply was modified 5 years ago by ErinMH.
October 10, 2019 at 5:49 pm #301967Mac (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/January 18, 2020 at 3:40 am #303155I 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/May 30, 2020 at 1:56 pm #303713This 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…
-
AuthorPosts
- You must be logged in to reply to this topic.