# Color Contrast Checker

> Free WCAG color contrast checker. Test text and background colors for AA and AAA accessibility compliance with a live contrast ratio and preview — hex or RGB.

Check the contrast ratio between a text and background color against WCAG AA and AAA standards, with a live preview and hex or RGB input.

- **Live tool:** https://www.toolnova.org/dev-tools/color-contrast-checker
- **Category:** Developer Tools (https://www.toolnova.org/dev-tools)
- **Price:** Free
- **Requirements:** Runs in a modern web browser · No signup · No install

## What this tool does

- WCAG AA & AAA pass/fail results
- Live contrast ratio calculation
- Hex and RGB input with color pickers
- Live text preview on your colors
- Normal and large text thresholds
- Runs locally in your browser

## How to use Color Contrast Checker

1. **Choose the text color** — Pick or type the foreground color.
2. **Choose the background** — Pick or type the background color.
3. **Read the ratio** — See the contrast ratio and AA/AAA results.
4. **Adjust** — Tweak the colors until they pass.

## Common use cases

- Verify UI text meets WCAG accessibility
- Check button and link contrast
- Audit a brand color palette
- Fix low-contrast marketing copy

## About

### Make your text readable for everyone

Low-contrast text is one of the most common accessibility failures. This checker computes the exact contrast ratio between your text and background colors using the official WCAG relative-luminance formula, then tells you whether it passes AA (4.5:1 for normal text, 3:1 for large) and the stricter AAA (7:1 and 4.5:1). A live preview shows real text on your chosen colors.

### Enter colors any way you like

Use the color pickers or type hex codes and rgb() values directly — the tool parses both. As you adjust either color, the ratio and pass/fail badges update instantly, so you can nudge a shade until it complies. Everything runs locally, making it a fast companion while designing UI, themes and marketing pages.

## FAQ

### What contrast ratio do I need to pass WCAG?

For AA, normal text needs 4.5:1 and large text 3:1. For the stricter AAA, normal text needs 7:1 and large text 4.5:1. Large text is roughly 18pt, or 14pt bold.

### How is the contrast ratio calculated?

It uses the WCAG relative-luminance formula for both colors, then divides the lighter luminance (plus 0.05) by the darker (plus 0.05), giving a value from 1:1 to 21:1.

### Can I enter RGB as well as hex?

Yes — type hex codes like #1e293b or rgb(30, 41, 59), or use the color pickers. Both formats are parsed instantly.

### Is it free?

Yes, completely free with no signup, running entirely in your browser.

---

ToolNova — free, privacy-first browser tools. Most tools process data locally on your device. See https://www.toolnova.org/llms.txt for the full directory.