Accessibility color contrast issues in style.min.css

[snidersd]

Also see: jupyter/notebook#1801
After running the Dynamic Assessment Plugin for Chrome the following high contrast issues were found:

1. From localhost/tree/docs the contrast between the word docs against the gray background fails. Change the color on line 1094 from 337ab7 to 336db7 or darker passes.
2. Create a new notebook and go back to localhost/tree/docs. The word "running" appears next to the file name of the new notebook, but the color green used for the word "running" fails color contrast. Changing the color on line 9812 from 5cb85c to 5c7f5c or darker passes.
3. From localhost/tree#running (a new notebook is running) the contrast for line 3278 kernel-name #foad4e needs to be darker.
4. From localhost/tree#running (a new notebook is running) the contrast for line 9814 btn-warning #5bc0de needs to be darker.
5. From a new notebook (http://localhost/notebooks/docs/Untitled.ipynb) the contrast for line 11978 kernel_indicator give defined ordering to keyboard shortcuts with the same help_index #777 needs to be darker.

[takluyver]

I've marked this 'good first issue' as there are specific concrete things to do be done.

[takluyver]

But for anyone tackling it: note that style.min.css is a generated file. You'll need to identify the source files things come from (probably .less files) and fix the issues there.

[viraat]

Hello! Can I try my hand at this?

[takluyver]

Absolutely! Are you clear on how to go about it?

[viraat]

I'm new to this so please correct me if I am wrong. 😄

1. Identify where the colour values for the particular elements described are present -> look in .less files. (This is where I am currently stuck, any pointers appreciated 😅)
2. For each of the above mentioned points change the colour values to improve contrasts.
3. Commit these changes with a description.
4. Submit a pull request.

[takluyver]

Yup, that sounds right.

The less files are scattered around the notebook/static directory in the repository. You can try searching for the relevant values with an IDE or a tool like grep. Or you can install the notebook from source and use your browser's inspector to help find the relevant files (it uses source maps to point back to the less files, even though the browser has loaded the minified css).

[viraat]

I tried using grep and the find in all files feature in Sublime text to look in the repository for the colour values but could not find any.

The grep code was similar to: grep -r -l '#5bc0de' ~/Open\ source//notebook/notebook/static/.
I tried searching using both with the # and without it.

I then went on to install the notebook from source and found the first issue using Chrome's inspector:

From localhost/tree/docs the contrast between the word docs against the gray background fails. Change the color on line 1094 from 337ab7 to 336db7 or darker passes.

It is in the notebook/static/tree/less/tree.less file. However, I was not able to find the colour value to change it. I see that the element in the issue is of class project_name but could not figure out how to change the colour value from it. This is the code I found

#project_name {
    display: inline-block;
    padding-left: @dashboard_lr_pad;
    margin-left: -2px;

    > .breadcrumb {
        padding: 0px;
        margin-bottom: 0px;
        background-color: transparent;
        font-weight: bold;
    }
}

I am a little confused and some pointers would help a lot. Thanks for your patience. 😅

[takluyver]

Dig a bit further in with the inspector - the 337ab7 colour is actually for the <a> tag, and it's defined in a file called scaffolding.less, which is part of bootstrap. When I look at that, it references a LESS variable @link-color, which is set in another file called variables.less.

One way or another, we need to override that. It's probably best to use a darker colour only inside the #project_name block rather than changing the colour of all links throughout the UI.

You can probably do this using the LESS function darken, something like darken(@link-color, 10%) (I haven't checked if 10% is enough, I'm just showing the syntax).

[hendrixet]

We were doing this for our software engineering practicum, and we're trying to take a stab at it. Does it look like we may be on the right track? Not trying to step on toes just wanted to see if we could solve it.

#project_name {
    display: inline-block;
    padding-left: @dashboard_lr_pad;
    margin-left: -2px;
    darken(@link-color, 10%);
    
    > .breadcrumb {
        padding: 0px;
        margin-bottom: 0px;
        background-color: transparent;
        font-weight: bold;
    }
}

[takluyver]

Along the right lines, but I think you need to put it in a color property, like this:

color: darken(@link-color, 10%);

(Also, I haven't checked if 10% is actually enough - someone should make the change, and then use the Chrome plugin again to see if the new colour has enough contrast)

Feel free to make a pull request if you get it working.

[hendrixet]

Hey, wanted to update. We were having some trouble with IBM's dynamic assessment plugin, but we were able to find the actual location of the bug. It was still in tree.less, but was actually under the .item_buttons class.
This is the code we changed:

This is the visual change:

Once we get the Dynamic Assessment Plugin working and can test it we will submit a pull request.

[takluyver]

Great, thanks :-). @snidersd, any tips about getting the assessment plugin working?

[snidersd]

@takluyver and @hendrixet, Information on the Dynamic Assessment Plugin can be found at https://aat.mybluemix.net/auth/tools.html?accountId=2f492827-98fc-4d5e-ad3e-b3756f47d73f. Note: you will need to sign up to get an IBMid before you can access the information. After you are logged in copy the authentication token into DAP then try to run a scan. If this does not resolve the issue, please provide additional details related to the error.

[shreya99oak]

Hi, I would like to work on this bug too...I was unable to find the file for this issue...it seems scaffolding.less
doesn't exist...
I'm a beginner so would need some help :)

[hendrixet]

@snidersd @takluyver I got the Dynamic Assessment Plugin working and with 20% darkened it passes the accessibility tests now. I submitted a pull request this morning

[takluyver]

@hendrixet thanks, I think that PR (#3336) takes care of point number 2 from the description of this issue, right?

@shreya99oak scaffolding.less is a file from bootstrap, a CSS dependency which is not in this repo, but is fetched as part of building from source. We can't easily modify that directly, so we need to find the right places in our own .less files to override colours that come from there.

[profwacko]

Hi I would also like to help out with this, is there anything else that needs to be done @takluyver @shreya99oak

[naz3eh]

I this issue close? If not, then I would like to work on this issue

[kevin-bates]

Hi @Nazeeh21, Although we're not entertaining new features at this time, I think contained accessibility improvements would qualify as the kinds of changes we can still consider. I do not know if these issues are still present or their current state but, based on the comment history, I suspect they are still present.

If you're able to contribute changes to address this issue, it would be ideal if you could include screenshots, both before and after, of the affected areas as some reviewers (like myself) have limited knowledge of the front-end implementation and pictures are worth a thousand words lines of code. 😄

Thank you for your help.

[naz3eh]

Hey @kevin-bates, I will check the current status of this issue. If it is not up to the mark, I will start contributing changes to fix this issue. Also, I will surely share the before and after screenshots of the affected areas. 😃 👍🏻