Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Contrast ratio insufficient for some color combinations

See original GitHub issue

According to the Color Guidelines:

If the difference between two values is 50 or greater, the colors are accessible. Anything below a difference of 50 may fail accessibility standards.

However, there are multiple colors that do not meet this criteria (expected ratio: 4.5), e.g.:

magenta-60 (#e5f6ff) and cyan-10 (#d12771): 4.471

Here’s the full list:

cool-gray-10 / magenta-60 (4.498217550836486)
cyan-10 / magenta-60 (4.4714999480018385)
cyan-10 / warm-gray-60 (4.479357949030447)
green-10 / magenta-60 (4.492613562183291)
magenta-10 / magenta-60 (4.49537081238271)
purple-10 / magenta-60 (4.496385732743474)
warm-gray-10 / magenta-60 (4.494925931674778)

Here’s a script I wrote to check the contrast ratio for all colors.

Issue Analytics

State:
Created 3 years ago
Comments:25 (12 by maintainers)

Top GitHub Comments

3reactions

sadekbazaraacommented, Sep 10, 2020

Just following back up on this issue after having a broad discussion with @dudley-ibm who will be handling the changes across all the files that are hosted in the downloadable color package available here: https://github.com/carbon-design-system/carbon/raw/master/packages/colors/artifacts/IBM_Colors.zip

Those contents are as follows: Screen Shot 2020-09-10 at 4 58 12 PM

After considering the breaking change point that @tw15egan mentioned above, we’re leaning towards naming this “v2.1” to better reflect the insignificant nature of the changes vs. “V03”. Additionally, we’re moving towards dropping the numeral “0” from the naming structure in favor of more traditional versioning, hence “v2.1”.

If there are no objections we can start work on this soon. @jeanservaas we’ll need to update the Carbon color package as well. I think it’s just a .json file that needs editing.

Once everything is live and direct, we’ll want to coordinate our announcements across the appropriate channels.

cc @mjabbink @shixiedesign

2reactions

mjabbinkcommented, Jul 23, 2020

V3 makes sense in this context of color palette. Clean and simple to your point. To use 2.1 is logical but unnecessary when compared to v3.

Top Results From Across the Web

Use sufficient color contrast | Digital Accessibility

Use sufficient contrast. Make sure that the contrast ratio between text color and background color is at least 4.5:1. There are color-contrast tools...

Insufficient Color Contrast - Equalize Digital

Having inadequate color contrast may cause a user to miss out on key information or stop them from being able to take the...

Understanding Success Criterion 1.4.3: Contrast (Minimum)

This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast...

Check Text and Background for Sufficient Color Contrast

People who may have low vision, or may be colorblind, could encounter some difficulty distinguishing text from a background color if the contrast...

SIA-R69 Color contrast is not sufficient, explained

On the surface level, the color contrast requirements in WCAG are pretty straightforward. There needs to be a contrast ratio of 4.5:1 for ......