Improve legibility of coloured notes

mysociety / alaveteli

Provide a Freedom of Information request system for your jurisdiction

https://alaveteli.org

Other

385 stars 196 forks source link

Improve legibility of coloured notes #8277

Closed HelenWDTK closed 1 month ago

HelenWDTK commented 1 month ago

Currently the notes use a text colour that matches the colour of the note, but sometimes this is difficult to read e.g green text on a green background. We should change the text colour to black, or something else that ensures that there is sufficient contrast to make this easy to read.

garethrees commented 1 month ago

Moved to mysociety/alaveteli since these styles are built in.

Assessment of current styles:

Red: https://webaim.org/resources/contrastchecker/?fcolor=D32A0E&bcolor=FDE7E3 (4.31:1 – bad)
Yellow: https://webaim.org/resources/contrastchecker/?fcolor=D3710E&bcolor=FDF0E3 (3.05:1 – bad)
Green: https://webaim.org/resources/contrastchecker/?fcolor=358753&bcolor=CFECDA (3.51:1 – bad)
Blue: https://webaim.org/resources/contrastchecker/?fcolor=006687&bcolor=EDFBFF (6.1:1 – pretty good)