Quick answer
Color contrast is the ratio between the relative luminance of text and its background, from 1:1 to 21:1. WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text and UI components; level AAA requires 7:1 and 4.5:1. Enter your text and background colors in Playxoft's free Color Contrast Checker to see the ratio, a pass or fail for each rule, and the nearest passing color if the pair fails.
- WCAG 2.2 pass or fail
- Hue-preserving fixes
- APCA Lc value
- Live type preview
- Palette contrast matrix
- Alpha blending
- Shareable links
How to use the Color Contrast Checker
- 1Enter the Text color and Background color as hex, rgb(), hsl(), oklch() or a color name, or click the swatches to pick.
- 2Read the ratio and the pass or fail table for normal text, large text and UI components.
- 3If the pair fails, choose a Target under Fix it and click Apply on the nearest passing text or background color.
- 4Drag the Lightness sliders to explore, and press X to swap text and background.
- 5To audit a whole design system, switch to Palette matrix and paste every color at once.
What contrast ratio does WCAG require?
WCAG 2.2 (a W3C Recommendation since October 2023, and also published as the international standard ISO/IEC 40500:2025 in October 2025) sets three contrast requirements:
| Content | AA | AAA | Success criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI components and meaningful graphics | 3:1 | (none) | 1.4.11 |
| Disabled controls, decoration, logos | No requirement | No requirement | Exceptions |
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Luminance comes from linearized sRGB: 0.2126 R + 0.7152 G + 0.0722 B. Green dominates the formula, which is why a green and a red can share the same luminance and fail completely against each other.
There is no rounding: 4.49:1 fails AA. This checker truncates the displayed value, so it never shows a passing number for a failing pair. Level AA is what accessibility laws and procurement standards point to, though many cite older versions: US Section 508 references WCAG 2.0 AA, while the US ADA Title II rule and Europe's EN 301 549 (version 3.2.1) reference WCAG 2.1 AA. The contrast thresholds are identical in 2.0, 2.1 and 2.2.
What counts as large text?
WCAG defines large text as at least 18 point regular or 14 point bold. On the web, 1pt is 1.333 CSS pixels, so:
- 24px or larger at normal weight, or
- 18.66px (about 18.7px) or larger at bold weight (700 or heavier).
Measure the size you set in CSS at default zoom, not what you see when zoomed in. Thin and decorative typefaces need more contrast than the minimum, because their strokes cover less of the background; WCAG's numbers assume ordinary text faces.
Non-text contrast (1.4.11) covers anything a person needs to see to use the interface: input borders, focus indicators, icon-only buttons, checkbox outlines and the parts of a chart needed to read it. Each needs 3:1 against the colors next to it.
Which color combinations commonly fail?
These everyday pairings fail more often than designers expect (ratios from this checker):
| Pair | Ratio | Result |
|---|---|---|
Tailwind v3 blue-500 #3b82f6 text on white | 3.67:1 | Fails AA body text; passes large text |
Gray #9ca3af placeholder on white | 2.53:1 | Fails everything |
White text on amber #f59e0b | 2.14:1 | Fails everything |
White text on green #22c55e | 2.27:1 | Fails everything |
Green #22c55e on red #ef4444 | 1.65:1 | Fails, and invisible to many color-blind readers |
Gray #767676 on white | 4.54:1 | The lightest neutral gray that passes AA on white |
Gray #777777 on white | 4.47:1 | Fails by a hair |
Bright yellows, oranges and greens are light colors in luminance terms, so white text on them almost always fails. Use dark text on them instead: black on #ff8800 reaches 8.77:1, while white manages only 2.39:1.
How does the Fix it suggestion work?
When a pair fails, the checker searches for the closest color that passes your chosen target, changing only OKLCH lightness. Hue stays fixed and chroma is kept unless the color would leave the sRGB gamut, so a failing brand blue becomes a deeper version of the same blue rather than a different color.
It searches both directions (lighter and darker), refines each answer by bisection, and then verifies the result after rounding to an 8-bit HEX value, because rounding alone can push a borderline color back under 4.5:1. You get the nearest option first, plus the alternative in the other direction when one exists.
Change the text color when the background is fixed by your layout; change the background when the text color is your brand color. For buttons, darkening the fill one or two steps (for example from a 500 to a 600 shade) is usually the smallest visible change.
APCA vs WCAG 2: which contrast method should I use?
APCA (Accessible Perceptual Contrast Algorithm) is a perceptual contrast method developed as a candidate for WCAG 3. It is not part of any W3C standard: the current WCAG 3 Working Draft says its contrast algorithm is yet to be determined. APCA reports a lightness contrast value, Lc, from about −108 to +106. Unlike the WCAG 2 ratio it is polarity-aware: dark text on a light background (positive Lc) and light text on a dark background (negative Lc) are scored differently, matching how vision actually works. Rough guidance: Lc 75 or more for body text, Lc 60 for other content text, Lc 45 for large headlines, Lc 30 for spot text such as placeholders (under WCAG 2.2, placeholder text still needs 4.5:1).
WCAG 2's formula is known to be least accurate for dark color pairs, where it can pass combinations that are hard to read, which makes APCA a valuable second opinion for dark mode.
Test against WCAG 2.2 for compliance: it is the published standard that laws and audits reference. Use the APCA value shown here as an informational second opinion, especially for dark themes. WCAG 3 is still a draft and has not chosen a contrast method.
Frequently asked questions
Last updated by the Playxoft engineering team.