Result
Good for text
Passes AA for text of any size. Body text needs 7:1 for AAA.
The pair at real sizes
- Your text16px · 400 · needs 4.5:1PassAPCA wants Lc 90 here: not met
- Generative Art30px · needs 3:1PassAPCA wants Lc 60 here: met
- Creative Coding24px bold · needs 3:1PassAPCA wants Lc 45 here: met
- Computational Design18.66px bold · needs 3:1PassAPCA wants Lc 60 here: met
- A blog about making art with code.16px · needs 4.5:1PassAPCA wants Lc 90 here: not met
- Tutorials · Newsletter · Generative Art14px · needs 4.5:1PassAPCA wants Lc 90 here: not met
- Buttonborders, icons · needs 3:1PassAPCA wants Lc 45 here: met
WCAG 2.2 levels, APCA and fixes
| Used for | AA | AAA |
|---|---|---|
| Normal textBody copy, labels, links and captions: under 24px, or under 18.66px bold. | Passneeds 4.5:1 | Failneeds 7:1 |
| Large textHeadings and big labels: at least 24px, or 18.66px bold. | Passneeds 3:1 | Passneeds 4.5:1 |
| Icons and UIWhat you need to see to use the page: field borders, focus rings, icons, chart lines. | Passneeds 3:1 | No AAA level |
APCA Lc 74.9Minimum for other content text (24px, 16px bold). Advisory, not a WCAG requirement.
Nearest colours that pass
The smallest change of lightness, hue and chroma kept. Pick one to use it.
| To reach | Change the text | Change the background |
|---|---|---|
| 7:1Body text (AAA) | Out of reach |
About contrast
What contrast ratio does WCAG 2.2 require?
For level AA, normal text needs at least 4.5:1 against its background, and large text needs 3:1 (success criterion 1.4.3). Icons, field borders, focus indicators and other parts of the interface you need to see also need 3:1 (1.4.11).
For level AAA, normal text needs 7:1 and large text 4.5:1 (1.4.6). AA is what audits and accessibility laws such as the EU’s EN 301 549 refer to.
What counts as large text?
Text of at least 18 points, which is 24 CSS pixels, or at least 14 points bold (weight 700 or more), which is about 18.66 pixels. Everything smaller is normal text.
Is 4.49:1 enough to pass 4.5:1?
No. WCAG compares the exact ratio with the threshold and doesn’t round, so 4.49:1 fails 4.5:1. This checker shows ratios cut to two decimals, never rounded up.
How is the contrast ratio calculated?
Each colour’s relative luminance L is worked out from its sRGB channels, and the ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter of the two. It runs from 1:1 (the same colour) to 21:1 (black on white).
A colour with transparency is first flattened over what is behind it, as a browser paints it, and the ratio is taken on the result.
What is APCA, and should I use it?
APCA, the Accessible Perceptual Contrast Algorithm, scores lightness contrast as Lc and accounts for which colour is the text and for font size and weight, which the WCAG ratio ignores. It was proposed for WCAG 3 and taken out of the draft in 2023.
It isn’t required anywhere, so this checker shows it as a second opinion next to the WCAG 2.2 result, not as a pass.
Which colour formats can I paste?
Any CSS colour: hex (3, 4, 6 or 8 digits, with or without #), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and the named colours, with or without transparency. Two at once, like “#2563eb on white”, fill both fields.
Can I check contrast from code or an AI agent?
Yes. /api/contrast answers the same checks as JSON, for one pair, a list of pairs or a whole palette, with no key. Its OpenAPI description is at /api/contrast/openapi.json.