What contrast ratio do I need for normal text?

4.5:1 for WCAG AA and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA).

Does this handle transparency or gradients?

No—it checks solid hex colors. For layered or gradient backgrounds, sample the actual rendered color behind the text.

What counts as large text?

Roughly 24px and up, or 18.66px and up if bold. Large text has a lower contrast requirement than body copy.

Is wcag contrast checker free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Utility · CSS unit tool

WCAG contrast checker

Enter two hex colors to compute their WCAG 2.x contrast ratio (a value from 1:1 to 21:1) using relative luminance. The checker flags whether the pair passes AA and AAA for normal and large text.

Foreground (#hex)

Background (#hex)

Result

14.48 : 1

✓ Passes WCAG AA

✓ AA

normal ≥4.5:1

✓ AAA

normal ≥7:1

✓ AA

large ≥3:1

Keyboard tip: press Tab or Shift+Tab to switch fields.

How contrast is calculated

Each color is converted to relative luminance with the WCAG formula (linearizing the sRGB channels, then weighting 0.2126 R + 0.7152 G + 0.0722 B). The ratio is (lighter + 0.05) ÷ (darker + 0.05).

The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). Higher is more legible.

WCAG thresholds

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (≥24px, or ≥18.66px bold) needs 3:1 for AA and 4.5:1 for AAA.

Non-text UI such as icons, form borders, and focus indicators must meet 3:1 against adjacent colors under WCAG 1.4.11.

What this tool does not cover

It evaluates solid hex pairs only. Text over gradients, images, or semi-transparent layers needs manual sampling of the actual rendered pixels behind the text.

Passing contrast is necessary but not sufficient for accessibility—also check focus states, font weight, and reading order.

Copy-ready examples

Readable body pair

css

/* #1F2937 on #FFFFFF → ~13.6:1 (AAA) */
color: #1F2937; background: #FFFFFF;

Frequently asked questions

What contrast ratio do I need for normal text?: 4.5:1 for WCAG AA and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA).
Does this handle transparency or gradients?: No—it checks solid hex colors. For layered or gradient backgrounds, sample the actual rendered color behind the text.
What counts as large text?: Roughly 24px and up, or 18.66px and up if bold. Large text has a lower contrast requirement than body copy.
Is wcag contrast checker free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.