Tune new colors added for dark+ & light+ themes

[aeschli]

For the light and dark theme we added for new colors. We'd need a pass from the UX team to tune them where necessary. Especially in the light themes, some of the colors don't differ very much from the existing colors.
To tune, make changes to extensions/theme-colorful-defaults/themes/dark_plus.tmTheme and light_plus.tmTheme

Theme	Control flow keywords	Type names	Function names	Variable & Parameter names
Light	Pink AF00DB _WCAG AA pass_	Turquoise 2B91AF _Insufficient Contrast!!_	Light gray 404040	Dark blue 001080
Dark	Pink C586C0 _WCAG AA pass_	Turquoise _4EC9B0_	Yellow-brown DCDCAA	Light blue 9CDCFE

The base colors are (I wouldn't make any changes to these):

Theme	Background	Default foreground	Comments	Keywords	Strings	Numbers
Light	White FFFFFF	Black 000000	Green 008000	Blue 0000FF	Red A31515	Green 09885A
Dark	Black 000000	White D4D4D4	Green 608B4E _Insufficient Contrast!!_	Blue 569CD6	Red CE9178	Green B5CEA8

Snippet:

export module Conway {
    export class Cell {
        private row: number;
        private col: number;

        public countNeighbors(cell: Cell) : number {
            var neighbors = 0;
            for (var row = -1; row <= 1; row++) {
                for (var col = -1; col <= 1; col++) {
                    if (row == 0 && col == 0) continue;
                    if (this.isAlive(cell.row + row, cell.col + col)) {
                        neighbors++;
                    }
                }
            }
            return neighbors;
        }

        private isAlive(row: number, col: number) : boolean {
            return true;
        }
    }
}

[bgashler1]

Accessibility Analysis

I've checked all the colors against _Web Content Accessibility Guidelines WCAG 2.0_.

I've updated your comment above with annotations as to which colors could be improved (i.e. ones that only got a AA-rating, or minimum requirements) and which ones did not pass with sufficient contrast.

I will provide updated alternatives in a little bit that will fix the ones not passing minimum contrast.

Aesthetic Analysis

The colors look good on dark, but on light theme the function/method names are not clearly colored (especially for people that have trouble seeing faint colors). We could also improve contrast on type annotations on the light theme. I'll provide some updated colors momentarily.

[bgashler1]

Suggested Replacement Colors for Dark+ and Light+

(Changed colors in bold)

Theme	Control flow keywords	Type names	Function names	Variable & Parameter names
Light	Pink AF00DB WCAG AA pass	Turquoise _267f99_	Dark brown _777759_	Dark blue 001080
Dark	Pink C586C0 WCAG AA pass	Turquoise C586C0 WCAG AA pass	Yellow-brown DCDCAA	Light blue 9CDCFE

[aeschli]

Thanks @bgashler1.
I updated the light theme according to your suggestions.
I realized that I had a wrong RGB value in the table above. It's Turquoise 4EC9B0 (not C586C0).
4EC9B0 is also what you see in the screenshots.
Can you confirm that 4EC9B0 is fine?

[isidorn]

I do not like the gray color for the ligth+ theme for method names.
It makes it look blury compared to the nice black text that the rest of the document has.
I would like a special color but something that looks sharp

Just my opinion as an every day light+ theme user

[bgashler1]

@isidorn, what do you think of #795E26 (_Second Proposal_ below) instead? I think this is a good balance. It correlates with the dark theme's color, but it's much more crisp and has a much stronger contrast ratio.

[isidorn]

👍

[aeschli]

795E26 looks good to me, I updated the code

[bgashler1]

Awesome! Thanks guys.