SuperDevTools
EN

Color Contrast Checker (WCAG)

Text color

Background color

Type a HEX code (#767676), RGB (rgba(0, 0, 0, 0.5)), HSL (hsl(270, 50%, 40%)) or a CSS color name (rebeccapurple).

Contrast ratio
WCAG 2.x criterionAAAAA
Normal textunder 24 px, or under 18.66 px bold 4.5:1 7:1
Large text24 px and up, or 18.66 px and up bold 3:1 4.5:1
UI components and graphicsfield borders, icons, chart lines 3:1 No AAA level

Live preview

Normal 16 px text: this is how a paragraph looks with these two colors.

Large 24 px text

Bold 18.66 px text

The button is filled with the text color and labeled in the background color, so the ratio stays the same. The field border and the magnifier icon illustrate the 3:1 threshold for components.

Fixed colors

The closest color that reaches the threshold, found by changing lightness only: the hue is kept. Suggestions are opaque colors.

Text, AA level (4.5:1)

Text, AAA level (7:1)

Background, AA level (4.5:1)

Background, AAA level (7:1)

Color blindness simulation

The same text as seen with each type of color blindness, with the ratio of the simulated colors. This is a simulation: your colors do not change.

Typical vision
Protanopia (red)
Deuteranopia (green)
Tritanopia (blue)
Achromatopsia (no color)

APCA score (experimental)

Check a list of pairs

Everything is calculated in your browser. Your last colors and your list stay on this device; nothing is sent.

Why color contrast matters

Light gray text on white looks clean on a designer's calibrated monitor. On a phone in bright sunlight, on an old laptop screen or for someone with low vision, it turns into a squint. Contrast sensitivity also drops with age, so readable colors help far more people than you might think.

This color contrast checker computes the WCAG 2.x contrast ratio between a text color and a background color, tells you for each criterion whether the pair passes AA or AAA, and suggests the nearest corrected color when it fails.

How to use it

  1. Under "Text color" and "Background color", use the picker or type a code: HEX (#767676), RGB, HSL or a CSS color name such as rebeccapurple. The "Opacity" slider handles transparency.
  2. Read the contrast ratio and the results table. Every cell shows a symbol and the word "Pass" or "Fail", not just a color.
  3. Check the "Live preview": normal text, large text, bold text, a button, a link, an input field and an icon.
  4. If the pair fails, "Fixed colors" offers a text or background color that reaches AA or AAA; "Apply" puts it in place. "Swap" exchanges the two colors.
  5. To audit a whole design system, paste your pairs into "Check a list of pairs", one per line, and click "Check the list".

"Copy the link to these colors" gives you a URL that reopens the same pair. Everything runs in your browser.

The contrast ratio in plain words

Each color gets a relative luminance, from 0 for black to 1 for white, computed from its red, green and blue values (green counts most, blue least). The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). It runs from 1:1, two identical colors, to 21:1, black on white. Thresholds apply to the exact ratio with no rounding: 4.499 does not reach 4.5.

Text on whiteRatioNormal text
#000000 (black)21:1AAA
#0000FF (blue)8.59:1AAA
#7676764.54:1AA
#7777774.48:1Fail (AA for large text)
rgba(0, 0, 0, 0.5)3.95:1Fail (AA for large text)

For a semi-transparent color, the tool first works out the color actually displayed: black at 50% opacity on white renders as #808080, hence 3.95:1. A transparent background is laid over white.

AA and AAA thresholds

  • Normal text: 4.5:1 for AA, 7:1 for AAA.
  • Large text: 3:1 for AA, 4.5:1 for AAA. Text counts as large from 18 point, about 24 px, or from 14 point bold, about 18.66 px.
  • UI components and graphics: 3:1 for input borders, standalone icons, focus indicators and chart lines. There is no AAA level for this one.

AA is the level most websites aim for, and it is the level that accessibility laws usually point to. In the United States, public bodies and many businesses are expected to make their sites accessible; the European Union has directives for public sector sites and many private services. What applies to you depends on your sector and country, so check with a specialist if you are unsure.

The "Show the APCA score" box adds a score from a newer method that is still experimental and may shape future guidelines; it has no official standing today.

Design tips for readable colors

  • Keep your brand hue and change only lightness, which is what "Fixed colors" does. Example: #999999 on white gives just 2.85:1; the tool suggests #767676, the lightest gray that reaches 4.5:1.
  • Never rely on color alone to carry meaning: add a word, an icon or an underline. The "Color blindness simulation" shows how the pair looks to someone who confuses red and green.
  • For text over a photo, test the lightest area of the image.
  • If you ship a dark theme, check the reversed pairs too.

Frequently asked questions

What contrast ratio should I aim for?

At least 4.5:1 for body text and 3:1 for large text and interface elements: that is level AA. Aim for 7:1 for body copy if many of your readers are older.

Why does #777777 fail when it looks like #767676?

The threshold is strict: #777777 gives 4.48:1 and #767676 gives 4.54:1. Your eye can't tell them apart, but the line falls right between them.

Does placeholder text need enough contrast?

Yes. Placeholder text is text, so it needs 4.5:1. Only disabled controls are exempt under WCAG.

Are my colors sent anywhere?

No. The current pair and your list are only stored on this device for your next visit.