CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
Design & SEO
Contrast Checker
WCAG AA and AAA contrast ratios with a live pass/fail matrix.
What it does. A contrast checker measures the luminance ratio between a foreground and background color, from 1:1 to 21:1. WCAG 2.2 requires 4.5:1 for body text, 3:1 for large text and UI components, and 7:1 for AAA. This tool shows the ratio live, flags each threshold, and suggests the nearest passing color.
Runs in your browserNothing uploadsNo signupWorks offline
How to use Contrast Checker
- Set a foreground and a background color, or paste them.
- Read the ratio and the pass/fail matrix for each WCAG level.
- If it fails, use the suggested nearest passing color — it adjusts lightness only, so the hue is preserved.
The thresholds, and what counts as large text
| Content | AA | AAA |
|---|---|---|
| Body text under 18pt / 24px | 4.5:1 | 7:1 |
| Large text — 18pt / 24px, or 14pt / 18.66px bold | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | — |
| Focus indicators | 3:1 | — |
| Disabled controls | No requirement | — |
| Logos and brand marks | Exempt | Exempt |
| Incidental / decorative text | Exempt | Exempt |
The large-text definition trips people up regularly. 18pt is 24px at the default browser setting, and the bold threshold is lower at 14pt (18.66px). A 20px heading is not large text and needs the full 4.5:1 — which is exactly the kind of thing that fails an audit after launch.
Why WCAG 2.x contrast is known to be imperfect
The formula dates to 1999 and is based on a simple relative-luminance ratio. It has two documented weaknesses, and knowing them changes how you use it.
It overstates readability on dark backgrounds. Light text on a dark surface can pass 4.5:1 comfortably and still be harder to read than the ratio implies, because the formula does not model how the eye handles polarity. Dark-mode designs that pass on paper frequently need more contrast in practice.
It ignores font weight and size below the large-text cutoff. A 12px hairline and a 20px semibold are treated identically at the same colors, which is obviously wrong.
APCA — the algorithm being developed for WCAG 3 — models both, and this tool shows its score alongside for comparison. But AA remains the standard to ship against: it is what accessibility law references in the US, UK and EU, and what an audit will test. Treat APCA as a second opinion on dark mode, not as a replacement.
How to fix a failing combination
Adjust lightness, not hue. A brand color is a brand color; darkening it by 12% keeps it recognizable, while shifting its hue does not.
The suggestion in this tool walks lightness in OKLCH — which preserves the perceived hue and chroma far better than a naive HSL adjustment — until the target ratio is met, and reports how far it had to move.
Three other routes when the color genuinely cannot move: increase the font size or weight to qualify for the 3:1 large-text threshold; put the text on a different surface rather than on the brand color; or add a subtle darkened overlay between a background image and the text, which is the standard fix for text over photography.
Contrast is a legal floor in several jurisdictions
In the United States, Title III of the ADA has been repeatedly applied to websites, and WCAG 2.1 AA is the standard courts and the DOJ reference. Section 508 requires it for federal agencies and contractors.
In the European Union, EN 301 549 mandates WCAG 2.1 AA for public sector bodies, and the European Accessibility Act extends comparable obligations to a wide range of private-sector products and services from June 2025.
In the United Kingdom, the Equality Act 2010 plus the 2018 public sector accessibility regulations apply the same standard.
The practical consequence: for a commercial site, contrast failures are not a design opinion. They are the most common and most easily evidenced category of accessibility complaint, because anyone can measure them from a screenshot.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text or UI components to meet WCAG AA — the level referenced by accessibility law in the US, UK and EU.
What counts as large text?
18pt (24px) regular, or 14pt (18.66px) bold. A 20px heading does not qualify and needs the full 4.5:1.
Does my logo need to pass?
No. Logos and brand marks are explicitly exempt, as is purely decorative text. The exemption does not extend to a wordmark used as a page heading.
What is APCA?
The contrast algorithm being developed for WCAG 3. It models polarity, font weight and size, which WCAG 2.x does not. Useful as a second opinion, especially for dark mode — but ship against AA, since that is what the law references.
Why does my dark mode feel harder to read despite passing?
A known limitation of the WCAG 2.x formula, which overstates readability of light-on-dark. Aim higher than the minimum in dark mode, or check the APCA score.
Do placeholder and disabled text need to pass?
Disabled controls are exempt. Placeholder text is not — it is real content, and low-contrast placeholders are a common failure.
Is my data sent anywhere?
No. The luminance calculation runs in this page.
Guides for Contrast Checker
- Designing and Printing a Brochure8 min read
- Preparing a PDF for a Commercial Printer7 min read
- How to Make an Accessible PDF8 min read