Legibility issues with some fields

Options
andrewminion
andrewminion
Community Member
in 1Password in the Browser

When 1Password X autofills username/password fields on some websites, the input background is a dark blue color, rendering the text nearly illegible.

This happens when the inputs have data-com-onepassword-filled=dark attribute; in my experience, most sites have a data-com-onepassword-filled=light attribute, and text is legible.

I tried to override the stylesheet to modify the background color, but am unable to override the background-color even with extremely specific CSS selectors and !important.

For now, I am setting the text color to white for input[data-com-onepassword-filled=dark] and that helps the legibility issue.

I think I've found the cause. Both inputs have this CSS rule set, using a global variable to evaluate the color: color: var(--80). When I removed that rule, 1Password X used data-com-onepassword-filled=light and legibility was much improved.

Based on that, could you improve detection for the computed text color and base the background color off that?

Original styles:

illegible text

Unable to override the injected styles from the Chrome extension:

screenshot

1Password Version: 7.7 (70700015)
Extension Version: 1.22.3
OS Version: OS X 10.15.7
Sync Type: 1Password
Referrer: forum-search:data-com-onepassword-filled dark

Comments

  • ag_yaron
    ag_yaron
    1Password Alumni
    Options

    Hey @andrewminion ,

    I've asked one of our developers to take a look and see if they have any suggestions or additional info on how 1Password calculates the color of the autofill background.

    Thanks for bringing this up! Hopefully we'll get an answer tomorrow.

  • oliverdunk
    oliverdunk
    Options

    Hi @andrewminion,

    Yaron passed your post along and asked if I could investigate.

    We're actually tracking a few issues like this one, where the background colour chosen by 1Password X is inappropriate given the input's text colour. I don't think the CSS variable is the problem - we do use computed styles here. Instead, looking at the specific colour used in the screenshot you shared, it seems like it's just a tiny bit too light for us to go for the other background.

    Currently, your workaround of changing the text colour in fields with this attribute seems like a good one. Alternatively, you could modify the text colour ever so slightly - going for rgb(110 119 128), for example.

    This is definitely something that should be fixed on our end, and I hope we'll be able to look at it soon. Ultimately we need to do a better job of figuring out what's best without any work on your side.

    I hope this helps! Let me know if you have any more questions, and in the meantime, I wish you a very Merry Christmas!

    ref: dev/core/core#4103

  • pedrosantiago
    pedrosantiago
    Options

    Hi there. We had the same problem on our end. I understand that 1password should have a default styling, but I'd like to be able to change it according to my website color palette. Maybe if we set a with these kind of thing and only if that is present, it would read the color from there instead.

    This way we, developers, can extend it if necessary, and you guys will still maintain the default.

  • ag_yaron
    ag_yaron
    1Password Alumni
    Options

    Thanks for the suggestion @pedrosantiago !

    Hopefully we will have some improvements on this matter soon.

This discussion has been closed.