Color contrast checker for WCAG 2.2 and APCA.
Check a color pair
Hex value, for example #005897
Hex value, for example #005897
Contrast ratio7.38:1
Passes AA and AAA
Large text at 24px bold
This paragraph is body text at 16px, so WCAG 2.2 asks 4.5:1 of it. On a real device, screen glare and low brightness cut that contrast further.
| What you are checking | AA | AAA |
|---|---|---|
| Body textBelow 24px, or below 18.66px bold | Pass | Pass |
| Large text24px and up, or 18.66px bold and up | Pass | Pass |
| Non-textInput borders, focus rings, meaningful icons | Pass | No AAA level |
Ratios are truncated to two decimals, so a pair reading 4.49 never claims to pass 4.5. Large text is 18pt (24px), or 14pt (18.66px) when bold.
WCAG 2.2 contrast requirements
Three ratios, all at Level AA, the level the European Accessibility Act is enforced on.
-
4.5:1 for body text
SC 1.4.3 Contrast (Minimum). It covers anything below 24px, or below 18.66px when the text is bold. Placeholders count as text: #999 on white sits at 2.84:1 and fails.
-
3:1 for large text
24px and up, or 18.66px and up in bold. Level AAA raises this to 4.5:1 and body text to 7:1. If a rebrand is planned, test the new palette against AAA while it's still cheap to change.
-
3:1 for everything that is not text
SC 1.4.11 Non-text Contrast: input borders, focus rings, the checked state of a toggle, icons that carry meaning, the segments of a chart. Design reviews tend to check text and skip these, so they usually surface in the audit.
Two methods,
two different questions
The ratio and the Lc score often disagree, most of all on dark backgrounds. The ratio tells you whether a pair conforms. The Lc score tells you how readable it is at a given size and weight.
WCAG 2.2 is the number in the report
Relative luminance, expressed as a ratio between 1:1 and 21:1, with thresholds at 3, 4.5 and 7. It is what EN 301 549 points at, what an auditor tests, and what your Accessibility Statement claims. Ship against this one.
APCA models what the eye does
An Lc score from a perceptual model that takes font size, weight and polarity into account. The WCAG 2 formula overstates contrast as the background gets darker, which is how a dark theme clears 4.5:1 and still looks washed out at 14px.
Use both, in that order
Pick the palette against Lc, then prove conformance against the ratio. When the two disagree, the ratio is what goes in the audit report.
What a hex pair cannot tell you
This checker compares two solid colors. These three cases need more than that.
Gradients and photographs
Sample the background where it comes closest to the text color. WCAG defines no method for this, so record which point you measured.
Semi-transparent colors
Composite an rgba value against the surface behind it, then check the result. The same 60% black overlay gives one ratio over a white card and another over a hero photo.
Text baked into an image
Automated tools can't read it, and forced colors can't repaint it. SC 1.4.5 Images of Text asks for live text instead, logos excepted.
Contrast is two of the 55 success criteria at Level A and AA in WCAG 2.2. A clean palette says nothing about focus order, names and roles, or whether a keyboard user can close your modal.
See how we audit the other 53Questions engineers ask about contrast
What contrast ratio does WCAG 2.2 AA require?
4.5:1 for body text, 3:1 for large text, and 3:1 for non-text elements such as input borders, focus rings and icons that carry meaning. Level AAA raises the first two to 7:1 and 4.5:1. Large text means 18pt, which is 24px, or 14pt bold, which is 18.66px.
Does our logo have to pass?
No. SC 1.4.3 exempts logotypes and brand names, along with inactive controls and purely decorative text. Everything around the logo still has to pass. "Inactive" means disabled: a button that only looks muted still needs 4.5:1.
Does placeholder text need to meet contrast?
Yes. A placeholder is text, so 4.5:1 applies. If it carries an instruction, move that to a hint under the field: the placeholder disappears as soon as someone types.
Do focus indicators have to meet contrast?
Yes, 3:1 against adjacent colors under SC 1.4.11. A mid-grey ring that clears 3:1 on a white card can fail on a dark header, so check it on every surface it appears on. WCAG 2.2 also adds 2.4.11 Focus Not Obscured (Minimum) at AA, which fails when a sticky header completely hides the focused element.
Our brand color fails. Do we have to change the brand?
Usually not. The logo is exempt under 1.4.3, so the mark keeps its color. What changes is the text drawn in that color: take a darker variant of the same hue for body copy and leave the original on headings from 24px up, where 3:1 applies. Buttons are the other trap. The label needs 4.5:1 against the fill, and the fill needs 3:1 against the page behind it.
Is APCA required for compliance?
No. APCA is the contrast method drafted for WCAG 3, and WCAG 3 has no conformance model and no legal force. Use APCA while you choose a palette. Use WCAG 2.2 in the audit, the ticket, and the Accessibility Statement.
Why do the two methods disagree in dark mode?
The WCAG 2 formula was built around dark text on light backgrounds and overstates contrast as the background gets darker. A pale grey on near-black can clear 4.5:1 and still read badly at 14px. APCA scores the two polarities on separate curves, which is why its number changes when you swap the colors and the ratio does not.
If every pair passes, does the site pass an audit?
No. Contrast is two of the 55 Level A and AA criteria in WCAG 2.2. The rest need manual testing, flow by flow, with a keyboard and a screen reader.
Unlock your full potential
You have a product to build. You don't have time to become a WCAG expert. Let us handle the technicalities so your team can get back to what they do best.
Discuss Your Project