Added a test for color contrast

[RunDevelopment]

This adds a new test to check the contrast of all colors against a background color.

It works via checking all color properties against a fixed background color which is set via a comment for the current scope. The background color can be set for a whole file or just a specific rule. The whole file is processed from top to bottom, so it's also possible to override a background color within the scope. Example:

/* @contrast-background: white */

.token.foo {
    color: white; /* this will not pass the check */
}

/* @contrast-background: black */

.token.foo {
    color: white; /* this will pass the check */
}
.token.bar {
    /* @contrast-ignore */
    color: black; /* this will be ignored */
}

@media (something) {
    /* Set the background color only within the @media rule.
     * @contrast-background: white 
     **/
    .token.bar {
        color: black; /* pass */
    }
}

The actual color checking is implemented using color which conveniently can calculate the contrast for us and even supports LAB color mode.

For each low-contrast color, it will output the line of the low-contrast color, the contrast and a suggest color with the same hue but higher contrast (corrected in LAB color space). (See the ensureContrast function.)
That being said: I'm not a designer and have no idea about color, so the correction might not be optimal.

---

I didn't fix any low-contrast colors as there are quite a few to fix.

Here's the current output of the test (only 2/8 themes pass):

  Contrast
    1) - ./themes/prism.css
    2) - ./themes/prism-dark.css
    √ - ./themes/prism-funky.css
    3) - ./themes/prism-okaidia.css
    √ - ./themes/prism-twilight.css
    4) - ./themes/prism-coy.css
    5) - ./themes/prism-solarizedlight.css
    6) - ./themes/prism-tomorrow.css


  2 passing (489ms)
  6 failing

  1) Contrast
       - ./themes/prism.css:
     AssertionError: There are 4 contrast issues:

Line 75: Background #FFFFFF: The color slategray has a contrast of 4.05 < 4.5. Use #697988 (4.50) instead.
Line 103: Background #FFFFFF: The color #690 has a contrast of 3.43 < 4.5. Use #508400 (4.50) instead.
Line 123: Background #FFFFFF: The color #DD4A68 has a contrast of 4.00 < 4.5. Use #D34060 (4.50) instead.
Line 129: Background #FFFFFF: The color #e90 has a contrast of 2.28 < 4.5. Use #AE6500 (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

  2) Contrast
       - ./themes/prism-dark.css:
     AssertionError: There are 5 contrast issues:

Line 68: Background #4D4033: The color hsl(30, 20%, 50%) has a contrast of 2.69 < 4.5. Use #C4A98E (4.50) inst
Line 85: Background #4D4033: The color hsl(350, 40%, 70%) has a contrast of 4.04 < 4.5. Use #DB9DA7 (4.50) ins
Line 109: Background #4D4033: The color hsl(350, 40%, 70%) has a contrast of 4.04 < 4.5. Use #DB9DA7 (4.50) in
Line 114: Background #4D4033: The color #e90 has a contrast of 4.40 < 4.5. Use #F09B05 (4.50) instead.
Line 130: Background #4D4033: The color red has a contrast of 2.52 < 4.5. Use #FF9061 (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

  3) Contrast
       - ./themes/prism-okaidia.css:
     AssertionError: There are 2 contrast issues:

Line 57: Background #272822: The color slategray has a contrast of 3.67 < 4.5. Use #7F8FA0 (4.50) instead.
Line 73: Background #272822: The color #f92672 has a contrast of 3.93 < 4.5. Use #FF4283 (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

  4) Contrast
       - ./themes/prism-coy.css:
     AssertionError: There are 6 contrast issues:

