RFC: Colour Scheme

[shiltemann]

As requested by @nekrut on Gitter, we can try to rethink the colour scheme of our tutorials.

In this pull request I have configured one possibility, based in part on a colour palette suggested by @nekrut

Please feel free to suggest your own color schemes, and then we can all decide on our favorites. To do so, edit the assets/css/main.scss file; near the top you will find colour definitions:

$red: #f00000;
$orange: #f06d00;
$yellow: #be9900;
$green: #339e3a;
$blue: #009090;
$dark-blue: #2c3143;
$light-blue: #5daadd;
$purple: #882d60;
$light-gray: #9d9d9d;

and then assignments of colours to boxes:

// colors tutorial boxes
$overview-color: $dark-blue;
$agenda-color: $blue;
$keypoints-color: $dark-blue;
$tip-color: $purple;
$warning-color: $red;
$comment-color: $orange;
$handson-color: $green;
$question-color: $blue;
$solution-color: $light-blue;
$details-color: $light-gray;
$feedback-color: $green;

to preview it locally, serve the site and view a template tutorial with all box types (as from screenshots) at: http://localhost:4000/training-material/topics/templates/tutorials/tutorial1/tutorial.html

If you have a nice suggestion, please share a screenshot and/or your css color settings

I am also curious to hear from the colour blind among us which schemes do and do not work for you.

P.S. old color scheme for reference:

P.P.S I will have to undo some changes to the template before merging whatever colour scheme we settle on :)

[shiltemann]

paletton.com may help with picking out a colour scheme

[martenson]

+1 on making the colors lively. My 10c would be to decrease saturation quite a bit so the sections don't stand out too much from the overall document (screaming at you).

[hexylena]

@martenson probably looks like screaming mostly due to the test page? I imagine real tutorials which have much larger blocks of text would be quite diffferent.

[martenson]

@erasche I actually had this feedback for a long time. I consider the boxes and their backgrounds too dominant given they are usually the least important thing on the canvas.

[willdurand]

paletton.com may help with picking out a colour scheme

Yes please.

[hexylena]

I'd argue that the boxes are important since they mean "hey listen, do something".

For any colour scheme that is chosen, it would be really nice if it could pass WCAG contrast guidelines. I've been using the "WAVE" plugin for this.

The proposed one gets quite close, I worry that going more light / pastel would present contrast issues for some of our users. (Or we go much more light and then black headings.)

[shiltemann]

similar idea, more pastel-y/muted (and black text for contrast).

$red: #de8875;
$orange: #f9b48a;
$yellow: #ffdf98;
$green: #559e83;
$blue: #8ca4d4;
$dark-blue: #2c3143;
$light-blue: #bae3f7;
$purple: #c2a1da;
$mid-gray: #adadad;
$teal: #66b2b2;

// colors general
$bg-color: $dark-blue;
$menu-color: $dark-blue;

// colors tutorial boxes
$overview-color: $blue;
$agenda-color: $purple;
$keypoints-color: $blue;
$tip-color: $green;
$warning-color: $red;
$comment-color: $orange;
$handson-color: $teal;
$question-color: $blue;
$solution-color: $light-blue;
$details-color: $mid-gray;
$feedback-color: $teal;

to change text colour to black, edit line 56 of assets/css/main.scss

// color: $color;  // white
color: $text-color; // black

not all boxes need to be different colours of course btw, e.g. I like the feedback boxes having same colour as hands-on sections, as users will associate this with "I need to do something" by the time they get there :)

..anyway, this is just to give another example, I am not particularly attached to any one of these schemes, and would be very happy to see any and all other suggestions :)

[mblue9]

I consider the boxes and their backgrounds too dominant given they are usually the least important thing on the canvas.

I have to say I agree with this, the boxes with the big colour stripes right across the page are too dominant and in-your-face for me. Do the stripes have to go all the way across the page? Could they be smaller, thinner or instead have the emphasis on the icons? As I'm working on a tutorial at the moment and having 3 big stripes close to each other like below looks ugly to me:

But I can live with these big stripes if I have to and I really appreciate this cool templating system! Can't believe how easy it is to work with! Thanks for creating it!!! ❤️

[willdurand]

It is also possible to give some elevation to these boxes.

[shiltemann]

@willdurand good idea :) ..another thought: do you think it would it be possible to style the box headers more like tabs? i. e. that the colour background doesn't extend the full width but only as far as header text? (and maybe with some nice rounded corners).. might make them slightly less prominent/in-your-face to address comments by @mblue9 and @martenson?

(..and for the question boxes it might be nice to have an actual second tab with the answers in that case? save a little box nesting? though we would have to see if this could work with pdf generation of course)

[martenson]

@shiltemann I am a big fan of your pastel-y version.

As of the markup changes you described I would suggest creating an issue for it and leaving it after GCC so we go in the conference with a stable setup.

