Magenta on White — Contrast Check

Magenta text on a white background — measured contrast ratio 3.14:1, AA only for large text.

At a glance

Foreground hex
#FF00FF
Background hex
#FFFFFF
Contrast ratio
3.14:1
WCAG AA (normal text)
Fail
WCAG AAA (normal text)
Fail

Designers reach for magenta text on white constantly — for headings, links, calls to action, and brand accents. Whether the combination is *accessible* depends on the WCAG contrast ratio, which for this exact pair is 3.14:1. It only meets AA for large text (18pt+ or 14pt+ bold). Magenta (#FF00FF) fails AA on white — a common neon/cyberpunk mistake.

Frequently asked questions

Can I use magenta text on a white background?
If your conformance target is WCAG 2.1 AA (the typical legal and design-system bar), the answer for normal-size body text is no — at 3.14:1, you are below the 4.5:1 threshold. For large text (18pt or 14pt-bold), the bar is 3:1, which this pair meets. AAA, the strictest tier, requires 7:1 — this pair falls short of that.
Why does the named color matter?
CSS named colors map to fixed hex values defined by the CSS Color Module: magenta is always #FF00FF and white is always #FFFFFF. Browsers render them identically, so the contrast ratio is identical too. Always check the hex underneath when you’re testing — gray is not the same as darkgray, which is actually lighter than gray.
What does this fail or pass mean for color blindness?
Contrast ratio measures luminance only — it doesn’t tell you whether color-blind users can distinguish hues. Two colors with strong contrast can still be confused under protanopia or deuteranopia if they sit on the same red-green axis. The simulator above shows how this pair appears under the four common types of color vision deficiency.
How do I improve the ratio if it fails?
Either darken the foreground (lower L in HSL) or lighten the background. The Suggestions panel does this automatically — it walks the lightness axis until each WCAG threshold is met, returning the closest passing hex in either direction.

Related Tools

palette

Color Palette

Extract colors from images or generate harmonious palettes.

blur_on

Color Gradient Test

Test your monitor for color banding and 8-bit vs 10-bit depth with smooth gradients across grayscale, red, green, blue, and hue channels.

gradient

CSS Gradient

Visual CSS background generator & code.

draw

Logo Maker

Design logos with a drag-and-drop canvas editor. Add text, icons, and shapes — export PNG, SVG, or ZIP.

style

CSS Cheatsheet

Quick reference for CSS selectors, Flexbox, Grid, typography, animations, and modern CSS. Search and copy instantly.