White on Red — Contrast Check

White text on a red background — measured contrast ratio 4.00:1, AA only for large text.

At a glance

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

Designers reach for white text on red 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 4.00:1. It only meets AA for large text (18pt+ or 14pt+ bold). White on pure red is a common destructive-button pattern.

Frequently asked questions

Can I use white text on a red 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 4.00: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: white is always #FFFFFF and red is always #FF0000. 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.