@ucam/design-system
Version:
University of Cambridge Design System
24 lines (23 loc) • 1.58 kB
TypeScript
/**
* Calculates the rgba value that when overlaid on the "backgroundColor" forms the supplied "color".
* Note: There are many rgba values that may work, it picks the value with the lowest alpha (most transparent)
*
* This function only takes rgb strings eg: `"rgb(255,255,255)"`. Conversion from hex is possible using:
* hexToRgb from @material-ui/core.
*
* Justification: We're often given subtle, non-transparent colours by the UX team for use on borders and highlights.
* These colours provide adequate contrast against the default background colour, but do not guarantee to contrast
* sufficiently against other colours. A potential improvement (without changing the default case) is to use
* semi-transparent colours for the foreground colour. There is still no contrast guarantee, but it does produce nicer
* results when used with most unexpected background colours.
*
* For example:
* 1. A grey border colour on a white background has an adequate contrast ratio.
* 2. The same grey border colour on a grey background has a poor contrast ratio.
* 3. A black (but semi-transparent) border colour on a white background appears grey, an adequate contrast.
* 4. A black (but semi-transparent) border colour on a grey background appears **dark** grey, an adequate contrast.
*
* Both 1. and 3. produce the same border colour, but 4. produces a better result than 2.
*/
declare const equivalentRGBA: (colorRGB: string, backgroundColorRGB: string, preferredAlpha?: number, precision?: number) => string;
export default equivalentRGBA;