AIColors

FREE TOOL · NO SIGNUP

Color Contrast Checker — WCAG 2.2 & APCA

Test any color pair against WCAG 2.2 and APCA in one view. Get live previews at four type sizes, three types of color-blindness simulation, and a fix suggestion that keeps your brand hue.

Live preview

12px · Small body copy — The quick brown fox jumps over the lazy dog.

16px · Body copy — The quick brown fox jumps over the lazy dog.

24px bold · Sub-heading

Headline

WCAG 2.2 contrast

14.06:1
AA · Normal textPass
AA · Large textPass
AAA · Normal textPass
AAA · Large textPass
AA · UI & graphicsPass

APCA (WCAG 3 draft)

98.5Lc
APCA scoreAAA · any size
  • Lc 90+AAA / any size
  • Lc 75+Body text · 14–18px
  • Lc 60+Large or bold body
  • Lc 45+Headings · non-text
  • Lc 30+Minimum visibility

APCA reads text and background differently and accounts for size and weight. Higher Lc = more readable. Do not compare APCA Lc to a WCAG ratio directly.

Color blindness preview

Aa
Typical vision
Aa
Protanopia (red-blind)
Aa
Deuteranopia (green-blind)
Aa
Tritanopia (blue-blind)

Approximation only — useful for catching obvious failures, not a clinical evaluation.

Three steps to a contrast you can trust

1

Pick your two colors

Type a hex, paste it, or use the picker. Three-digit shorthand like #fff works. The preview updates instantly.

2

Read both numbers, not just one

The WCAG 2.2 ratio tells you whether you will pass an audit. The APCA Lc score tells you whether real users will actually read the text. Both matter, for different reasons.

3

Apply the suggested fix or share

If a pair fails AA we suggest the closest color in the same hue that passes — adjusted in OKLCH so your brand identity stays intact. The URL updates as you go, so you can paste it into a design review.

Quick contrast reference

The minimums everyone forgets. Print this section, pin it to your wall, save your next design review.

Use case WCAG AA WCAG AAA APCA (informal)
Body text under 18px (or under 14px bold)4.5:17:1Lc 75
Large text — 18px+ or 14px+ bold3:14.5:1Lc 60
UI controls, form borders, focus rings3:1—Lc 45
Icons that convey meaning3:1—Lc 60
Critical legal text & dense data tables——Lc 90+

How to read the numbers

WCAG 2.2 contrast ratio

WCAG 2.2 measures contrast as a simple ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The ratio does not care which color is text and which is background — only the luminance difference.

The thresholds are blunt: 4.5:1 for body text, 3:1 for large text or non-text UI. They are the legal floor in most jurisdictions (US Section 508, EU EAA, etc.) — but a pair that just barely passes 4.5:1 is often still uncomfortable to read.

APCA Lightness Contrast

APCA is the contrast method built for the WCAG 3 draft. Instead of one ratio, it returns a signed value between roughly -108 and +106 — the magnitude (Lc) tells you how much usable contrast there is, and the sign tells you whether the text is darker or lighter than the background.

APCA accounts for what WCAG 2.2 ignores: font size, font weight, and dark-on-light versus light-on-dark polarity. A 14px regular weight needs Lc 75; a 24px bold heading is comfortable at Lc 60. When APCA disagrees with WCAG, trust your eyes — APCA is usually closer to how the text actually reads.

Our take

WCAG 2.2 ratios pass audits. APCA tells you whether anyone can actually read it.

Most contrast checkers force you to pick a side. We do not, because the two algorithms answer different questions, and you usually need both answers.

Use WCAG 2.2 as your compliance gate. Procurement teams, accessibility audits, and government contracts still reference the 4.5:1 / 3:1 ratios — that is not changing in the next two years. If your color pair fails AA, you have a legal problem before you have a design problem.

Use APCA as your design gate. WCAG 2.2 math is from 2008 and has known blind spots — it overrates dark text on saturated mid-luminance colors, and underrates white-on-dark combinations that read fine in practice. APCA was built to fix exactly those gaps. When WCAG fails but APCA passes Lc 75+, the text probably reads fine in the real world. When WCAG passes but APCA scores below 60, users will squint.

