WCAG Contrast Checker

Check colour contrast against WCAG AA and AAA thresholds for accessible text.

To check colour contrast, pick a text colour and a background colour. The ratio is calculated using the WCAG relative luminance formula and checked against AA and AAA thresholds, adjusted automatically for large or bold text.

Runs in your browser

Privacy: Runs entirely in your browser — nothing is uploaded
Cost: Free, unlimited, no sign-up

Frequently asked questions

What contrast ratio do I actually need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Most legal accessibility requirements reference AA, so treat 4.5:1 as the floor for body copy.

Does contrast apply to icons and borders?

Yes. WCAG 2.1 added a 3:1 requirement for non-text elements that convey meaning — form field borders, focus indicators and icon buttons all need to meet it.

How to use the wcag contrast checker

1Pick the text colour.
2Pick the background colour.
3Set the font size.
4Turn "Bold text" on or off as needed.
5The result appears immediately — copy or download it.

Sources & specifications

Embed this tool

Put the working wcag contrast checker on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Colour Blindness SimulatorSee how a colour appears to people with protanopia, deuteranopia and tritanopia.Palette Accessibility GraderGrade every colour in a palette against one or more backgrounds for WCAG contrast.CSS Named Colours ReferenceEvery CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.AI Alt Text GeneratorDescribe an image with a captioning model running in your browser — a first draft for the alt attribute you then edit.Alt Text CheckerFind images with missing, empty, filename-based or overlong alternative text.ARIA Roles ReferenceSearch ARIA roles with their required attributes, native HTML equivalents and gotchas.

Last updated 1 Aug 2026

More color tools