search

oliviervalentin / moodle-mod_stickynotes

Sticky Notes is a Moodle activity for creating an interactive post-it wall. Students can create, move and vote for notes, under supervision of teacher which can define colors, lock fucntionnalities...
Other
4 stars 6 forks source link

Changing color and increasing the username on the note #29

Closed IlanAdivi1 closed 7 months ago

IlanAdivi1 commented 7 months ago

Hello Olivier,

There are a few things that our team has seen that need fixing in the Sticky-notes you've developed:

  1. Changing color due to accessibility issues.
  2. Increasing the username on the note (font-size) - it's currently very small.

It currently does not meet the accessibility requirements.

Thanks, Ilan

oliviervalentin commented 7 months ago

Hello Ilan, thank you for this useful comment ! I will search how to adapt font color to note background. Concerning font size, I must test first if it won't break note format. Best regards, Olivier

oliviervalentin commented 7 months ago

Hi Ilan, CSS wasn't the solution... :)

I have increased text size for username, and added a new function that will calculate contrast. Text will be black or white only, but it will be chosen in function of background color. Could you give, for an example, your background color so I can test if contrast is alright ? Thanks !

A sample from the solution I found : image

With notes rotation : image

Olivier

IlanAdivi1 commented 7 months ago

Hello Olivier,

That's how we think it should be with all of the background colors.

Also, adding style for Username to increase font size, and change color: 1) .headernote class:

font-weight: 650; font-size: 1rem; color: #000;

2) .contentnote class: font-size: 1.2rem;

Here you can see a tool for accessibility measurement.

https://coolors.co/contrast-checker/ffffff-000000

Maybe it's a good idea to put the username and note caption color as an option in system setting.

Thanks, Ilan

oliviervalentin commented 7 months ago

I've changed for text size in header and content note. For now, I will maintain this new function to swtich texte to black or white depending on background color. Let's see if it will fit community or if a new setting is more efficient. Thank you again for all your help ! :) Best regards, Olivier