# Contrast checker

> Check the contrast ratio of a text and background color against WCAG AA and AAA, for normal and large text, with a live preview. Free, in your browser.

Canonical: https://toolspace.tech/color-contrast-checker/
Last updated: 2026-10-25

Check a text color against its background with the WCAG 2 contrast ratio: AA and AAA for normal and large text, and 3:1 for interface parts. If a pair fails, get the closest text color that passes.

This is an interactive tool that runs in the browser: [open the Contrast checker](https://toolspace.tech/color-contrast-checker/) to use it. Nothing typed into it is uploaded.

## Worked example

Mid gray text on white, a common choice for secondary text.

**colors**

```
Text: #777777
Background: #ffffff
```

**result**

```
Ratio 4.47:1
AA normal text: fail
AA large text: pass
AAA normal text: fail
AAA large text: fail
UI components: pass
Nearest AA text color: #767676
```

The exact ratio is 4.478:1. One small step darker reaches 4.5:1.

## Common mistakes

### Rounding up to pass

4.48 is not 4.5. Thresholds are exact, so a ratio that only reaches 4.5 after rounding still fails.

### Checking only body text

Placeholder text, disabled-looking labels and links need contrast too. Placeholders are often the worst offenders.

### Ignoring hover and focus states

A button that passes at rest can fail when hovered. Check each state’s colors.

### Testing text on a photo with one color

Text over an image meets many backgrounds. Check against the lightest and darkest parts, or add an overlay.

## How it works

1. **Enter two colors:** Pick or type the text and background colors in hex, rgb() or hsl(). The swap button flips them.
2. **Read the result:** The ratio is shown to two decimals, rounded down, with pass or fail for each WCAG level and a live preview.
3. **Fix a failing pair:** When text fails, the suggestion keeps its hue and changes only lightness, as little as possible, until it passes.

## Questions

### What contrast ratio do I need?

WCAG 2 level AA asks for 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other parts of the interface need 3:1 against what is next to them.

### What counts as large text?

At least 18 point (24 CSS pixels) regular, or 14 point (about 18.7 CSS pixels) bold.

### Why does #777 on white fail when it rounds to 4.5?

Its ratio is about 4.478:1, and WCAG compares the exact ratio with the threshold, so anything below 4.5 fails. This page rounds down for that reason; #767676 is the lightest gray that passes on white.

### How are transparent colors handled?

A translucent text color is painted over the background first, and a translucent background over white, and the ratio is measured on the result.

### Is this the APCA contrast from WCAG 3?

No. This is the WCAG 2.x formula, the one current accessibility guidelines refer to. APCA is still a draft and uses different numbers.

## Related

- [Color converter](https://toolspace.tech/color-converter/)
- [Color palette generator](https://toolspace.tech/color-palette-generator/)
- [CSS gradient](https://toolspace.tech/css-gradient-generator/)