This is documentation for the next version of Grafana. For the latest stable release, go to the latest version.

API Reference@grafana/datagetContrastRatio

colorManipulator.getContrastRatio() function

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

colorManipulator.getContrastRatio() function

Calculates the contrast ratio between two colors.

Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

Signature

export declare function getContrastRatio(foreground: string, background: string, canvas?: string): number;

Import

import { colorManipulator } from '@grafana/data';
const { getContrastRatio } = colorManipulator;

Parameters

Parameter Type Description
foreground string CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
background string CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
canvas string A CSS color that alpha based backgrounds blends into

Returns:

number

A contrast ratio value in the range 0 - 21.