laravolt/avatar

Low contrast between background and foreground

Closed this issue · 8 comments

ezeveliz commented

In some cases, the result is a yellow avatar with white letters, which is not very easy to read. So, I would like to know, how or where I could override the getRandomForeground() to check for contrast before chossing one.
Thanks!

uyab commented

You can override the config file: https://github.com/laravolt/avatar/blob/master/config/config.php

Place it in config/laravolt/avatar.php

ezeveliz commented

@uyab I know, but what I wanted is to check for contrast so, if a dark background is chosen, to choose a light foreground, and if a light background is chosen, to choose a dark foreground.
All I can do in config is to give a list of colors, but they're chosen randomly, so contrast is not always ok.

uyab commented

Ah i see, do you have any idea how this should be implemented?

ezeveliz commented

What I wanted to do was override create(I think), first choose a background randomly and then check contrast against black or white(those would be the possible foregrounds), and choose the one with the higher contrast.

mirko77 commented

Would be better to randomize both, picking from a selection of foreground/background colors.?

I guess an array of 20 possible color combinations will do

Any suggestion?

uyab commented

I think it is a good idea to have some theming functionality.

Currently there is only one pair of background-foreground colors.

    'foregrounds'   => [
        '#FFFFFF',
        '#000000',
    ],
    'backgrounds'   => [
        '#f44336',
        '#E91E63',
    ],

We can make a new config value, let's call it themes:

    'themes' => [
        'monochrome' => [
            'foregrounds' => [
                '#FFFFFF',
            ],
            'backgrounds' => [
                '#000000',
            ],
        ],
        'material' => [
            'foregrounds' => [
                '#FFFFFF',
            ],
            'backgrounds' => [
                '#000000',
            ],
        ]        
    ],

And choose active theme with:

'theme' => ['theme1', 'theme2'] // will randomly choose pair of bg-fg colors from each theme
'theme' => [] // or null or false, will randomly choose colors from all defined themes

Is this a good idea? Anybody willing to make a PR ?

uyab commented

Theming are available since 3.0.0. You can define multiple color combination (themes) and of course you need to check the contrast manually.