White on Blue — Contrast Check

White text on a blue background — measured contrast ratio 8.59:1, AAA-grade.

At a glance

Foreground hex
#FFFFFF
Background hex
#0000FF
Contrast ratio
8.59:1
WCAG AA (normal text)
Pass
WCAG AAA (normal text)
Pass

Designers reach for white text on blue 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 8.59:1. It clears WCAG AAA — the strictest standard. White on pure blue clears AA for normal text.

Frequently asked questions

Can I use white text on a blue 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 yes — at 8.59:1, you are above 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 achieves 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 blue is always #0000FF. 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?
It already passes — no fix needed for AA body text. If you also need AAA conformance, the calculator above suggests the nearest passing colors.

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.