TL;DR

Ship pairs that pass both. When you can only satisfy one, pass WCAG 2.2 first for compliance, then run APCA to predict whether users will complain.

Four contrast traps designers keep stepping into

Patterns we see every week in design reviews. Each one passes some informal check but fails real readers.

The polite gray

#A0A0A0 on #FFFFFF

Light gray on white feels classy in Figma. At 4.5:1 it barely scrapes AA — and on a phone screen at noon, it disappears. Aim for at least 5.5:1 on body text and you will never get an accessibility ticket.

Test this pair →

Brand-on-brand

#7E57C2 on #3949AB

Two saturated brand colors next to each other usually fail both WCAG and APCA. Saturation tricks designers into seeing contrast that is not there — the luminances are too close. Reach for a neutral as one half of the pair.

Test this pair →

White on yellow / amber

#FFFFFF on #FFC107

A classic warning-banner mistake. Pure white on amber feels visible but the ratio is around 1.7:1 — well below the floor for any text. Use dark text on the amber instead, not light.

Test this pair →

Dark-mode medium gray

#9E9E9E on #212121

When designing dark mode, designers reuse their light-mode #9E9E9E and drop it on #212121. WCAG calls it 4.5:1 — pass. APCA drops it under Lc 60 because of the polarity penalty. Push dark-mode body text brighter than your instinct says.

Test this pair →

Frequently asked questions

Is this contrast checker free?
Yes — fully free, no signup, no ads, no upload of your design files. Everything runs locally in your browser.
Why show both WCAG and APCA when other tools pick one?
Because they measure different things. WCAG 2.2 is the law in most countries; APCA is a more accurate predictor of how the text will actually read. Showing both lets you make an informed call instead of deferring to whichever algorithm a single tool happened to implement.
What does the apply fix button actually do?
It walks the foreground color along its OKLCH lightness axis — keeping the hue and chroma constant — until the pair passes WCAG AA. OKLCH is perceptually uniform, so the suggested color reads as the same hue family as your original. Naive HSL fixes often shift the hue in ways you do not notice in the picker but do notice on screen.
What is the difference between WCAG AA and AAA?
AA requires 4.5:1 contrast for body text and 3:1 for large text — this is the legal baseline and what almost every accessibility audit tests against. AAA is stricter (7:1 / 4.5:1) and rarely required outside specialized contexts like government health information.
What counts as large text under WCAG?
18pt (24px) or larger at regular weight, or 14pt (18.66px) or larger at bold weight. Anything smaller is treated as normal text and must hit the higher 4.5:1 threshold.
Does this tool work with alpha / transparent colors?
Not yet — the current version assumes opaque colors. If you are checking semi-transparent text, flatten it against the actual rendered background first. Most browser dev tools show you the resulting blended color.
Is the color blindness simulation medically accurate?
No. We use the standard Brettel/Viénot/Mollon matrix approximations, which are great for spotting obvious failures but should not replace testing with users who have color vision deficiencies. About 8% of men and 0.5% of women have some form of color blindness — designing for them is not optional.
Can I share my contrast check with my team?
Yes. Hit the share button and your current color pair is encoded into the URL as #fg=...&bg=... The page opens with the same colors loaded, so you can drop the link into a Slack thread or design ticket.
Why does WCAG sometimes pass when APCA fails (or vice versa)?
They use different math. WCAG 2.2 uses a fixed luminance ratio; APCA uses a perceptual model that accounts for polarity, font size, and font weight. The disagreements are instructive: WCAG-pass / APCA-fail is most common with thin light-on-dark pairs; WCAG-fail / APCA-pass happens occasionally on mid-luminance brand colors that read better than the ratio suggests.
Is there an API for this checker?
Not currently. The math is straightforward — under 100 lines for WCAG and APCA combined — and we are considering open-sourcing the core in a future release. Drop us a note if you would use it.

Pair with our other color tools

AI Color Palette Generator

Describe a mood and get a full 5-color palette. Pull any two colors from the result back into this checker to validate body and heading combinations.