What ratio does WCAG 2.2 need?

Normal text: 4.5:1 for AA, 7:1 for AAA. Large text (18pt or 14pt bold): 3:1 AA, 4.5:1 AAA. UI components and graphics: 3:1 (1.4.11).

Does this use APCA or WCAG 2 contrast?

Relative luminance from WCAG 2.2 (sRGB). It is not APCA / WCAG 3.

Yes: #abc, #aabbcc, #rrggbbaa (alpha ignored for the ratio), rgb()/hsl() including percentages. Named CSS colors are not resolved.

Runs in your browser · Last updated 7 September 2026

Free Color Contrast Checker — WCAG 2.2

Free color contrast checker. WCAG 2.2 AA/AAA and 3:1 non-text contrast from two hex or rgb colors. Browser tool — nothing is uploaded.

Foreground (text)Background

Large sample (24px / bold)

Normal body text for WCAG 2.2 1.4.3 and 1.4.6.

Contrast ratio

15.20 : 1

AA normal

Pass 4.5:1

AAA normal

Pass 7:1

AA normal text (4.5:1): Pass
AA large text (3:1): Pass
AAA normal (7:1): Pass
AAA large (4.5:1): Pass
UI / non-text 1.4.11 (3:1): Pass

How to use this tool

Paste a foreground and background color.
Read the ratio and AA / AAA / non-text passes.
Tweak the sample until normal text passes 4.5:1.

Worked example

Black (#000) on white is 21:1 — AAA. Light gray #ccc on white fails AA. Free Tab Tools paper (#f4efe6) with near-black #1a1a1a is the default on this page; it should pass AA for body text. Convert hex ↔ rgb ↔ hsl on the hex RGB converter.

Frequently asked questions

What ratio does WCAG 2.2 need?: Normal text: 4.5:1 for AA, 7:1 for AAA. Large text (18pt or 14pt bold): 3:1 AA, 4.5:1 AAA. UI components and graphics: 3:1 (1.4.11).
Does this use APCA or WCAG 2 contrast?: Relative luminance from WCAG 2.2 (sRGB). It is not APCA / WCAG 3.
Hex and rgb?: Yes: #abc, #aabbcc, #rrggbbaa (alpha ignored for the ratio), rgb()/hsl() including percentages. Named CSS colors are not resolved.
Uploaded?: No. Colors stay in this tab.