# Color Contrast Checker

URL: https://phishdestroy.io/developer-tools/color-contrast-checker
Category: General dev
Where it runs: Runs locally (nothing you enter is uploaded)

Check whether text in one color is readable on another: the tool computes the WCAG 2 contrast ratio, previews the pair and tests it against the AA and AAA limits for normal text.

## Example input

Mid gray on the dark default

```
#808080
```

Against the default background #0a0f14 the ratio is 4.87:1, so AA passes and AAA fails.

## FAQ

### Which WCAG thresholds does it check?

Only the limits for normal text: 4.5:1 for AA and 7:1 for AAA (success criteria 1.4.3 and 1.4.6). Large text (18 pt, or 14 pt bold) needs 3:1 for AA and 4.5:1 for AAA, and user interface components need 3:1, so read those off the ratio yourself.

### Which color formats can I enter?

Six-digit hex with a leading # (#1a2b3c), or use the color pickers. Three-digit hex and color names give NaN, a six-digit value without # gives a wrong ratio, and transparency is not supported.

### Is anything sent to a server?

No. The ratio is calculated in your browser from the two values, and nothing is uploaded.

## Related tools

- [Color Converter](https://phishdestroy.io/developer-tools/color-converter)
- [Color Palette Generator](https://phishdestroy.io/developer-tools/color-palette-generator)
- [CSS Gradient Builder](https://phishdestroy.io/developer-tools/css-gradient-builder)
- [CSS Box-Shadow Builder](https://phishdestroy.io/developer-tools/box-shadow-builder)

All tools: https://phishdestroy.io/developer-tools