[SDK] For every background color in a system we need to calculate the folllowing to guarantee accessibility

[lwnoble]

Problem/Concern

Proposed Solution

For each background we need to calculate the following in light in light and dark modes

• Color: The hex value of the background
• On-Color: The hex value of the on-color of the color they select
• NEW Quiet: Lightened version of the on-color that has still has a contrast of 4.5:1 to the "Color" up to a .6 opacity
• NEW On-On-Color: The inverse of the On-Color
• Button: The button color that provides a contrast of 3.1:1 against the background (if the colored button does not meet accessibility requirements then light or dark)
• On-Button: The color od the text on the button
• Button-Half: The color of the button with a 50% transparency
• NEW Border: This is the on color lightened up .4 opacity that has a contrast of 3.1:1 to the background color
• NEW calculation process - Hotlink: By default this is the same and the button color, we will check it brighter versions of the hotlink (25%, 50% and 75% brighter) color work, if not we revert to the on-color.
• NEW Elevations Colors (0-9) - lighter shades of the color in dark mode only - in light mode all elevations are the same as the background color
• NEW Elevations Borders (0-9) - Only a boarder for elevation-0 in dark mode.
• Hotlink Underline or not for default state and hover/focus/active states
• NEW Success/Warning/Danger/Info coloring
• NEW For each Theme Element - we determine the coloring for Icon, Colored Text and Divider

BORDER CALCULATIONS: The following calculation will return a the color closest to the contrast requirement:

• For example if you want a quiet text = getWCAGColor(Color,On-Color,3.1) - it will return a border color that still meets the WCAG 3.1 to 1 contrast agains the background.

  function getWCAGColor(hex,text_color,contrastRequirement) { var percentOpacity = .0; var contrastAmount = 0 while (contrastAmount < contrastRequirement) { percentOpacity = percentOpacity + .01 var newHex = (mixColors(text_color, hex,percentOpacity)).toString(); var newHexArray = hextoRGBArray(newHex); var hexArray = hextoRGBArray(hex) var contrastAmount = contrast(newHexArray, hexArray); } return(newHex) }

QUIET TEXT CALCULATIONS The following calculation will return a text color closest to the contrast requirement

• For example if you want a quiet text = getWCAGColor(Color,On-Color,4.5) - it will return a quiet text color that still meets the WCAG contrast requirement

  function getWCAGText(hex,text_color,contrastRequirement,mode) { var percentOpacity = .7; var contrastAmount = 0 var count = 0 if (mode == 'dark') { // adjust for dark mode /// percentOpacity = .5 } while (contrastAmount < contrastRequirement) { var newHex = (mixColors(text_color, hex,percentOpacity)).toString(); var newHexArray = hextoRGBArray(newHex); var hexArray = hextoRGBArray(hex) var contrastAmount = contrast(newHexArray, hexArray); percentOpacity = percentOpacity + .01 count = count + 1 if (count > 20) { break; } } return(newHex) }

HOTLINK CALCULATION function getHotlink(hex,hotlink,contrastRequirement) { var hotlinkMix = 0; var contrastAmount = 0 while (contrastAmount < contrastRequirement) { if (hotlinkMix > .75) { return('onColor') } var newHotlink = (chroma(hotlink).brighten(hotlinkMix)).toString() var hotlinkArray = hextoRGBArray(newHotlink); var hexArray = hextoRGBArray(hex) var contrastAmount = contrast(hexArray, hotlinkArray); hotlinkMix = hotlinkMix + .25 } return(newHotlink) }

NOTE: You still need to calculate if it should be underlined or not by checking if the returned color has a contrast to the standard on-color or 3.1:1 or higher.

ELEVATIONS & ELEVATION BORDERS: All calculations are done in figma or css

SUCCESS/WARNING/DANGER/INFO For the lightest 2 shades(050 and 100) and darkest two shades of a color (800 and 900) we identify the shade of the state color that appropriate contrast agains the background

• Icon (3.1)
• Colored Text (4.5 for WCAG AA or 7.1 for AAA) For all other shades they are the same as the on-Color

THEME ELEMENTS For the lightest 2 shades(050 and 100) and darkest two shades of a color (800 and 900) we identify the shade of the theme element that appropriate contrast agains the background

• Icon (3.1)
• Colored Text (4.5 for WCAG AA or 7.1 for AAA) For all other shades they are the same as the on-Color