# Contrast Checker

> Free WCAG contrast checker: enter text and background colors to get the contrast ratio and AA/AAA pass or fail for normal and large text.

Enter a text color and a background color to get the WCAG contrast ratio and instant AA/AAA pass or fail for normal and large text, with a live preview.

*Interactive tool: enter your values at https://toollantern.win/contrast-checker/ and results update instantly in your browser.*

## What this tool does

The checker computes the WCAG contrast ratio between a text color and a background color, then grades the pair against the four WCAG 2.x thresholds: AA and AAA levels, each for normal text and large text. A live preview shows your colors as real text at both sizes.

## The luminance formula

First, each color's **relative luminance** is computed: every RGB channel is linearized (values at or below 0.03928 are divided by 12.92; larger values use ((v + 0.055) / 1.055) ^ 2.4), then combined as L = 0.2126 x R + 0.7152 x G + 0.0722 x B. The coefficients reflect that human eyes are most sensitive to green light.

The **contrast ratio** is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. It ranges from 1:1 (identical colors) to 21:1 (black on white).

## Worked example

White text **#FFFFFF** on a blue background **#3B82F6** gives a ratio of about **3.7:1**. That passes AA for large text (needs 3:1) but fails AA for normal text (needs 4.5:1): fine for a headline, not for body copy.

## The four thresholds

- **AA normal text:** 4.5:1, the legal baseline many regulations require.

- **AA large text:** 3:1. Large means at least 18pt, or 14pt bold.

- **AAA normal text:** 7:1, the strictest level.

- **AAA large text:** 4.5:1.

## Limitations

The ratio measures luminance contrast only. It does not account for font rendering, thin strokes, transparency over images, or color-vision differences beyond luminance.

## Frequently asked questions
### What is a good contrast ratio?

Aim for at least 4.5:1 for normal text (WCAG AA), which is the baseline most accessibility laws reference. 7:1 meets the stricter AAA level. For large headlines, 3:1 is enough for AA.

### What counts as large text in WCAG?

Text at least 18pt (24px), or at least 14pt (about 19px) when bold. Everything smaller uses the normal-text thresholds.

### What is the difference between AA and AAA?

AA is the standard compliance level required by most regulations. AAA is stricter and recommended where possible, especially for body text that everyone must read.

### Does the checker work for dark mode?

Yes. Enter the light text color as the text color and the dark surface as the background. The math is direction-independent: swapping the two colors gives the same ratio.

### Why does my brand color fail on white?

Many brand colors are too light to reach 4.5:1 on white. Use the color for large headlines or graphic accents (3:1 is enough there), and pick a darker variant for body text.

---
Interactive version: https://toollantern.win/contrast-checker/