# Contrast Checker

> Check text/background color pairs against WCAG AA and AAA contrast requirements.

URL: https://uttir.com/contrast-checker
Categories: color-tools
Privacy: Contrast calculations run locally in your browser.

## About

Low-contrast text is one of the most common accessibility failures. This checker computes the WCAG contrast ratio between any two colors and tells you whether the pair passes AA and AAA for normal and large text.

A live preview shows your exact combination, so you can judge readability with your own eyes before shipping a palette.

## How to use

1. **Pick text and background colors** — Use the two color pickers or type HEX values.
2. **Read the ratio and badges** — Pass/fail is shown for AA and AAA at both text sizes.

## Examples

### Maximum contrast

Black on white is the reference maximum.

Input:

```
#000000 on #ffffff
```

Output:

```
21.00 : 1 — passes AA and AAA at all sizes
```

## FAQ

### What ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises these to 7:1 and 4.5:1.

### What counts as large text?

Roughly 18pt (24px) regular or 14pt (18.5px) bold. The large-text thresholds are lower because bigger glyphs stay legible at lower contrast.

### What is WCAG AA?

A Web Content Accessibility Guidelines standard. AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 and 4.5:1. The tool shows which level your colors pass.

### What WCAG level does a 4.5:1 ratio meet?

A 4.5:1 contrast ratio is the minimum for AA compliance on normal text. AAA requires 7:1 for normal text (4.5:1 for large text). The tool shows the pass/fail verdict for each level.

## Related tools

- [Color Picker](https://uttir.com/color-picker) — Pick any color and copy it as HEX, RGB, or HSL.
- [HEX to RGB](https://uttir.com/hex-to-rgb) — Convert any HEX color code to its RGB and HSL equivalents.

---

For the full HTML page with the live tool, visit https://uttir.com/contrast-checker.
This file is the markdown rendering at https://uttir.com/contrast-checker.md. See https://uttir.com/llms.txt for a site-wide summary.