SmartKitio

WCAG Contrast Checker

Check whether a text color and background color have enough contrast to meet WCAG 2 AA or AAA, for normal and large text.

Your input stays in your browser. Nothing is uploaded.

Contrast ratio: 9.14

  • AA normal text: Pass
  • AA large text: Pass
  • AAA normal text: Pass
  • AAA large text: Pass

About this tool

The contrast ratio is calculated from the relative luminance of the two colors, as defined in WCAG 2. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means at least 18 pt (24 px) regular, or 14 pt (about 18.7 px) bold. The preview shows your text color on your background color.

How to use it

  1. Enter the text (foreground) color.
  2. Enter the background color.
  3. Read the ratio and the AA and AAA results for normal and large text.
L = 0.2126 R + 0.7152 G + 0.0722 B (linearized channels) Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Examples

  • Gray on white

    #767676 on #ffffff is about 4.54:1, which just passes AA for normal text.

  • Light gray on white

    #999999 on #ffffff is about 2.85:1, which fails AA even for large text.

WCAG 2 contrast requirements

LevelNormal textLarge text
AA4.5:13:1
AAA7:14.5:1

FAQ

Does this cover icons and UI components?
WCAG 2.1 asks for 3:1 contrast for meaningful graphics and component boundaries. Compare the ratio shown with 3:1.
Does it handle transparent colors?
No. Blend the color with its background first and enter the resulting solid color.
Is WCAG 3 contrast (APCA) supported?
No. This checker uses the WCAG 2 formula, which is the one referenced by current accessibility regulations.