Skip to content
ToolMug

Use ↑ ↓ to move, Enter to open, Esc to close.

Color Contrast Checker

Enter a text colour and a background colour to get the WCAG contrast ratio and see whether normal and large text meet AA and AAA. If it fails, the tool keeps the hue, adjusts only lightness, and suggests the closest passing colour you can apply with one click.

Runs in your browser — nothing you enter is uploaded

Contrast ratio

4.54:1

  • AA normal text ≥ 4.5:1Pass
  • AA large text ≥ 3:1Pass
  • AAA normal text ≥ 7:1Fail
  • AAA large text ≥ 4.5:1Pass

Large heading text

Normal body text at 16 px should be easy to read.

Small print, captions and footnotes.

Button

Closest text colour that passes AAA: #595959 (7.00:1)

How to use

  1. Pick the colours or type them — hex, rgb(), hsl(), oklch() or a colour name.
  2. Read the ratio and the four WCAG results, and check the live preview below.
  3. If it fails, click Use this colour next to a suggestion to apply it.

Options explained

AA
At least 4.5:1 for normal text and 3:1 for large text (18 pt / 24 px, or 14 pt / about 18.7 px bold). Most regulations and design systems require AA.
AAA
At least 7:1 for normal text and 4.5:1 for large text, for content where readability matters most.
Suggested colour
Keeps hue and chroma in the OKLCH colour space and changes only lightness to find the closest colour that just passes.
Transparent colours
A text colour with transparency is measured as it appears over the background.

How the ratio is calculated

Each colour is converted from sRGB to linear light, then to relative luminance:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Green counts most because the eye is most sensitive to it. Some results on a white background:

Text colour Ratio Result
#000000 21 : 1 AAA
#0066cc 5.57 : 1 AA normal text, not AAA normal text
#767676 4.54 : 1 AA normal text
#777777 4.48 : 1 Fails AA for normal text, passes for large text

The WCAG definitions are in Understanding Success Criterion 1.4.3.

Frequently asked questions

How is contrast calculated?

With the WCAG 2.x formula (lighter relative luminance + 0.05) ÷ (darker relative luminance + 0.05), giving 1:1 to 21:1. Black on white is 21:1.

Why is #767676 mentioned so often?

It is the lightest grey that reaches 4.5:1 (about 4.54:1) on white, so it is a common lower limit for secondary text.

Do icons and borders need checking too?

Yes. Since WCAG 2.1, user-interface components and graphics — button borders, inputs, icons — need at least 3:1 against adjacent colours.

Privacy

This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.

Related tools