Teal on White — Contrast Check

Teal text on a white background — measured contrast ratio 4.77:1, AA-grade for body.

At a glance

Foreground hex
#008080
Background hex
#FFFFFF
Contrast ratio
4.77:1
WCAG AA (normal text)
Pass
WCAG AAA (normal text)
Fail

Designers reach for teal 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 4.77:1. It clears WCAG AA for body text. CSS teal is #008080 — passes AA for body text.

Frequently asked questions

Can I use teal 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 yes — at 4.77: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 falls short of that.
Why does the named color matter?
CSS named colors map to fixed hex values defined by the CSS Color Module: teal is always #008080 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?
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.