UtiliHub
Español

WCAG contrast checker

Check WCAG 2 contrast between text and background, with AA/AAA for normal and large text.

Loading tool…

Recommended next step

Design and validate your interface

After using WCAG contrast checker, continue with Color Contrast Calculator.

Open next

Continue this path

Tools selected to complete the same task.

4 steps

Tool guide

WCAG contrast checker: how it works

Practical information to understand the result and use this tool correctly.

About WCAG contrast checker

WCAG 2 contrast uses relative luminance, not a simple brightness subtract. The ratio is (lighter + 0.05) / (darker + 0.05).

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18 pt, or 14 pt bold) and UI components need 3:1 for AA.

Excel can compare hex digits, but it does not linearize sRGB or show a live text preview. This check stays in the browser.

How to use it

  1. 1Enter text and background as #RGB or #RRGGBB. Blank, text, and short hex values are rejected.
  2. 2Load body text, borderline gray, or failing red.
  3. 3Read the ratio and AA/AAA badges. If normal AA fails, use the suggested text color.
  4. 4Copy the pair or reset. Nothing is uploaded.

Frequently asked questions

What is black #000000 on white #FFFFFF?
21.00:1. Relative luminance is 0 and 1, so (1+0.05)/(0+0.05) = 21. It passes AA and AAA for normal and large text.
What is #767676 on white, and #FF6B6B on white?
#767676 on #FFFFFF is about 4.54:1, so AA normal passes and AAA normal (7:1) fails. #FF6B6B on #FFFFFF is about 2.78:1 and fails AA normal and large.
Which formula and units are used?
sRGB channels are linearized (≤0.04045 divide by 12.92, else ((c+0.055)/1.055)^2.4). L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is unitless.
What happens with empty, zero, negative, or NaN?
Both fields empty is an error. #000 is valid black, not a numeric zero. A minus sign, words, or NaN are invalid hex. Alpha hex is rejected; use opaque #RRGGBB.