What this color contrast checker does
This color contrast checker measures how far apart a text color and a background color are in brightness and tells you whether the pair meets the contrast criteria in WCAG 2.2. You get the exact ratio, a pass or fail for normal text, large text and user interface components at both the AA and AAA levels, and a live preview of your text at five sizes.
When a pair fails, it also suggests the nearest colors that pass. The suggestions keep your hue and change only lightness, so a brand orange becomes a slightly deeper orange instead of a random dark brown. A second tab checks every text and background combination in a whole palette at once.
How to use it
- Enter the text color in the first field, or click the swatch beside it to open your browser's color picker. Type HEX (three to eight digits,
#optional),rgb(),hsl(),oklch()or a CSS name such astomato. - Enter the background color the same way. Under each field, chips show the color as HEX, RGB, HSL and OKLCH; click one to copy it.
- Read the result. The Contrast ratio tile shows the ratio. The table beneath lists Pass or Fail for normal text, large text and UI components and graphics, each with the ratio it needs.
- Check the preview. Five lines show your text at 14px, 16px, 18.66px bold, 24px and 32px bold, followed by a button outline, a dot and a bar in the text color. Change the Sample text to match your page.
- Fix a failing pair. Under Nearest passing colors, choose a Goal: AA for normal text (4.5:1), AA for large text and UI (3:1) or AAA for normal text (7:1). Each card shows a before and after, the new ratio and a Use these colors button. The Closest badge marks the smallest change.
- Swap, reset or try an example with the buttons under the fields, then use Copy report, Copy CSS, Copy share link or Download report to pass the result on.
To test many colors at once, switch to Check a palette and paste one color per line.
How the contrast ratio is calculated
WCAG 2 works from relative luminance, a number from 0 (black) to 1 (white) that weights the three sRGB channels by how bright the eye finds them. Each channel is first converted to linear light:
c = channel ÷ 255
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
Green carries the most weight and blue the least, which is why pure blue text on white passes easily and pure green does not. Ratios run from 1:1 (identical colors) to 21:1 (black on white).
Worked example: white text on #c9400a. The orange has channels 201, 64 and 10. Their linear values are 0.5841, 0.0513 and 0.0030, so L = 0.2126 × 0.5841 + 0.7152 × 0.0513 + 0.0722 × 0.0030 = 0.1611. White has L = 1. The ratio is (1 + 0.05) ÷ (0.1611 + 0.05) = 4.97:1, which passes AA for normal text but not the 7:1 needed for AAA.
Some copies of the standard print 0.03928 as the cutoff instead of 0.04045. No 8-bit channel value falls between the two, so HEX and RGB colors give identical results.
Transparency is resolved first: translucent text is blended over the background, and a translucent background over white. The tool shows the final measured colors when that happens.
WCAG 2.2 contrast thresholds
The contrast criteria are the same in WCAG 2.1 and 2.2.
| Criterion | Level | Applies to | Minimum ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components and graphics | 3:1 |
Large text means at least 18 point, or at least 14 point and bold. In CSS pixels that is 24px, or about 18.66px bold (14 × 96 ÷ 72). WCAG does not define a numeric weight for bold, so checkers commonly treat 700 and above as bold. The ratio is never rounded: 4.499:1 does not meet 4.5:1, so this tool will not round a failing ratio up onto a threshold.
Text that is part of a disabled control, purely decorative, or part of a logo is exempt from the text criteria.
Real pairs and their ratios
Every value below was computed with the formula above.
| Text | Background | Ratio | Result |
|---|---|---|---|
#000000 | #ffffff | 21:1 | AAA |
#595959 | #ffffff | 7:1 (7.0047) | AAA, barely |
#767676 | #ffffff | 4.54:1 | AA, the lightest gray that passes on white |
#777777 | #ffffff | 4.48:1 | Fails normal text, passes large text |
#949494 | #ffffff | 3.03:1 | Large text and UI only |
#ff0000 | #ffffff | 4:1 (3.9985) | Fails normal text, passes large text |
#00ff00 | #ffffff | 1.37:1 | Fails everything |
#ffffff | #c9400a | 4.97:1 | AA |
#ffffff | #ff7a00 | 2.61:1 | Fails everything |
#767676 and #777777 differ by one step per channel, yet that step decides whether body text passes.
Where the gray line falls on common backgrounds
Gray is the color most often picked by feel, so it is worth knowing where the line sits. The table lists the neutral gray closest to each background that still reaches each ratio. Every value was computed with the formula above.
| Background | Passes 3:1 | Passes 4.5:1 | Passes 7:1 |
|---|---|---|---|
#ffffff white | #949494 | #767676 | #595959 |
#f6f5f1 warm paper | #8e8e8e | #707070 | #535353 |
#121212 near black | #616161 | #7d7d7d | #9f9f9f |
#000000 black | #5a5a5a | #757575 | #959595 |
The dark rows matter for dark mode. A gray that reads as a soft secondary color on white can drop below 4.5:1 once the page inverts, so light and dark themes each need their own check. Each gray in the table is the one closest to its background that passes; one step closer and it fails.
How the nearest passing color is found
The suggestions search in OKLCH, a color space whose lightness axis tracks perceived brightness far better than HSL does. The tool converts your color to OKLCH, holds hue and chroma fixed, and runs a binary search along lightness, toward black and toward white, for the smallest move that reaches your goal. Where sRGB cannot hold that much chroma at a given lightness, chroma is reduced only as far as needed. Each candidate is rounded to an 8-bit color and re-measured, so the ratio shown is for the color you will actually paste.
For white text on #ff7a00 (2.61:1), the nearest background change is #bf5900 at 4.52:1 and the nearest text change is #373737 at 4.56:1. Both are shown, because you may have to keep either the white label or the orange.
Sometimes neither color can reach the goal alone, such as mid-gray text on a mid-gray background at 7:1. The tool then moves both colors apart by the same share and offers that as one combined change.
Fixing Lighthouse's "insufficient contrast" error
Lighthouse's accessibility audit reports Background and foreground colors do not have a sufficient contrast ratio and lists each failing element. Its checks rely on the axe-core engine and on the AA thresholds above.
- Expand the audit and select a failing element. The details usually include the foreground and background colors, the font size and weight, and the ratio it expected.
- Paste the two colors into this tool and pick the Goal that fits: 4.5:1 for normal text, 3:1 only if the element is truly large text.
- Choose the closest suggestion, copy its HEX value, and change it in your stylesheet or design token.
- Run Lighthouse again. One token change often clears many elements at once.
When the background is an image or a gradient, automated checks often cannot compute a single ratio and flag the element for manual review instead.
Checking a whole palette
A design system with 12 colors has 132 possible text-on-background pairs. In Check a palette, paste the colors and the grid shows every pair with a sample, a ratio and a level label: AAA, AA, Large (3:1 or more, so large text and UI only) or Fail. Turn on Fade pairs that fail AA for normal text to see which combinations are safe for body copy, then export the grid with Copy CSV or Download CSV. The palette holds up to 24 colors.
Who this helps
- Front-end developers fixing a Lighthouse or axe report need the nearest passing HEX to paste into a stylesheet.
- Designers can test a brand accent against white, paper and dark surfaces before anything is built.
- Accessibility testers can document a failure with both colors and the ratio using Copy report.
Common mistakes
- Testing the wrong colors. Hover, focus, visited and dark-mode states each need their own check.
- Ignoring opacity. Text at 60% opacity is blended toward its background; the blended color is what counts.
- Placeholder text. It is still text. Light gray placeholders are a frequent failure, because the field's own border and label may pass while the hint does not.
- Focus rings and icons. Indicators and icons that carry meaning need 3:1 against the color next to them.
- Text on photos. Check the busiest part of the image, or put a solid or semi-opaque layer behind the text.
- Links in body text. If color alone separates a link from the text around it, one commonly cited technique asks for 3:1 between the two plus a second cue on focus or hover.
APCA, WCAG 3 and what this tool measures
WCAG 3.0 is a working draft, not a finished standard, and as of 2026 the contrast method it will use has not been settled. APCA is a perceptual contrast algorithm that takes font size and weight into account. It was proposed for an early WCAG 3 draft, but published reports say it was later removed from the draft, and it comes with its own license and naming rules. This tool measures only the WCAG 2 ratio, which is what the current criteria and automated tools such as Lighthouse use.
Privacy and limitations
Your colors, palette text, sample text and goal are kept in sessionStorage, which belongs to the current tab and is cleared when you close it. As you work, the address bar also gains a fragment after the # holding the colors, and that fragment is what Copy share link copies. Whoever opens the link sees those colors; the page makes no network request with them.
The limits are real. The tool reads sRGB colors, so an OKLCH color outside that gamut is adjusted and flagged, and a browser may map the same value a little differently. It cannot read pixels from an image, a gradient or a live web page, and it ignores font thinness, anti-aliasing, screen brightness and color vision differences. A passing ratio shows that two colors are far enough apart, not that a page is readable or accessible. Conformance depends on the whole page, and whether a law or contract requires a particular level is a question for a qualified adviser.
Frequently asked questions
What is a good color contrast ratio?
For normal-size text, 4.5:1 is the WCAG AA minimum and 7:1 is the stricter AAA level. Large text and user interface parts such as borders and icons need 3:1 at AA. The scale runs from 1:1 (identical colors) to 21:1 (black on white). Aim for more than the minimum on body copy, because thin fonts, small sizes and bright screens all make a borderline ratio harder to read.
What contrast ratio does WCAG 2.2 require for AA and AAA?
AA (criterion 1.4.3) requires 4.5:1 for normal text and 3:1 for large text. AAA (criterion 1.4.6) requires 7:1 for normal text and 4.5:1 for large text. Non-text Contrast (1.4.11) asks for 3:1 for user interface components and meaningful graphics. WCAG 2.2 did not change these numbers from 2.1, so a pair that passed under 2.1 still passes.
What counts as large text in WCAG?
Large text is at least 18 point, or at least 14 point and bold. In CSS pixels that is 24px regular or about 18.66px bold. The standard does not name a numeric font weight for bold, so most tools treat 700 and above as bold. Text below those sizes is normal text and needs 4.5:1 at AA, so a fix that only works for 24px headings will not cover body copy.
How is the contrast ratio calculated?
Each color's sRGB channels are converted to linear light, then weighted as 0.2126 red, 0.7152 green and 0.0722 blue to give a relative luminance L between 0 and 1. The ratio is (L of the lighter color + 0.05) divided by (L of the darker color + 0.05). The 0.05 term stands in for ambient light. The ratio is not rounded up, so 4.499:1 fails a 4.5:1 requirement.
Does contrast apply to placeholder text, disabled buttons and logos?
Placeholder text is ordinary text, so it is held to the same 4.5:1 as other text. Text in a truly inactive (disabled) control is exempt, as are purely decorative text and logotypes. A button that looks disabled but still works is not exempt. Icons and borders that carry meaning fall under the 3:1 non-text rule, including the boundary that shows where a form field is.
How do I fix the Lighthouse "insufficient contrast" error?
Open the failing audit, note each element's foreground and background colors, and paste them into the checker. Pick the goal that matches the text size, use the closest suggested color, and change it in your CSS or design token. Re-run Lighthouse afterward. If the text sits on an image or gradient, Lighthouse often cannot decide automatically, so add a solid or semi-opaque layer behind the text and test that color.
What is APCA, and will it replace the WCAG contrast ratio?
APCA is a perceptual contrast algorithm that takes text size and weight into account, where the WCAG 2 ratio does not. It was proposed for an early WCAG 3.0 draft, but as of 2026 the contrast method for WCAG 3.0 has not been settled, and the draft itself is still unfinished. The current criteria, and automated tools such as Lighthouse, use the WCAG 2 ratio, so that is what this checker measures. APCA has its own license and naming rules.
Does passing here mean my site meets accessibility law?
No. A passing ratio shows that two colors are far enough apart, which is one measurable part of accessibility. Conformance depends on the whole page, including text size, states, images and content. Whether a law, contract or procurement rule requires a particular level is a legal question this page cannot answer, so ask a qualified adviser. The checker never uploads your colors; they stay in your browser.