# Contrast


Available without React:

```ts
import { contrastReport, readableTextColor } from "chroma-panel/contrast";
```

## Picking a text colour

```ts
readableTextColor("#001f3f"); // '#ffffff'
```

<Signature name="readableTextColor" />

## Checking a pair

<SignatureList names="contrastReport, contrastRatio, meetsContrast, meetsNonTextContrast, wcagLevel" />

## The underlying measures

<SignatureList names="apcaContrast, relativeLuminance" />

<Callout variant="note" title="Why APCA for text colour">
  `readableTextColor` uses APCA rather than plain luminance. It picks white over
  mid-blues, where the older method wrongly picks black.
</Callout>