Color Contrast Checker (WCAG AA/AAA, Light & Dark Mode)
Enter a text color and a background: the checker shows the WCAG contrast ratio, whether it passes AA (4.5:1) and AAA (7:1), and the nearest color that passes — for your light and dark theme.
Light mode
Fails AA for normal text — fine only for large text (24 px, or 18.66 px bold) and UI parts.
- Fail AA — normal text ≥ 4.5:1 · SC 1.4.3
- Pass AA — large text (24px, or 18.66px bold) ≥ 3:1 · SC 1.4.3
- Fail AAA — normal text ≥ 7:1 · SC 1.4.6
- Fail AAA — large text ≥ 4.5:1 · SC 1.4.6
- Pass UI components and icons ≥ 3:1 · SC 1.4.11
16 px: Body text should be easy to read on a phone in daylight.
24 px: Large text
Button UI border and icon
Nearest passing text color (4.5:1): #767676, darker, ratio 4.54:1
Colors: hex (#777 or #767676), rgb(118 118 118) or hsl(0 0% 46%). A transparent text color is blended over the background.
Dark mode pair
Fails WCAG for text of any size and for UI components.
- Fail AA — normal text ≥ 4.5:1 · SC 1.4.3
- Fail AA — large text (24px, or 18.66px bold) ≥ 3:1 · SC 1.4.3
- Fail AAA — normal text ≥ 7:1 · SC 1.4.6
- Fail AAA — large text ≥ 4.5:1 · SC 1.4.6
- Fail UI components and icons ≥ 3:1 · SC 1.4.11
16 px: Body text should be easy to read on a phone in daylight.
24 px: Large text
Button UI border and icon
Nearest passing text color (4.5:1): #007bee, lighter, ratio 4.52:1
Colors: hex (#777 or #767676), rgb(118 118 118) or hsl(0 0% 46%). A transparent text color is blended over the background.
Tip: the address of this page keeps your colors, so you can bookmark or share a check.
How to read the result
The contrast ratio runs from 1:1 (the same color twice) to 21:1 (black on white). WCAG 2.2 sets the minimums:
- 4.5:1 for normal text — level AA, success criterion 1.4.3. This is the one most laws and audits refer to.
- 3:1 for large text — at least 24 px regular or 18.66 px (14 pt) bold.
- 7:1 and 4.5:1 for level AAA (1.4.6).
- 3:1 for UI components and graphics — input borders, icons, focus rings, chart lines (1.4.11).
The thresholds are exact. #777 on white is 4.478:1 and fails; #767676 is 4.54:1 and passes. This checker cuts the ratio to two decimals instead of rounding, so it never shows a failing pair as "4.50".
Why contrast matters more on a phone
People read phones outdoors, in glare, with the screen dimmed by auto-brightness or battery saver. Light grey text that looks elegant on a calibrated monitor turns into a blur in sunlight. Phone text is also smaller and read at arm's length, so it has less margin for error. Treat 4.5:1 as the floor, not the goal, for anything people must read.
Checking dark mode
A dark theme is a second set of color pairs, and each one has to pass on its own. Two traps are common. Saturated brand colors that work on white — a mid blue link, a red error message — often drop below 4.5:1 on a near-black background; you usually need a lighter tint of the same hue in dark mode. And pure white on pure black (21:1) can look like it glows or smears for people with astigmatism; an off-white such as #e6e6e6 on #121212 still gives about 15:1 and is calmer to read. Enter your dark-theme colors in the second panel to check both themes side by side.
Fixing a failing color
"Suggest a color that passes" keeps the hue and saturation of your text color and moves only its lightness, in whichever direction needs the smaller change, until the pair reaches the level you pick. Put the new value into your design tokens or CSS custom properties so every component picks it up. Then check the states people forget: placeholder text, hover and visited links, text on top of photos (measure the lightest spot behind the text), and error messages.
How the ratio is calculated
Each color is converted to its relative luminance: every sRGB channel is divided by 255, then linearized (values up to 0.04045 are divided by 12.92, larger ones become ((c + 0.055) / 1.055)2.4), and combined as L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Llighter + 0.05) / (Ldarker + 0.05). Semi-transparent text is first blended with the background, the way the browser draws it. For a full walkthrough of fixing contrast on a real site, read the low-contrast text guide.
Frequently asked questions
What contrast ratio does text need?
WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold). Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other UI parts need 3:1.
Is #777777 grey on white accessible?
No. #777777 on white is 4.478:1, just under the 4.5:1 minimum, and WCAG does not round up. #767676 (4.54:1) is the lightest neutral grey that passes on white.
Do disabled buttons and logos need enough contrast?
No. WCAG exempts inactive controls, logos and purely decorative text. Placeholder text and text over images are not exempt when they carry information.
Does dark mode need the same contrast?
Yes. Every theme you offer has to meet the same ratios, so check each text and background pair of your dark theme separately — brand colors that pass on white often fail on a dark background.
More free tools: tap target size checker · mobile font size calculator · css media query generator · device mockup generator · all tools