How to check WCAG color contrast

1. Enter the foreground color

   "Foreground" is your text or icon color, in hex form (#RGB or #RRGGBB). Leading `#` is optional and the field is case-insensitive.

2. Enter the background color

   "Background" is the surface behind the foreground — page background, button fill, etc. Same hex formats accepted. Both fields appear side-by-side as a pair.

3. Press Run

   Result returns contrastRatio (e.g. 4.56) plus wcagNormalText and wcagLargeText with the pass/fail bands. Normal text needs ≥ 4.5 (AA) / 7 (AAA); large text needs ≥ 3 (AA) / 4.5 (AAA).

4. Read the levels

   AA is the most common legal/standards requirement; AAA is stricter and often unrealistic for body copy. Large text means 18pt+ regular or 14pt+ bold; below that, treat the result as normal-text contrast.