What contrast ratio does WCAG require?

4.5:1 for normal body text and 3:1 for large text — 18pt, or 14pt bold and above — at level AA. AAA raises those to 7:1 and 4.5:1. User-interface components and graphics need 3:1.

Why does the suggested colour sometimes go lighter instead of darker?

The checker looks for the smallest change in either direction. A mid-tone on a dark background is often closer to passing by getting lighter; searching only downwards would tell you to make it nearly black.

Is the ratio measured on the hex I copy?

Yes. The search measures the 8-bit value, not a floating-point one, so the hex you are handed passes the check it was found by.

Color Lab

Contrast checker

WCAG 2.1, at the size and weight the text is actually set in.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Heading at 30px

#F6F9FC on #0F141D

Text size16px

17.45

contrast ratio

This text (body)needs 4.5

AA body text4.5

AAA body text7

AA large text3

UI components3

Foreground

Background

A WCAG contrast checker that tells you what to change

Pick a foreground and a background and read the WCAG 2.1 contrast ratio, with pass and fail for body text, large text and user-interface components. Set the text size and weight you are actually using, and the checker holds it to the rule that applies — 4.5:1 for body text, 3:1 once it counts as large.

When a pair fails, the checker finds the nearest colour that passes: the smallest move along OKLCH lightness that reaches the target, with the hue held exactly, so the suggestion is still recognisably your colour rather than a different brand. It searches both directions, because sometimes the smaller move is lighter.

How to use it

Enter the foreground and background colours, or swap them.
Set the text size and weight to match the design.
If it fails, apply the suggested colour — or read the ratio it needs and adjust by hand.

Questions

What contrast ratio does WCAG require?: 4.5:1 for normal body text and 3:1 for large text — 18pt, or 14pt bold and above — at level AA. AAA raises those to 7:1 and 4.5:1. User-interface components and graphics need 3:1.
Why does the suggested colour sometimes go lighter instead of darker?: The checker looks for the smallest change in either direction. A mid-tone on a dark background is often closer to passing by getting lighter; searching only downwards would tell you to make it nearly black.
Is the ratio measured on the hex I copy?: Yes. The search measures the 8-bit value, not a floating-point one, so the hex you are handed passes the check it was found by.

More free colour tools

All of Color Lab runs in your browser. Nothing is uploaded and no account is needed.