Ensure colour swatch choices do not allow for low contrast text/background colour combinations
Lighter colours in the colour choices result in low contrast between the text and background:
- Make all colour choices result in sufficient contrast between text and background.
If people want to do white on grey, they can hack their own stylesheets to do that, but we can give everybody else inclusive defaults.
Perhaps we could have some variation in the colours across the theme to enhance accessibility without losing the vibrancy of the colours. E.g. when used behind text, the colour is darker; when used as a background, the colour is lighter; when used as an accent shape, the colour retains its vibrancy. So an evolution of the thinking going on here:
The values will need to be chosen based on both what is accessible, and what is aesthetically-pleasing. This will make the variables/CSS slightly more complicated, but I think it will be worthwhile. I don’t think we can get away with doing it programmatically (e.g. doing CSS pre-processor calculations to add more black) as it’s hard/impossible to achieve both accessible and aesthetically pleasing. (Trust me, I tried so hard to achieve this on my own site recently and gained a few more grey hairs!)
Also would be nice to have:
- Profile description background be darker shade of chosen colour, rather than black
This could contribute to the feel/accessibility created above. For example, black on yellow is pretty grim, but dark yellow on yellow is a little more pleasing:
- Hallobot background reflect chosen colour
- Default avatar reflect chosen colour (on occasion that a person chooses a colour but doesn’t upload a profile image)
Thoughts on this: Maybe the Hallobot background should actually be the Stad Gent brand/default colour, as the Hallobot is not representative of the individual changing the settings (whereas the default avatar is…)?