[nekrut]

the more muted version is VERY nice

[mblue9]

@willdurand good idea :) ..another thought: do you think it would it be possible to style the box headers more like tabs? i. e. that the colour background doesn't extend the full width but only as far as header text? (and maybe with some nice rounded corners).. might make them slightly less prominent/in-your-face to address comments by @mblue9 and @martenson?

@shiltemann I love your suggestions! Would love to see what they look like at some point in the future if they're possible, although appreciate they would cost someone(s) time to implement. I agree, the pastels are the nicest colour but I don't think changing to pastel colour would alleviate the concern I have, which is that these bands of colour in the boxes dominate the view. If you look at another example from the tutorial I'm working on below, the colour in the boxes dominates the content (to me anyway) whereas imho the formatting should just enhance it. But very willing to accept I may be the only one with this opinion. Ideally I'd love to know what do (large) groups of users think and prefer, that's the most important opinion to me.

I really like this idea too:

(..and for the question boxes it might be nice to have an actual second tab with the answers in that case? save a little box nesting? though we would have to see if this could work with pdf generation of course)

I was thinking it's a bit too easy/low effort to see the solutions currently 😄 so if something like that is possible I think that would be great! 👍

Thanks for considering these changes!!!

[hexylena]

@mblue9 @martenson (@bebatut) How about something like this to decrease the amount of colour / place less emphasis on it while still making it clear?

I added

border-bottom: 1px solid $bg-color;
border-top: 1px solid $bg-color;
border-left: 10px solid $bg-color;

on line 56 of assets/css/main.scss

OR

[hexylena]

We might then consider using the original colours from the first commit since they are much more easily distinguished and perhaps less overwhelming for those that were concerned about it:

[hexylena]

OR yet another option (@shiltemann had a great idea and we finally got it working)

[bgruening]

I like your first one more.

[martenson]

@erasche The hollow ones are very nice. I vote with Bjoern.

[hexylena]

Option Null	Option A	Option B
Original Version	Fancy Tabs, Pastel Colours	Thick left border, new colours from OP

[hexylena]

CSS, just add this in the end of their respective sections:

For option A:

@mixin tutorial-box ($bg-color, $color: $white) {
  margin-top: 3 * $tutorial-box-spacing;
  padding: $tutorial-box-spacing $tutorial-box-spacing $tutorial-box-spacing;
  border: 1px solid $bg-color;
  & > h3 {
    vertical-align: 1em;
    display: inline;
    float: left;
    margin-top: -3.30rem;
    border-top-left-radius: 15px;
  }

For Option B:

@mixin tutorial-box ($bg-color, $color: $white) {
  & > h3 {
    background-color: white;
    border-bottom: 1px solid $bg-color;
    border-top: 0px solid $bg-color;
    border-left: 12px solid $bg-color;
  }

[nsoranzo]

I still prefer the pastel/muted from @shiltemann ( #815 (comment) ), maybe we can try with the box title text in white.

[hexylena]

@nsoranzo with white titles, unfortunately, they are very low contrast and may be hard for some of our trainees to read.

[nsoranzo]

Fair enough, I feared that.

[mblue9]

The hollow boxes look the nicest to me too 👍 Thanks for working on this @erasche and @shiltemann!!

[shiltemann]

I think my preference goes to option A in #815 (comment)

also, to follow up on @willdurand's idea, here is what it could look like with some shadow/elevation added (though he could probably do it nicer ;)):

css

@mixin tutorial-box ($bg-color, $color: $white) {
    margin-top: 3 * $tutorial-box-spacing;
    padding: $tutorial-box-spacing $tutorial-box-spacing - 0.1rem $tutorial-box-spacing;
    border: 1px solid $bg-color;
    box-shadow: 5px 5px $bg-color;
    & > h3 {
        font-size: $font-size + 3;
        margin-top: 0;
        margin-left: -$tutorial-box-spacing;
        margin-right: -$tutorial-box-spacing;
        padding: $tutorial-box-spacing / 2;
        background-color: $bg-color;
        color: $text-color;
        vertical-align: 1em;
        display: inline;
        float: left;
        margin-top: -3.30rem;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}

[shiltemann]

Here some screenshots for @bebatut's tweaks. A bit more coherent set of colours I think, and the hands-on and question boxes are a more subdued colours since they account for most of the boxes and shouldn't distract from the tutorial contents

dummy tutorial	section of real tutorial

[hexylena]

Checked over new colours and tested against wcag, all looked good except code blocks and hyperlinks (too light). So I've changed those as little as possible to meet wcag AA guideliness (not the stricter AAA guidelines.) The code blocks were always hard for me to read anyway.

[hexylena]

Looks awesome! Let's merge it :)

[bgruening]

Wuhaaaaaa! Awesome!!!