Add optional override for custom color-contrast ratio

[StephenEsser]

Feature Request

Add an optional override for setting the desired color-contrast ratio.

Details

Our team has been developing a lowlight theme for our UI applications. The theme can be demoed here: https://engineering.cerner.com/terra-core/components by selecting the lowlight theme from the dropdown menu in the upper-right hand corner and navigating around the site.

Lowlight theme is different than "dark mode". Lowlight theme is intended to be used in a dimly lit setting. Radiology/x-ray rooms for example. Our lowlight theme is driven by slightly different color-contrast ratio standards.

We'd like the ability to test the lowlight theme against a different set of color-contrast settings rather than disable the color-contrast rule entirely.

[straker]

Thanks for the feature request. This is actually something we've been looking into recently to expand our checks to make them more configurable.

[WilcoFiers]

One other thing to consider here, the logic for deciding whether or not the color-contrast rule passes sits in the hasValidContrastRatio method. I think that's a pretty odd place for that logic to live. Instead I think that needs to be moved to the check, which would also make it easier to configure the check.

[WilcoFiers]

Here are the options we're thinking of adding to the color-contrast evaluate method:

• fontWeight equals bold (700)
• pt size equals smallBold (bold && 14)
• pt size equals smallNotBold (!bold && 18)
• small text ratio (4.5)
• large text ratio (3)
• minimum contrast for small text (1.0)

[padmavemulapati]

Verified with the latest axe-core(v3.5.5), there were checks for color-contrast pass/fail based on the threashold
Here are the few sample test files tried with different options:

for <div style="color: blueviolet; background-color: white; font-size: 14pt; font-weight: 700" id="target"> <span style="font-weight:bolder">My text</span></div> - color-contrast rule is passing

and
failing for <div style="color: gray; background-color: white; font-size: 6pt; font-weight: 100" id="target"> <span style="font-weight:bolder">My text</span></div>
or
<div style="color: #999; background-color: white; font-size: 14pt; font-weight: 00" id="target"> <span style="font-weight:bolder">My text</span></div>

[jeankaplansky]

Added to internal release notes 7/27/2020