DevToolPal
EN

Color Contrast Checker (WCAG)

Check the WCAG 2.x contrast ratio of text and background colors, see AA and AAA pass or fail for normal text, large text and UI, preview it live and get the nearest passing color.

Runs locally, never uploaded

Colors

Text color
Background color

Transparent colors are blended first: the text over the background, the background over white.

Preview

Large text

Body text should be easy to read for everyone, including people with low vision or a dim screen.

Button

Contrast ratio

—

Nearest passing colors

What it does

The color contrast checker tells you whether a text color is readable on a background color according to the Web Content Accessibility Guidelines (WCAG 2.x). Enter any CSS color for the text and the background — HEX, rgb(), hsl(), a color name or a transparent color — and it shows the contrast ratio, pass or fail for each AA and AAA criterion, and a live preview. When a pair fails, it suggests the nearest text and background colors that pass, keeping the same hue. Everything runs in your browser.

How to use

  1. Type or pick the Text color and the Background color. Swap exchanges them.
  2. Read the Contrast ratio and the pass/fail list for normal text, large text and UI components.
  3. If a level fails, look at Nearest passing colors: each suggestion shows the new color, its ratio, a copy button and Use to apply it.
  4. Turn on APCA to also see the WCAG 3 draft lightness contrast (Lc).

Semi-transparent colors are blended before checking: the text over the background, and the background over white.

Example

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

How the ratio is calculated

Each color’s relative luminance is computed from its sRGB channels (linearized, then weighted 21% red, 72% green, 7% blue). The ratio is (lighter + 0.05) / (darker + 0.05), which runs from 1:1 for identical colors to 21:1 for black on white. Hue does not matter, only lightness: pure red on pure green looks colorful but scores only about 1.3:1.

The suggestions change only the lightness of the color (in HSL) and pick whichever direction, darker or lighter, needs the smaller change. Sometimes no shade gets there: a mid grey background cannot reach 7:1 with any text color.

FAQ

› What contrast ratio do I need?

WCAG 2.x level AA asks for at least 4.5:1 for normal text and 3:1 for large text and for UI components such as input borders, icons and focus rings. Level AAA asks for 7:1 for normal text and 4.5:1 for large text. Most laws and policies point to level AA.

› What counts as large text?

Text that is at least 24px (18pt) in regular weight, or at least 18.66px (14pt) in bold. Everything smaller is normal text and needs the higher ratio.

› Why is 4.49:1 a fail?

WCAG thresholds are exact: a ratio of 4.499 does not meet 4.5. This checker therefore truncates the displayed ratio instead of rounding it up, and decides pass or fail on the exact value.

› What is APCA?

APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for the WCAG 3 draft. It gives a lightness contrast value Lc that depends on which color is the text, and suits dark mode better. It is not a legal standard yet, so it is shown here as extra guidance only.