Color Contrast Checker
Learn: Accessibility→Check any foreground and background pair against WCAG AA and AAA — for body text, large text, and UI elements — and share the result as a link.
5.17:1
Large text renders at 24px and above.
Normal body copy sits below that threshold, which is where the 4.5:1 requirement applies and where most readability problems actually live.
Results
Normal text
Body copy — anything under 24px, or under 18.7px when bold.
Large text
24px and up, or 18.7px and up when bold.
UI & graphics
Icons, borders, focus rings, and form control boundaries.
How to read the ratio
The number is a ratio between the relative luminance of your two colors, defined by WCAG. It runs from 1:1, where the colors are identical and the text is invisible, to 21:1, which only pure black on pure white reaches.
It is symmetric: swapping foreground and background gives the same ratio. That is why the Swap button changes what you see in the preview but never changes the verdict — dark-on-light and light-on-dark are the same measurement, even though they do not feel the same to read.
Luminance is not lightness as you perceive it. A saturated yellow and a saturated blue can look equally “strong” and still sit at opposite ends of the luminance scale, which is why contrast is worth measuring rather than eyeballing.
Which level you actually owe
AA is the level accessibility legislation generally references, and it is the realistic target for a whole product. AAA is stricter and the WCAG authors state it is not expected to be met site-wide — chasing it everywhere tends to flatten a palette toward black and white.
The practical approach is to clear AA everywhere, then reach for AAA on long-form body copy where reading endurance matters most. If a brand color cannot clear AA as text, keep it for large headings, backgrounds, and accents rather than compromising the body text it was never suited to.
Three thresholds, not one
Most contrast tools answer one question — can I put body text of this color on that background. WCAG defines three separate requirements, and this page evaluates all of them at once.
Normal text needs 4.5:1 for AA. Large text — 24px and up, or 18.7px and up when bold — drops to 3:1. Non-text content that carries meaning, under WCAG 1.4.11, also needs 3:1: icons, focus rings, form field borders, chart segments.
Non-text contrast has no AAA level defined, which is why this page shows no AAA badge for it. That is not a pair failing a stricter test; there is no stricter test to fail.
When a pair fails
The Fix button searches for the nearest lightness that clears 4.5:1, holding hue and chroma so the result stays recognisably your color rather than drifting toward a generic dark gray. It adjusts whichever side reaches the target with the smaller change.
The search happens in OKLCH, where a change in lightness is perceptually even. Adjusting an RGB value directly tends to shift the apparent hue as it lightens — the reason a lightened blue so often turns faintly purple.
Frequently asked questions
- What is a good color contrast ratio?
- For normal body text, 4.5:1 is the WCAG AA minimum and 7:1 is AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Icons, borders, and form controls need 3:1. Ratios run from 1:1 (identical colors) to 21:1 (pure black on pure white).
- What is the difference between WCAG AA and AAA?
- AA is the level most legal accessibility requirements reference, including the ADA in the US and EN 301 549 in the EU. AAA is a stricter target that is not expected to be met across an entire site — the WCAG authors say so explicitly. Design to AA, and treat AAA as a bonus on body copy where you can reach it.
- Does large text really need less contrast?
- Yes. Larger letterforms have thicker strokes and more area, so the same ratio is easier to read. WCAG counts text as large at 24px and up, or 18.7px and up when bold, and lowers the AA requirement from 4.5:1 to 3:1 for it.
- Do icons and borders need to pass contrast?
- Under WCAG 1.4.11, non-text content that conveys meaning needs 3:1 against what is next to it. That covers icons, focus rings, form field borders, and chart segments. There is no AAA level for non-text contrast, so 3:1 is the whole requirement.
- Why does a color pass on white but fail on black?
- Contrast is a ratio between two lightness values, not a property of one color. A mid-tone sits far from white and close to black, or the reverse, so it will almost always pass against one and fail against the other. No single color clears AA against both a near-white and a near-black background.
- Is meeting 4.5:1 enough to be accessible?
- It is necessary, not sufficient. Contrast is one success criterion among many, and it does not cover color-blind ambiguity — two colors can have excellent contrast and still be indistinguishable to someone with deuteranopia, because color vision deficiency barely changes lightness. Check hue separation as well as contrast.