# Color contrast checker: run it free, or from your agent

WCAG contrast ratio of two colours with AA and AAA results, a live preview and the nearest passing text colour.

## Prompt

Use looot to audit the colours of a landing page. 1. Set up https://looot.ai/skill.md. 2. Search the catalog for an endpoint that returns a page's HTML or a screenshot and check its price before you call. 3. Fetch [URL]. 4. List the main text and background colour pairs. 5. Work out the WCAG contrast ratio of each and flag every pair under 4.5 to 1 for body text.

## What it needs

A text colour and a background colour, as hex or rgb

## What comes back

- contrast ratio
- AA and AAA pass or fail for normal and large text
- UI component check
- nearest passing text colour

## Endpoints and providers

None. The tool on the web page runs in the browser and calls no endpoint.

## What it costs

Nothing. The tool on the web page runs in the visitor's browser: no account, no API call and no limit per hour. The prompt above runs the same job from your own looot account with current data, billed per call.

## Pass an audit

Check every text and background pair before an accessibility review.

## Pick brand colours

Find the darkest shade of a brand colour that still reads on white.

## Check dark mode

Test grey text on a dark surface, where contrast often drops.

## Fix a failing pair

Use the suggested colour to pass AA with the smallest change.

## What contrast ratio does WCAG require?

For AA, 4.5 to 1 for normal text and 3 to 1 for large text and for UI parts such as input borders and icons. For AAA, 7 to 1 for normal text and 4.5 to 1 for large text.

## What counts as large text?

At least 18 point, which is 24 CSS pixels, or 14 point bold, which is about 18.66 pixels. Most body copy is normal text.

## How is the contrast ratio calculated?

Each colour's relative luminance is computed from its sRGB channels. The ratio is (lighter plus 0.05) divided by (darker plus 0.05). It runs from 1 to 1 for the same colour to 21 to 1 for black on white.

## Why does 4.49 fail when it rounds to 4.5?

WCAG compares the exact ratio with the threshold, without rounding. The page cuts the ratio to two decimals instead of rounding, so a failing pair never shows as 4.50.

## How does the suggested colour work?

The page mixes your text colour toward black or white, whichever adds contrast, in 1 percent steps, and stops at the first mix that passes. That keeps the hue close to yours.

## Does it handle transparent colours?

No. The alpha digits of an 8 digit hex code are ignored. Blend the colour with its background first and check the result.

## Does it check WCAG 3 or APCA?

No. It uses the WCAG 2 formula, the one in WCAG 2.2 and in most accessibility laws today.

## Related tools

- /free-tools/meta-tag-generator
- /free-tools/qr-code-generator
- /free-tools/case-converter

## Last reviewed

2026-10-14.