ToolStack

Contrast Checker

Check the WCAG contrast ratio between text and background colors instantly.

100% private — everything runs in your browser

Advertisement

How to Use

  1. 1

    Set the text color and the background color with the pickers or by typing hex codes.

  2. 2

    The WCAG contrast ratio is calculated instantly.

  3. 3

    Check the four badges to see which WCAG levels pass.

  4. 4

    Use Swap to check the reverse combination.

Examples

Dark text on white

Input

Text #111827 · Background #FFFFFF

Output

17.74 : 1 — AA and AAA pass for all text sizes

Low-contrast grey

Input

Text #9CA3AF · Background #FFFFFF

Output

2.54 : 1 — fails AA for normal text

FAQ

Which contrast ratio should I aim for?

WCAG recommends at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18 pt, or 14 pt bold) needs at least 3:1.

How is the ratio calculated?

With the WCAG 2.x formula (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. The ratio ranges from 1:1 to 21:1.

Does it check color blindness?

No — the ratio only measures brightness difference. Colors can pass the ratio and still be hard to tell apart for people with colour vision deficiency.

Related Tools

Color ConverterConvert between HEX, RGB, HSL, HSV and HWB color formats in any direction.CSS Color GeneratorTurn a base color into a 10-step shade scale and export it as CSS variables.Color PickerPick any color and copy its HEX, RGB, HSL and HSV values instantly.HEX to RGBConvert HEX color codes to RGB values instantly — free and private.RGB to HEXConvert RGB values to a HEX color code instantly — free and private.Gradient GeneratorCreate CSS linear and radial gradients visually and copy the CSS code.