# Contrast & Colour-Blindness Checker for Palettes

> Check every text and surface pair in a palette against WCAG, get a passing shade for each failure, and see which colours merge for colour-blind users.

- Source: https://flashdsm.com/tools/contrast-checker
- Site: Flash DSM (https://flashdsm.com)

---

## What the ratios mean

- **AA (4.5:1)**: Body text. The legal floor in most accessibility laws, and what this checker counts as a pass.
- **AA large (3:1)**: Text at 24px, or 19px bold, and up. Also the floor for icons and the borders of inputs.
- **AAA (7:1)**: Long reading and small type. Worth hitting for body text on the main surface.

## Questions

### WCAG 2 or APCA?

WCAG 2 is the standard accessibility law points at today, and what Flash measures everywhere else, so it is the default here. APCA models how people actually perceive contrast, and treats dark text on light differently from light on dark, but it is still a draft. Check both: a pair that clears both is safe.

### How is the suggested shade chosen?

It keeps the text colour's hue and saturation and moves only its lightness until the pair reaches 4.5:1. If no lightness gets there, it falls back to black or white.

### Which colour-vision differences does it check?

It draws the palette as protanopia, deuteranopia and tritanopia see it. Pairs that merge are reported for the red-green two, which together affect about one man in twelve. A pair that is already close for everyone is left alone: that is a design choice, not a finding.

### Is my palette sent anywhere?

No. Everything runs in your browser. The palette is kept in the page address after the #, which a browser never sends to a server, so a copied link shares it without it passing through us.