Home Tools Product designColor contrast checker

Color contrast checker for WCAG 2.2 and APCA

Enter a text and a background color in HEX, RGB or HSL. You get the WCAG 2.2 contrast ratio with pass or fail for AA, AAA, large text and interface components, the APCA lightness contrast from the WCAG 3 draft, a live preview of text, buttons and a tooltip, and the closest color that passes if yours does not.

● Free, no sign-upUpdated: September 16, 2026

—

WCAG ratio—

APCA Lc—

Luminance—

Large heading, 24px

Body text at 16px. Read this paragraph at arm’s length on a phone outdoors — if it strains, so will your users.

Primary buttonSecondaryText link

Input border

Tooltip: click “New project” to start.

Small print, 13px: captions and hints are where contrast fails most often.

Results

Formula. Ratio = (L_lighter + 0.05) / (L_darker + 0.05), where L = 0.2126·R + 0.7152·G + 0.0722·B of linearized sRGB. The ratio is never rounded up: 4.48:1 fails 4.5:1.

Everything is calculated in your browser — nothing you enter is sent anywhere.

How to use it

Enter two colorsType or paste the text and background colors in any CSS format, or pick them with the color picker. Swap them to check light text on a dark background.
Read the resultsThe contrast ratio is checked against every WCAG 2.2 threshold: normal and large text at AA and AAA, and 3:1 for UI components. APCA Lc is shown alongside as a second opinion.
Look at the previewText, a button, a link, an input border and a tooltip are drawn with your colors — the combinations that most often fail in real interfaces.
Take the nearest passing colorChoose the target and whether to change the text or the background. The tool keeps the hue and moves lightness until the pair passes, then you can apply or copy the HEX.

How WCAG contrast ratio is calculated

WCAG 2.x compares the relative luminance of two colors — how bright each looks to the eye on a scale from 0 (black) to 1 (white). Each sRGB channel is first converted from its 0–255 value to linear light, then the channels are weighted by how sensitive the eye is to them. Green contributes most, blue least:

c = channel / 255 c_lin = c / 12.92 if c ≤ 0.04045 c_lin = ((c + 0.055) / 1.055) ^ 2.4 otherwise L = 0.2126 · R_lin + 0.7152 · G_lin + 0.0722 · B_lin contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)

The result runs from 1:1 (identical colors) to 21:1 (black on white). The 0.05 term models ambient light reflecting off the screen, so very dark pairs never reach an infinite ratio.

Worked example. Grey #777777 on white: 119 / 255 = 0.4667, linearized to 0.1845, so L = 0.1845. White has L = 1. Ratio = 1.05 / 0.2345 = 4.48:1. That fails AA for normal text, because 4.48 is below 4.5 and WCAG does not allow rounding. The lightest grey that passes on white is #767676 at 4.54:1.

WCAG 2.2 thresholds

1.4.3 Contrast (Minimum), level AA: 4.5:1 for normal text, 3:1 for large text.
1.4.6 Contrast (Enhanced), level AAA: 7:1 for normal text, 4.5:1 for large text.
1.4.11 Non-text Contrast, level AA: 3:1 for the visual parts needed to identify UI components and their states — input borders, focus rings, checkbox outlines, icons that carry meaning, chart lines.

Large text means at least 18 points (24 CSS pixels) at regular weight, or 14 points (about 18.66px) bold. Logos, purely decorative text and disabled controls are exempt. The thresholds did not change between WCAG 2.0, 2.1 and 2.2; the European standard EN 301 549 and Section 508 in the US reference the same AA level.

APCA: the contrast method proposed for WCAG 3

The WCAG 2 formula is simple but has known weak spots. It treats a pair as equally readable whichever color is the text, it overstates contrast for dark color pairs, and it ignores font size and weight. The Accessible Perceptual Contrast Algorithm (APCA), developed by Andrew Somers for the W3C Silver task force, models lightness perception more closely and returns a lightness contrast value, Lc, from about −108 to +106.

Y = 0.2126729 · (R/255)^2.4 + 0.7151522 · (G/255)^2.4 + 0.0721750 · (B/255)^2.4 dark text on light: Lc = ((Y_bg^0.56 − Y_text^0.57) · 1.14 − 0.027) · 100 light text on dark: Lc = ((Y_bg^0.65 − Y_text^0.62) · 1.14 + 0.027) · 100 (Y below 0.022 is soft-clamped; |result| under 0.1 counts as zero)