Line 114: Background #FDFDFD: The color #7D8B99 has a contrast of 3.43 < 4.5. Use #697785 (4.50) instead.
Line 139: Background #FDFDFD: The color #2f9c0a has a contrast of 3.51 < 4.5. Use #0D8900 (4.50) instead.
Line 147: Background #FFFFFF: The color #a67f59 has a contrast of 3.62 < 4.5. Use #956F4A (4.50) instead.
Line 155: Background #FDFDFD: The color #1990b8 has a contrast of 3.61 < 4.5. Use #007FA6 (4.50) instead.
Line 160: Background #FDFDFD: The color #e90 has a contrast of 2.25 < 4.5. Use #AD6400 (4.50) instead.
Line 166: Background #FFFFFF: The color #a67f59 has a contrast of 3.62 < 4.5. Use #956F4A (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

  5) Contrast
       - ./themes/prism-solarizedlight.css:
     AssertionError: There are 8 contrast issues:

Line 35: Background #FDF6E3: The color #657b83 has a contrast of 4.13 < 4.5. Use #5F757D (4.50) instead.
Line 89: Background #FDF6E3: The color #93a1a1 has a contrast of 2.48 < 4.5. Use #677474 (4.50) instead.
Line 107: Background #FDF6E3: The color #268bd2 has a contrast of 3.41 < 4.5. Use #0076BB (4.50) instead.
Line 117: Background #FDF6E3: The color #2aa198 has a contrast of 2.93 < 4.5. Use #007F77 (4.50) instead.
Line 121: Background #FDF6E3: The color #657b83 has a contrast of 4.13 < 4.5. Use #5F757D (4.50) instead.
Line 128: Background #FDF6E3: The color #859900 has a contrast of 2.97 < 4.5. Use #647A00 (4.50) instead.
Line 133: Background #FDF6E3: The color #b58900 has a contrast of 2.98 < 4.5. Use #926B00 (4.50) instead.
Line 139: Background #FDF6E3: The color #cb4b16 has a contrast of 4.27 < 4.5. Use #C64712 (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

  6) Contrast
       - ./themes/prism-tomorrow.css:
     AssertionError: There are 2 contrast issues:

Line 72: Background #2D2D2D: The color #6196cc has a contrast of 4.42 < 4.5. Use #6297CD (4.50) instead.
Line 123: Background #2D2D2D: The color green has a contrast of 2.68 < 4.5. Use #42A832 (4.50) instead.
      at Context.<anonymous> (tests\contrast-test.js:143:12)
      at processImmediate (internal/timers.js:456:21)

[mAAdhaTTah]

I added this to the 2.0 milestone. My thinking is these tests are a good idea, but we should bring the themes into compliance if we're going to add them (no good adding failing tests). Because these could be considered a breaking change (cuz these are changes in the theme), we could add the tests along with the (suggested or otherwise) color changes needed to bring them into compliance.

[RunDevelopment]

v2.0 seems reasonable to me. A few themes (e.g. Solarized Light) have to be substantially changed in order to pass the tests.

[prcantwell]

Great idea to improve contrast, looking forward to it.

A suggestion: Consider aiming for a contrast ratio of 4.6 instead of 4.5, to avoid rounding errors that would make web browsers flag a color combination as low contrast. (It seems like Stack Overflow uses approx. 4.6 or higher for their syntax highlighting, for example).

See the explanation in the first "Note" at this link (quoted below), which says 4.5 is a lower threshold, and computed values shouldn't be rounded up to 4.5:

The 3:1 and 4.5:1 contrast ratios referenced in this Success Criterion are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).

I'm bringing this up because, in the "Details" dropdown of the original post, the first suggested color combination (#697988 on #FFFFFF) has a contrast ratio of 4.47 instead of 4.50 (maybe a rounding error?):

Line 75: Background #FFFFFF: The color slategray has a contrast of 4.05 < 4.5. Use #697988 (4.50) instead.

Here's a link to a contrast checker for this color combination. See screenshot below. Chrome dev tools also shows 4.47 for this color combination.

[Badlapje]

Might be worth mentioning on the site which themes pass the contrast checks?

[Badlapje]

I just noticed that for the twilight theme, .punctuation inside a .tag adds opacity .7 which means the contrast fails the check. Removing that opacity allows it to succeed (as per the text of the tag)