SeoTools

Text color simulator

Set background, body color, font size, and three inline accents (color, bold, underline). Contrast panels follow WCAG 2.2 AA rules in each section before you copy values into WordPress or your theme.

Global settings

px

Sample text

On a typical page, headings, key terms in body copy, and link anchors often use different colors or underlines. Compare foreground colors against your background before saving options in the WordPress admin.

Decorations

Accent 1

Accent 1 style

Accent 2

Accent 2 style

Accent 3

Accent 3 style

Contrast criteria (WCAG 2.2 AA)

Contrast is evaluated against the background color. A light green circle (○) indicates pass; a light orange triangle (△) indicates fail.

  • Body text: at least 4.5:1 when the global font size is below 24px, otherwise at least 3:1 (WCAG 2.2 AA).
  • Accent spans: at least 3:1 when the font size is 18px or above and bold; otherwise the same 24px boundary as body (4.5:1 or 3:1).

Further reading on link colors