Check WCAG 2.2 color contrast for normal text, large text, and UI components. Enter hex, RGB, or OKLCH, read AA/AAA badges, nudge to the nearest passing color, and share a permalink. Runs entirely in your browser.
Ratios use WCAG 2.x relative luminance — not APCA.
OKLCH uses Ottosson OKLab / CSS Color 4 matrices. Out-of-gamut values are clipped to sRGB (not CSS gamut mapping). Contrast is always computed on the 8-bit sRGB pair.
This checker implements WCAG 2.x relative luminance and contrast (the same definition in WCAG 2.0, 2.1, and 2.2). It does not use APCA.
R_sRGB = R_8bit ÷ 255 (same for G and B).R_sRGB ≤ 0.04045, R = R_sRGB ÷ 12.92. Otherwise R = ((R_sRGB + 0.055) ÷ 1.055) ^ 2.4.Y = 0.2126R + 0.7152G + 0.0722B.(L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance. Displayed to two decimals; badges use the unrounded value.Thresholds shown:
APCA not included. APCA is a candidate contrast model discussed for WCAG 3. It is not a WCAG 2 success criterion. This page never reports an APCA value, so a WCAG 2 audit cannot be confused with an experimental WCAG 3 estimate.
WCAG 2.x relative luminance linearizes each sRGB channel: if the 0–1 value is at most 0.04045, divide by 12.92; otherwise raise ((c + 0.055) / 1.055) to the power 2.4. Luminance Y is 0.2126R + 0.7152G + 0.0722B. Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminances. White on black is 21:1.
For WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced): normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (at least 18pt, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphical objects that convey meaning need 3:1 against adjacent colors (SC 1.4.11).
WCAG 2 defines large text as at least 18 point (typically 24px at 96dpi) or at least 14 point bold (typically 18.67px bold). Large text may use the 3:1 AA / 4.5:1 AAA thresholds. Body copy, captions, and most UI labels are normal text and still need 4.5:1 for AA.
Not always. WCAG 2.2 SC 1.4.11 Non-text Contrast requires 3:1 for user interface components and graphical objects that convey information, measured against adjacent colors. Disabled controls are exempt. Text inside a button is still text contrast (4.5:1 AA unless it is large text).
No. Foreground, background, OKLCH, and permalink hashes are processed only in this browser tab. Nothing is posted to a UtilForge server. The shareable link encodes colors in the URL hash, which stays on the client unless you send the URL to someone else.
The tool keeps hue and saturation (HSL) and nudges lightness of the foreground or the background until the pair meets AA normal (4.5:1) or AAA normal (7:1) if that toggle is on. It tests the actual 8-bit sRGB result, not a rounded display value. If the fixed color is a mid-gray, AAA 7:1 may be impossible by changing only one side — the panel says so instead of inventing a hue shift.
OKLCH uses Björn Ottosson OKLab matrices, the same transform CSS Color Level 4 documents. Out-of-gamut OKLCH values are clipped channel-by-channel into sRGB, which is not CSS gamut mapping. Treat OKLCH as a convenient input space; WCAG contrast is always computed on the resulting 8-bit sRGB pair.
No. This checker implements WCAG 2.x relative luminance only. APCA (the candidate contrast method discussed for WCAG 3) is a different model and is not a WCAG 2 success criterion. This tool does not include an APCA preview so it cannot be mistaken for an official WCAG 2 result.