Color Contrast

<sl-color-contrast> | SlColorContrast

Since 2.0

hub24

Reports the colour contrast between two colours

Specify color-1 and color-2 attributes to be compared.

This is generally used to assess accessibility. For the WCAG 2.2 requirements for contrast, click here. For normal sized text, a ratio of 4.5 or greater is required. For large text the value is 3.1.

<sl-color-contrast color-1="#438709" color-2="#BB057C"></sl-color-contrast>

Examples

Number of decimal places

Use dp attribute to control the number of decimal places

<sl-color-contrast color-1="#438709" color-2="#BB057C" dp="2"></sl-color-contrast>

Color formats

The component supports all regular color formats

rbg

<sl-color-contrast color-1="rgb(0, 80, 0)" color-2="rgb(100,200,100)"></sl-color-contrast>

hex (short or long formats)

Using short value:
Using long value:

Using short value: <sl-color-contrast color-1="#444" color-2="#FFF"></sl-color-contrast>

<br>

Using long value:
<sl-color-contrast color-1="#438709" color-2="#BB057C"></sl-color-contrast>

HTML colors

<sl-color-contrast color-1="blue" color-2="red"></sl-color-contrast>

hsl

<sl-color-contrast color-1="hsl(0, 100%, 50%)" color-2="hsl(240, 50%, 10%)"></sl-color-contrast>

Invalid values

If either value is invalid, a dash will be shown.

<sl-color-contrast color-1="Nope" color-2="red"></sl-color-contrast>

This can be overridden using the invalid-string property

<sl-color-contrast color-1="Nope" color-2="red" invalid-string="???"></sl-color-contrast>

Styling

The control inherits the current font style, and displays as inline so that the calling application can control the font style.

<sl-color-contrast
    color-1="blue"
    color-2="red"
    style="font-size: var(--sl-font-size-3x-large); color: var(--sl-color-success-800); font-weight: var(--sl-font-weight-bold);">
</sl-color-contrast>

To suppress the automatic colouring, apply the no-color attribute.

<sl-color-contrast
    color-1="blue"
    color-2="red"
    no-color>
</sl-color-contrast>

Getting calculated value and colour validity

Use the value attribute to get the numeric contrast value.

Use the color1Valid, color2Valid attribute to get the respective color validity.

Use the valid attribute to check if both colours are valid.

Get values

<sl-color-contrast id="color-checker" color-1="blue" color-2="red">
</sl-color-contrast>
<sl-button id="get-values-button">Get values</sl-button>

<script>
document.getElementById("get-values-button").addEventListener('click', () => getValues());

function getValues() {
  const el = document.getElementById("color-checker");
  alert(`Contrast: ${el.value}, color1Valid: ${el.color1Valid}, color2Valid: ${el.color2Valid}, valid: ${el.valid}`);
}
</script>

[component-metadata:sl-color-contrast]

Properties

Name	Description	Type	Default
`color1` `color-1`	First color	`string`	`''`
`color2` `color-2`	Second color	`string`	`'#BB057C'`
`dp`	Number of decimal points in the rendered value	`number`	`1`
`invalidString` `invalid-string`	Value to show if either color is not valid. Defaults to ‘-’	`string`	`'-'`
`noColour` `no-color`	Can suppress automatic colouring using the no-color attribute	`boolean`	`false`
`value`	Gets the contrast value as a number.	`number`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.