Color contrast checker

Enter a text color and a background color to see their contrast ratio and whether they meet WCAG AA and AAA. If they don't, you get the nearest color that does.

  • Free
  • No sign-up
  • Runs in your browser
contrast-checker
Contrast ratio —

Large text sample

This is normal body text at 16 pixels, the size most paragraphs use.

Small text at 12 pixels is the hardest to read.

Button or icon outline

100% private — colors are calculated in your browser and nothing is sent anywhere.

Next step

Keep going with your result in another tool. Nothing is uploaded.

How it works

Enter two colors

Pick them with the color pickers or type any CSS color: hex, rgb(), hsl(), or a name.

Read the ratio

You see the contrast ratio and a pass or fail for each WCAG level, with a live preview.

Apply a fix

If it fails, choose the suggested color: it keeps the same hue and only changes the lightness.

What contrast ratio does WCAG require?

The Web Content Accessibility Guidelines measure contrast as a ratio between the brightness of two colors, from 1:1 (identical colors) to 21:1 (black on white). The higher the ratio, the easier the text is to read, especially for people with low vision, color blindness, or anyone reading a phone in sunlight. The thresholds are:

  • AA, normal text: 4.5:1. This is the level most laws and contracts ask for.
  • AA, large text: 3:1. Large means at least 24 px, or 18.66 px if bold.
  • AAA, normal text: 7:1, and 4.5:1 for large text. It is the stricter level.
  • Interface components and graphics: 3:1. This covers button borders, form field outlines, icons and chart elements that carry meaning.

Why light gray text keeps failing

Designers love soft gray text on white, and it is the most common failure. Gray #999999 on white has a ratio of only 2.85:1. Even #777777, which looks perfectly readable, scores 4.48:1 and misses AA by a hair, while #767676 passes with 4.54:1. That one-step difference is why an exact number matters more than judging by eye.

What the tool does that others don't

  • It accepts any CSS color, not just hex: named colors, rgb(), hsl() and modern formats. Your browser interprets them, so what you enter is what you get.
  • If a color has transparency, it is blended over the background before measuring, which is how a reader actually sees it.
  • It never rounds up across a threshold. A value of 4.496 is shown as 4.49 and fails, because WCAG does not allow rounding up to reach the pass mark.
  • When a pair fails, it suggests the nearest color that passes by adjusting only lightness, so your brand hue is preserved.

Accessibility and the law

In Europe, the European Accessibility Act applies to many consumer services since June 2025 and points to the EN 301 549 standard, which is built on WCAG 2.1 level AA. Spanish public-sector sites and apps are covered by Royal Decree 1112/2018 on the same basis, and accessibility claims in the United States are usually judged against WCAG AA. This tool is a design aid and not legal advice.

Limits worth knowing

The WCAG formula is a simplification of how people see. It does not judge text over photos or gradients (test the worst spot), ignores font weight and size beyond the large-text rule, and can be too generous with dark backgrounds. Logos and disabled controls are exempt from the rules.

Frequently asked questions

What contrast ratio do I need for my website?
For normal text, at least 4.5:1 to meet WCAG level AA, which is the standard most regulations use. Large text and interface components need 3:1. Level AAA asks for 7:1 for normal text.
What counts as large text?
Text that is at least 24 pixels (18 points) in regular weight, or at least 18.66 pixels (14 points) in bold. Anything smaller is normal text and needs the higher ratio.
Why is 4.49:1 a fail if it is so close to 4.5:1?
WCAG defines the thresholds exactly and does not allow rounding up. This tool never rounds a ratio up across a pass mark for that reason, so a pair that fails is never displayed as passing.
Can I use colors other than hex?
Yes. You can type named colors such as navy, rgb(31, 41, 55), hsl(215 28% 17%) and other CSS formats. If a color has transparency, it is blended over the background first.
Do logos and disabled buttons need enough contrast?
No. WCAG exempts logotypes and inactive interface components. Text that is purely decorative is exempt too. Everything a user needs to read or operate must pass.
How do I check text placed over an image or gradient?
Measure the text against the lightest or darkest part of the background it crosses, whichever is worst. Adding a solid or semi-transparent panel behind the text is the reliable fix.
Is this the same as the new WCAG 3 contrast method?
No. This tool uses the WCAG 2 ratio, the one required by current laws and standards. WCAG 3 is still a draft and proposes a different method, called APCA.

Related tools

More utilities that also run without leaving your browser.

Color name finderFind the closest standard color name for any hex, RGB or HSL value. Color palette generatorBuild a matching color palette from one base color, in six classic schemes. Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color. Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue. Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes. Color blindness simulatorSee how an image looks to someone with color blindness, side by side.