You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At present, labelTextColor accepts either a single color (either specified or from theme), or a from: colors modifiers: value that scales it lighter, darker, or more/less opaque relative to the background color.
However, a growing number of websites are required to comply with Web Content Accessibility Guidelines (WCAG) standards, which include requirements for adequate contrast between label text and background colors. Light colors need dark labels, and dark colors need light labels. Currently, labelTextColor does not support a solution to meet this WCAG standard. Instead, designers and developers need to ensure all colors have sufficient contrast to a single label color, limiting the range of colors that can be used for a given chart which may require dozens of different colors.
Suggestion
colors accepts a function in the form of, e.g. bar => dataColors[bar.id], enabling each value to be separately colored. labelTextColor should be able to accept a similar function. The current functionality does not correctly register values of bar passed into labelTextColor.
Ultimately, it should be possible to use another library like chroma.js to evaluate the color of a background, determine whether labelTextColor should be white or black for a given background to meet accessibility requirements, and set the color for that label independently of the other labels.
The text was updated successfully, but these errors were encountered:
Current SItuation
At present,
labelTextColor
accepts either a single color (either specified or from theme), or a from: colors modifiers: value that scales it lighter, darker, or more/less opaque relative to the background color.However, a growing number of websites are required to comply with Web Content Accessibility Guidelines (WCAG) standards, which include requirements for adequate contrast between label text and background colors. Light colors need dark labels, and dark colors need light labels. Currently,
labelTextColor
does not support a solution to meet this WCAG standard. Instead, designers and developers need to ensure all colors have sufficient contrast to a single label color, limiting the range of colors that can be used for a given chart which may require dozens of different colors.Suggestion
colors
accepts a function in the form of, e.g. bar => dataColors[bar.id], enabling each value to be separately colored.labelTextColor
should be able to accept a similar function. The current functionality does not correctly register values of bar passed into labelTextColor.Ultimately, it should be possible to use another library like chroma.js to evaluate the color of a background, determine whether labelTextColor should be white or black for a given background to meet accessibility requirements, and set the color for that label independently of the other labels.
The text was updated successfully, but these errors were encountered: