Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/databreadcrumb arrow getContrastRatio
Enterprise Open source

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

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

Import

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

Parameters

ParameterTypeDescription
foregroundstringCSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
backgroundstringCSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
canvasstringA CSS color that alpha based backgrounds blends into

Returns:

number

A contrast ratio value in the range 0 - 21.