The sign shows polarity: positive for dark text on a light background, negative for light text on dark. The same grey #888 gives Lc 63.1 as text on white but Lc −68.5 as a white label on #888 — APCA says the white label reads better, which WCAG 2 cannot express because it gives both 3.54:1.

Rough guide to Lc levels in the simplified "Bronze" mode: 90 preferred for body text, 75 minimum for body text, 60 for other content text, 45 for large headings, 30 for placeholders and non-text elements, 15 only for dividers.

Important: APCA is part of the WCAG 3 working draft, which is not a finished standard, and its thresholds may change. Legal and procurement requirements today refer to WCAG 2.x. Use the WCAG 2.2 ratio to decide pass or fail, and APCA to choose between two passing options or to catch dark-mode pairs that WCAG 2 lets through.

How to fix low contrast without losing your brand color

The usual fix is to change lightness, not hue. The suggestions above work in the OKLCH color space: they keep hue and chroma, move perceptual lightness step by step and gamut-map the result back into sRGB, then check that the rounded HEX value still passes. The option closer to your original lightness is marked as closest.

Keep the brand color for large areas and buttons, and use a darker shade of the same hue for text and links. A brand red that gives 3.9:1 on white can still be a button background with white bold text if that pair reaches the large text threshold — but check it.
Check every state: hover, focus, disabled, visited, error. Placeholders and hint text are the most common failures in forms.
Check both themes. A palette that passes in light mode often fails in dark mode, where APCA is especially useful.
Text over images and gradients must pass at its lightest point. Add a solid or semi-opaque backdrop behind the text rather than relying on a shadow.
Tooltips and onboarding hints are often styled in a light brand tint with grey text. They are read quickly and on the move, so aim for 4.5:1 or higher even for short copy.

To build a full scale of tints and shades with known contrast for every step, use the accessible palette generator.

Sources

W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — success criteria 1.4.3, 1.4.6, 1.4.11; definitions of relative luminance and contrast ratio.
W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — rationale for 4.5:1 and 3:1, definition of large text.
Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 version 0.0.98G-4g, Myndex Research — constants and reference values used by this tool.
W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — status of the visual contrast method.
Ottosson B. A perceptual color space for image processing, 2020 — OKLab, used for the lightness adjustments.

FAQ

What contrast ratio does WCAG require?

For level AA, WCAG 2.2 requires at least 4.5:1 between normal text and its background, 3:1 for large text (24px, or about 18.66px bold), and 3:1 for UI components and meaningful graphics. Level AAA raises text requirements to 7:1 and 4.5:1.

Is 4.48:1 close enough to pass 4.5:1?

No. WCAG thresholds are exact and the ratio must not be rounded up. #777777 on white is 4.48:1 and fails AA for normal text; #767676 is 4.54:1 and passes.

What is APCA and should I use it instead of WCAG 2?

APCA is the perceptual contrast method in the WCAG 3 working draft. It accounts for text polarity and gives an Lc value that depends on font size and weight. It is not yet a standard, so compliance is still measured with the WCAG 2.2 ratio; APCA is a useful second check, especially for dark themes.

Does contrast matter for icons, borders and focus indicators?

Yes. Success criterion 1.4.11 requires 3:1 against adjacent colors for the parts of a component needed to identify it or its state — input borders, checkbox outlines, meaningful icons and focus rings. Pure decoration and disabled controls are exempt.

How is contrast calculated for semi-transparent text?

The text color is first blended with the background using its alpha value, and the resulting solid color is compared. This checker does that automatically; the blended HEX is shown in the result.

Do disabled buttons and placeholders need to meet contrast requirements?

Disabled (inactive) components are exempt under WCAG 2.2. Placeholder text is not: if it conveys information, it must meet 4.5:1. Many forms fail here, so it is safer to put hints in a visible label or helper text.

How do I find a color that passes without changing my brand?

Keep the hue and change only lightness. The suggestions in this tool do exactly that in the OKLCH color space and show the nearest darker and lighter options for the text or the background, with the resulting ratio.